Tundr · HR tech · Case study

Rendere il welfare semplice per chiunque

Ho costruito da zero la piattaforma e l'app welfare di Tundr, con una struttura unica per due mondi, Fringe e Flex, integrata con i processi bancari su cui lavora la Tundr Card.

  • Product design
  • UX research
  • Design system
  • Brand
  • Web
  • App
Web app HR di Tundr: lista di tutti i dipendenti con stato dell'invito e dell'abbonamento
Onboarding dell'app Tundr: il welfare in tasca con la Tundr Card
Illustrazione della Tundr Card attiva nell'app Tundr

Il viaggio

Da zero a una piattaforma usata da centinaia di aziende

  • Dal 2023 al 2025
  • Head of UX/UI
  • Team di 3 persone
  • Da zero a costruzione prodotti

  1. 1 Discover

    Ricerca e posizionamento

  2. 2 Define

    Architettura e user flow

  3. 3 Brand

    Brand e Design System

  4. 4 Design

    Mobile App for people e Dashboard for HR

  5. 5 Ship

    App e dashboard in parallelo

  6. 6 Scale

    Crescita e gestione del team

Il punto di partenza

Il welfare aziendale è spesso complicato, e chi lo usa lo evita

Tundr nasce per cambiare questo. Servivano un'esperienza chiara per i dipendenti e uno strumento semplice per le aziende, costruiti sopra processi bancari reali e capaci di reggere due modelli di welfare diversi.

1
Tutto il mondo welfare in un'unica esperienza scalabile e pensata per benefit su misura e piani welfare delle aziende.
2
dashboard per l'HR: crediti, persone e card, con l'andamento del welfare sempre sotto controllo.

La scommessa

E se il welfare fosse semplice come un'app che usi ogni giorno?

Ho puntato su pochi percorsi chiari , un linguaggio visivo fresco e un'interfaccia accessibile. Meno menu da decifrare, più azioni dirette : vedere il proprio credito, scegliere come usarlo, ottenere subito il risultato.

Due persone sorridenti usano l'app welfare Tundr sullo smartphone
Tundr Card, la carta welfare per i fringe benefit

Il lavoro

Ho dato forma all'intero ecosistema

Sono entrata in Tundr nella fase iniziale come prima Head of UX/UI , quando il prodotto, il brand e le schermate erano ancora tutti da costruire. Ho creato il team e ho seguito prodotto, design e produzione fino alla consegna, dando forma all' intero ecosistema : l'app che i dipendenti usano ogni giorno, la dashboard con cui l'HR gestisce il welfare e una navigazione capace di tenere insieme Fringe e Flex.

01

App mobile

L'esperienza che i dipendenti usano ogni giorno.

02

Dashboard HR

Lo strumento con cui le aziende gestiscono il welfare.

03

Fringe e Flex

Una navigazione scalabile per due mondi.

Il processo

Quattro fasi, dal mercato all'interfaccia

  1. 01

    Discover

    Interviste, analisi competitiva del welfare tradizionale, workshop con stakeholder ed esperti di dominio, mappa del percorso utente con punti di attrito e opportunità.
  2. 02

    Define

    Sintesi degli insight in pattern, priorità delle funzionalità e architettura dell'informazione per ridurre il carico cognitivo.
  3. 03

    Ideate

    Codesign con product manager, sviluppatori e business, mappa di navigazione per Fringe e Flex, user story e user flow dei percorsi principali.
  4. 04

    Design

    Look and feel sviluppato con un'agenzia per la prima parte del brand, UI kit, web app HR e app mobile progettate in parallelo, con attenzione ad accessibilità e leggibilità.

01 Discover

Design system & Brand communication

Semplice, accessibile, riconoscibile

Una UI library costruita per crescere insieme al prodotto, pensata per diventare un design system condiviso tra design e sviluppo.

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

Una voce vicina, che mette le persone al primo posto e usa parole semplici e frasi corte. Ha un pizzico di ironia e un ritmo vivace, senza cadere nel banale. Parla la lingua del digitale, con micro-testi e call to action che accompagnano l'utente passo dopo passo. Ma soprattutto è un tono inclusivo , pensato per tutte le persone che usano la piattaforma.

Una direzione esplorata

Tundr WellWE/Be: il welfare, senza stress

App all-in-one per gestire al meglio il Budget Welfare dei propri dipendenti

L'idea di Tundr WellWE/Be è creare un'app che utilizza tecniche di mindfulness e l'approccio del Calm Design per aiutare gli utenti a gestire il loro Budget Welfare in modo consapevole e sereno , riducendo il loro stress. Gli utenti devono sentirsi sereni a usare il loro budget welfare, nonostante la complessità che ha intrinseca.

Tundr WellWE/Be incarna l'idea di un'app che incoraggia l'attenzione, la consapevolezza e il benessere dei collaboratori attraverso una progettazione visivamente rilassante.

Componenti

Da zero, con un design system modulare.

Abbiamo costruito da zero una UI kit basata sui token , progettando ogni componente su misura per Tundr. Un unico sistema regge entrambe le navigazioni dell’app e mantiene l’esperienza coerente mentre il prodotto cresce.

Bottoni · Card servizi e fornitori · Toast · Card accordion

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

Decisioni di design

Perché due mondi in una sola navigazione?

Fringe e Flex parlano agli stessi dipendenti. Una struttura unica evita di imparare due prodotti diversi e lascia spazio ai modelli che verranno.

Perché partire dai processi bancari della Tundr Card?

Il credito welfare passa dalla Tundr Card. Progettare sopra i processi bancari reali rende ogni percorso fattibile fin dal primo giorno.

Perché progettare web app e app mobile in parallelo?

HR e dipendenti guardano lo stesso credito da due lati. Progettarli insieme tiene coerenti dati, linguaggio e componenti.

Perché una UI library pensata come design system?

Il prodotto doveva crescere in fretta. Una libreria condivisa tra design e sviluppo permette di aggiungere funzionalità senza perdere coerenza.

App mobile

Semplice. Chiara. Subito.

L'app ha un'architettura pensata per due mondi . Dal credito disponibile alla spesa, i percorsi principali sono pochi, diretti e coerenti .

Ogni schermata è progettata per essere letta in un attimo , con una gerarchia chiara e componenti accessibili .

Dal credito alla spesa in pochi tocchi.

← →

Home: il welfare disponibile

Dashboard HR

Il welfare sotto controllo, senza fatica

Lo strumento con cui le aziende assegnano e monitorano il welfare, pensato per chi lavora nelle risorse umane e non ha tempo da perdere.

Dati chiari, azioni rapide, poche operazioni per arrivare al risultato.

← →

Il risultato

Una piattaforma che ancora oggi funziona e cresce

400+
aziende clienti, partendo da circa 10
20M€
di crediti welfare erogati
95%
utilizzo dei crediti
10
workshop in codesign con stakeholder

Ho costruito la prima piattaforma e l'app per i dipendenti, scalabile per Fringe e Flex e ancora in uso. Il risultato di cui vado più fiera è la semplicità: un welfare che si usa davvero.

Cosa posso fare per te

Dal primo workshop all'interfaccia pronta per gli sviluppatori

  1. 01

    Ricerca e posizionamento

    Interviste, analisi dei competitor, workshop.

  2. 02

    Struttura e user flow

    Architettura dell'informazione, navigazione, user story.

  3. 03

    Interfaccia e UI kit

    Look and feel, design system, prototipi.

  4. 04

    Guida del team

    Coordinamento con prodotto e sviluppo fino alla consegna.

Il processo completo lo racconto a voce

C'è più storia di quella che sta in una pagina: ricerca, workshop, scelte e ripensamenti. Alcuni dati interni non sono pubblicati.

Parliamone Scrivimi un'email

Progetto successivo

McDonald's

  • UX research
  • Product design
  • Food
Progetto successivo: 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 }}