UX/UI Design · Application mobile · Design System

Nouvelle-Aquitaine

Client

Région Nouvelle-Aquitaine

Rôle

UX/UI Designer

Équipe

Florian · Zaïtouni · Maeve · Julie

Contexte

Master · ECV Digital

Transports scolaires Nouvelle-Aquitaine — slide de titre

Concevoir une application mobile de transport adaptée aux séniors de la région Nouvelle-Aquitaine.

UX Research Audit UX/UI Wireframing Tests utilisateurs Design System Application mobile

L'équipe

L'équipe
Calypso.

L'équipe Calypso — Zaïtouni, Florian, Maeve, Julie

L'équipe Calypso — Zaïtouni · Florian · Maeve · Julie


Pour commencer à répondre à la demande de la région Nouvelle-Aquitaine, il a fallu réaliser un audit de la plateforme existante afin d'identifier les points bloquants, ceux à améliorer et ceux à conserver.
01 — Audit & Check UX/UI

Analyse du
parcours existant.

Analyse du parcours existant — Check UX/UI & hypothèses

Analyse de l'existant · Check UX/UI · À conserver · Améliorations · Hypothèses


Ensuite nous avons cherché à vérifier notre analyse et nos hypothèses auprès d'un panel d'utilisateurs. Pour se faire, ils ont dû tester nos premiers wireframes prototypés, en répondant à différents scénarios.
02 — Wireframes & Tests utilisateurs

Prototyper, tester,
itérer.

Wireframes prototypés — scénarios — changements V1 V2

Wireframes prototypés · 2 scénarios par parcours · Changements V1 → V2 suite aux tests


L'avantage lorsqu'on fait tester nos prototypes le plus tôt possible dans le développement, c'est qu'on limite le risque d'erreur lors du go live et qu'en parallèle, on peut tranquillement démarrer d'autres tâches. On a donc commencé à mettre en place le Design Système.
03 — Design System

Styles, tokens
& nomenclatures.

Mise en place des styles, définitions des tokens et nomenclatures

Couleurs · Tokens · Spacing · Nomenclature Figma — fondations du Design System


À la suite de plusieurs sessions de tests et itérations, tout en travaillant aussi sur une direction artistique plus adaptée à la cible, nous avons pu proposer cette nouvelle version du service.
04 — Solution finale

Nouvelle version
du service.

Version mobile — prototype final

Version mobile — prototype final

Version desktop — prototype final

Version desktop — prototype final


05 — Réflexions

Ce que ce projet
m'a appris.

Ce projet m'a appris à mener en parallèle des phases qui semblent séquentielles — tester d'un côté, construire le design system de l'autre. Une organisation qui demande de la rigueur mais qui fait gagner un temps précieux.

Travailler pour les séniors sur une application de transport régional m'a rappelé que l'accessibilité n'est pas une option — c'est le point de départ du design.

Apprentissage 01

Prototyper tôt, tester souvent

Un wireframe basse fidélité testé en semaine 1 vaut mieux qu'une maquette parfaite testée en semaine 4.

Apprentissage 02

DS & tests en parallèle

Construire le design system pendant les tests est la meilleure façon d'éviter la dette technique sans ralentir le projet.

Apprentissage 03

Accessibilité d'abord

Concevoir pour une cible sénior contraint positivement — les décisions deviennent plus claires quand on part des besoins réels.


Projet suivant Logepal