Respira

App di meditazione: sistema di componenti Figma e handoff a developer in 4 paesi.

UX/UIMobileDesign System
Cliente
Respira Health
Ruolo
UX/UI · Design System
Durata
16 settimane
Team
8 (PM, dev, me)
Anno
2023
+58%DAU/MAU
84Componenti DS
4Lingue supportate
4.8★App store rating

Un'app di meditazione con un design system in quattro lingue.

Respira Health è un'app di meditazione guidata con utenti in Italia, Spagna, Francia e Germania. Il problema: quattro team di sviluppo separati, quattro codebase, quattro interpretazioni diverse delle stesse schermate.

Sono entrato come designer di sistema: costruire un design system Figma usabile da tutti i team, definire le linee guida di handoff, gestire la localizzazione di 84 componenti in quattro lingue.

Quattro team, un linguaggio solo.

#01Localizzazione senza rompere il layout

Il tedesco occupa il 40% di spazio in più dell'italiano. Ogni componente doveva essere testato in tutte e quattro le lingue.

#02Handoff asincrono

I team erano in fusi orari diversi. La documentazione doveva essere autosufficiente — niente call di chiarimento per ogni componente.

#03Accessibilità in contesti di rilassamento

L'app viene usata spesso al buio o con stanchezza visiva. Contrasti, dimensioni di testo e gesture dovevano rispettare le WCAG 2.1 AA.

Un sistema per chi non lo vede mai.

Ho costruito il design system come prodotto in sé: ogni componente ha una pagina di documentazione con stati, varianti, regole di spacing, note di accessibilità e stringhe di localizzazione per tutte e quattro le lingue.

I token sono stati strutturati per essere importati direttamente nel codice. Il risultato: meno discrepanze tra Figma e produzione, meno domande in Slack, meno call di allineamento.

Prima del design system, ogni sprint finiva con 20 issue aperte su Figma. Ora ne apriamo in media 2. Il tempo risparmiato è andato direttamente in nuove feature.

— SARA BINI, HEAD OF PRODUCT RESPIRA

+58% utenti attivi. 4.8 stelle sullo store.

Il DAU/MAU è cresciuto del 58% nei sei mesi successivi al rilascio del sistema — meno bug, meno friction, più engagement.

Il rating medio sugli app store è passato da 3.9 a 4.8 stelle, con le recensioni negative che citavano l'UX dimezzate.

[Deliverable]
  • Design system Figma con 84 componenti
  • Documentazione per 4 team di sviluppo
  • Guida di localizzazione (IT/EN/ES/DE)
  • Token design per iOS, Android e web
  • Audit di accessibilità WCAG 2.1 AA
▞ ▚ ▞ ▚ ▞ ▚ ▞ ▚ ▞ ▚ ▞ ▚ ▞ ▚ ▞ ▚ ▞ ▚ ▞ ▚
GENBOT by @gengiord
Assistente AI · risponde a domande sul portfolio
Ciao! Sono GenBot :)
Come posso aiutarti?