Tundr · HR tech · Case study

Making welfare simple for everyone

I built Tundr's welfare platform and app from scratch , with a single structure for two worlds, Fringe and Flex, integrated with the banking processes behind the Tundr Card.

  • Product design
  • UX research
  • Design system
  • Brand
  • Web
  • App
Tundr HR web app: list of all employees with invitation and subscription status
Tundr app onboarding: welfare in your pocket with the Tundr Card
Illustration of the active Tundr Card in the Tundr app

The journey

From zero to a platform used by hundreds of companies

  • 2023 to 2025
  • Head of UX/UI
  • Team of 3 people
  • From zero to product building

  1. 1 Discover

    Research and positioning

  2. 2 Define

    Architecture and user flows

  3. 3 Brand

    Brand and Design System

  4. 4 Design

    Mobile App for people and Dashboard for HR

  5. 5 Ship

    App and dashboard in parallel

  6. 6 Scale

    Growth and team leadership

Where it started

Corporate welfare is often complicated, and the people who use it avoid it

Tundr was born to change that. It needed a clear experience for employees and a simple tool for companies, built on real banking processes and able to support two different welfare models.

1
The whole welfare world in a single scalable experience designed for tailored benefits and company welfare plans.
2
HR dashboard for credits, people and cards, with welfare performance always in view.

The bet

What if welfare were as simple as an app you use every day?

I focused on a few clear journeys , a fresh visual language and an accessible interface. Fewer menus to decode, more direct actions : see your balance, choose how to use it, get the result right away.

Two smiling people using the Tundr welfare app on a smartphone
Tundr Card, the welfare card for fringe benefits

The work

I shaped the whole ecosystem

I joined Tundr at an early stage as its first Head of UX/UI , when the product, the brand and every screen were still to be built. I created the team and followed product, design and production through to delivery, shaping the whole ecosystem : the app employees use every day, the dashboard HR relies on to manage welfare, and a navigation that holds Fringe and Flex together.

01

Mobile app

The experience employees use every day.

02

HR dashboard

The tool companies use to manage welfare.

03

Fringe and Flex

A navigation that scales across two worlds.

The process

Four phases, from market to interface

  1. 01

    Discover

    Interviews, competitive analysis of traditional welfare, workshops with stakeholders and domain experts, a user journey map showing friction points and opportunities.
  2. 02

    Define

    Insights synthesised into patterns, feature priorities and an information architecture that lowers cognitive load.
  3. 03

    Ideate

    Codesign with product managers, developers and the business, a navigation map for Fringe and Flex, user stories and user flows for the main journeys.
  4. 04

    Design

    Look and feel developed with an agency for the first part of the brand, a UI kit, HR web app and mobile app designed in parallel, with attention to accessibility and legibility.

01 Discover

Design system & Brand communication

Simple, accessible, recognisable

A UI library built to grow with the product, designed to become a design system shared by design and engineering.

Colours

Color with psychology and accessibility applied

Brand Yellow #E9B757 Brand Pink #C84260 Brand Purple #2640A7 Brand Green #3A8377

Neutrals

#1A1C1E #F4F4F4

Semantic

  • Alert #DB0C09 · #FFF5F0
  • Warning #FF5D1A · #FFFFDD
  • Success #008200 · #DDFFDD
  • Info #174EAD · #CCE8FF

Tone of voice

“Welfare begins with We.”

  • Human centric
  • Smartness
  • Innovation
  • Sustainibility

A warm voice that puts people first , with plain words and short sentences. It has a touch of wit and a lively rhythm, without ever sounding dull. It speaks the language of digital, with microcopy and calls to action that guide users step by step. Above all, it is an inclusive tone , designed for everyone who uses the platform.

An explored direction

Tundr WellWE/Be: welfare, without the stress

An all-in-one app to make the most of employees' welfare budget

The idea behind Tundr WellWE/Be is an app that uses mindfulness techniques and a Calm Design approach to help users manage their welfare budget mindfully and calmly , reducing their stress. Users should feel at ease using their welfare budget, despite its inherent complexity.

Tundr WellWE/Be embodies an app that encourages focus, awareness and wellbeing among employees through a visually relaxing design.

Components

From scratch, with a modular design system.

We built a token-based UI kit from scratch, designing every component specifically for Tundr. A single system supports both of the app’s navigations and keeps the experience consistent as the product grows.

Buttons · Service and supplier cards · Toasts · Accordion cards

Tundr UI library components: Buttons Tundr UI library components: Toasts Tundr UI library components: Services/Suppliers Card Tundr UI library components: Sources Accordion Card

Design decisions

Why two worlds in a single navigation?

Fringe and Flex speak to the same employees. One structure means nobody has to learn two products, and it leaves room for the models still to come.

Why start from the Tundr Card banking processes?

Welfare credit moves through the Tundr Card. Designing on top of real banking processes made every journey feasible from day one.

Why design the web app and the mobile app in parallel?

HR and employees look at the same credit from two sides. Designing them together kept data, language and components consistent.

Why a UI library designed as a design system?

The product had to grow fast. A library shared by design and engineering lets new features ship without losing consistency.

Mobile app

Simple. Clear. Instant.

The app has an architecture built for two worlds . From available balance to spending, the main journeys are few, direct and consistent .

Every screen is designed to be read in a moment , with a clear hierarchy and accessible components .

From balance to spending in a few taps.

← →

Home: available welfare

HR dashboard

Welfare under control, without the effort

The tool companies use to assign and monitor welfare, designed for people in HR who have no time to lose.

Clear data, quick actions, few steps to get to the result.

← →

The result

A platform that still works and keeps growing

400+
client companies, starting from about 10
€20M
in welfare credits issued
95%
credit usage
10
codesign workshops with stakeholders

I built the first platform and the employee app, scalable for Fringe and Flex and still in use. What I am proudest of is simplicity: welfare that people actually use.

How I can help

From the first workshop to an interface ready for developers

  1. 01

    Research and positioning

    Interviews, competitor analysis, workshops.

  2. 02

    Structure and user flows

    Information architecture, navigation, user stories.

  3. 03

    Interface and UI kit

    Look and feel, design system, prototypes.

  4. 04

    Team leadership

    Coordination with product and engineering through to delivery.

I tell the full process out loud

There is more story than fits on a page: research, workshops, choices and second thoughts. Some internal data is not published.

Let's talk Write me an email

Next project

McDonald's

  • UX research
  • Product design
  • Food
Next project: McDonald's

{{ t.hero.label }}

{{ t.hero.h1a }} {{ t.hero.h1pre }}{{ t.hero.hl }}

{{ g.t }}

  • {{ tag }}
    •
  • {{ tag }}
    •
{{ t.img.h1 }}
{{ t.img.h2 }}
{{ t.img.h4 }}

{{ t.journey.label }}

{{ H.journey.a }}{{ H.journey.b }}

  • {{ c }}
    •

  1. {{ st.n }}{{ st.t }}

    {{ st.d }}

    2.

{{ t.start.label }}

{{ H.start.a }}{{ H.start.b }}

{{ wd.w }}

{{ sx.num }}
{{ sx.cap }}

{{ t.bet.label }}

{{ H.bet.a }}{{ H.bet.b }}

{{ g.t }}

{{ t.img.bet2 }}
{{ t.img.bet1 }}

{{ t.work.label }}

{{ H.work.a }}{{ H.work.b }}

{{ g.t }}

{{ col.n }}

{{ col.t }}

{{ col.d }}

{{ t.process.label }}

{{ H.process.a }}{{ H.process.b }}

    2.

{{ procCur.n }}{{ procCur.t }}

{{ t.ds.label }}

{{ H.ds.a }}{{ H.ds.b }}

{{ g.t }}

{{ t.ds.colors }}

{{ t.ds.colorsTitle }}

{{ t.ds.neutrals }}

{{ neuFirst }}{{ neuLast }}

{{ t.ds.semantic }}

  • {{ se.name }} {{ se.codes }}

Tone of voice

“Welfare begins with We.”

  • {{ vv }}
    •

{{ g.t }}

{{ t.ds.wellLabel }}

{{ t.ds.wellTitle }}

{{ t.ds.wellSub }}

{{ g.t }}

{{ t.ds.wellBold }}{{ t.ds.wellEnd }}

{{ t.ds.comps }}

{{ t.ds.compTitle }}

{{ g.t }}

{{ t.ds.compEx }}

{{ t.ds.dec }}

{{ q.a }}

{{ t.app.label }}

{{ H.app.a }}{{ H.app.b }}

{{ g.t }}

{{ g.t }}

{{ appQuote }}

{{ appCur.cap }}

{{ t.dash.label }}

{{ H.dash.a }}{{ H.dash.b }}

{{ t.dash.c1 }}

{{ t.dash.c2 }}

{{ t.result.label }}

{{ H.result.a }}{{ H.result.b }}

{{ nm.v }}
{{ nm.d }}

{{ t.result.close }}

{{ t.help.label }}

{{ H.help.a }}{{ H.help.b }}

  1. {{ it.n }}

    {{ it.t }}

    {{ it.d }}

    2.

{{ H.bts.a }}{{ H.bts.b }}

{{ t.bts.text }}

{{ t.next.label }}

{{ t.next.name }}

  • {{ tag }}
    •
{{ t.bts.next }}