Audit de l’app
L’audit de MyBus (devenue depuis NéMO) a permis de dresser un état des lieux complet de l’application, utilisée à la fois comme produit propriétaire et socle commun pour différents clients. L’analyse visait à identifier les points forts, les axes d’amélioration et à préparer l’évolution du design de manière cohérente et durable.
La méthodologie Bastien & Scapin a été adaptée au contexte d’une application mobile de transport pour évaluer le guidage, la charge cognitive, la cohérence visuelle et fonctionnelle, ainsi que la gestion des erreurs, tout en tenant compte des besoins des usagers. L’objectif était de rendre l’accès à l’information rapide et intuitif, même en mobilité.
Plusieurs points d’attention concrets sont apparus. Le parcours d’activation de service comportait trop d’étapes et d’informations à intégrer, ce qui empêchait l’achat rapide d’un titre de transport dans des situations d’urgence, comme juste avant de monter dans le bus. Des incohérences visuelles, avec des formes et des couleurs de boutons variables, compliquaient la hiérarchie des actions. Le contraste limité du duo orange/blanc et la gestion des erreurs via des messages toasters rendaient l’usage parfois difficile en situation réelle.
Ces observations ont servi de fondation pour un design plus clair, cohérent et adapté au quotidien des voyageurs.
Amélioration continue
Plutôt que de tout remettre à plat, l’approche adoptée a été progressive, améliorant ce qui pouvait l’être sans perturber ce qui fonctionnait déjà. Les points relevés lors de l’audit ont été classés selon leur impact, leur faisabilité et leur compatibilité avec le rythme de production, créant une hiérarchisation solide pour faire évoluer le design de manière cohérente.
La migration vers Figma a constitué un levier essentiel pour faciliter la collaboration, structurer les informations et préparer les étapes suivantes de conception, plutôt qu’un simple changement d’outil.
User flow
La cartographie des parcours utilisateurs a permis d’obtenir une vision globale, utile pour l’ensemble de l’équipe. L’utilisation de FigJam a rendu possible la visualisation rapide des grandes étapes, la création de schémas lisibles et le partage efficace avec les autres pôles.
Cette représentation a révélé certains points de friction, clarifié la logique générale du service et posé des bases solides avant d’engager les premières évolutions de prototypage et de maquettage.

Prototypage / Maquettage
Les maquettes existantes, initialement réalisées sur Sketch puis partiellement rebasculées sur Adobe XD, présentaient des pertes d’informations dans les alignements, espacements et l’organisation générale des fichiers. Pour garantir des fondations solides, l’utilisation d’un outil multi-device, collaboratif et facile à prendre en main s’est imposée.
Figma a été choisi pour sa capacité à répondre aux besoins de collaboration, d’efficacité et d’amélioration continue, tout en structurant le design pour le rendre plus robuste et évolutif.

Design Système
La reprise des écrans et des composants essentiels a permis de poser des bases solides rapidement, sans bloquer la production. L’objectif consistait à rendre le design plus clair et pratique, avec des composants simples à réutiliser, une structure lisible et des styles cohérents d’un écran à l’autre.
Les règles d’espacement et de marges internes ont été définies, les styles typographiques, nuanciers et grilles de structure mis en place. Les composants existants ont été nettoyés, uniformisés et pensés pour leur réutilisabilité, notamment dans le cadre des déclinaisons marque blanche, permettant de gagner du temps, de réduire les erreurs et de faciliter la collaboration au sein de l’équipe.
Grilles
Pour assurer une mise en page cohérente sur tous les supports, j’ai défini une grille adaptée à chaque format : mobile, tablette et web. Elles servent de base à la structuration des écrans, facilitent l’alignement des éléments et garantissent une hiérarchie visuelle claire.

Formulaires
Chaque composant a été conçu pour être clair, accessible et cohérent avec le reste de l’interface, tout en facilitant la réutilisation et la maintenance.




Boutons
J’ai défini plusieurs types de boutons (principaux, secondaires, icône seule…), tous construits à partir d’une même logique : marges internes régulières, tailles cohérentes, rayons de bord uniformes et palette issue du design system.
Chaque état (normal, au survol, désactivé) est clairement défini, pour garantir un rendu homogène et limiter les ajustements manuels.


Onglets et filtres
Onglets et filtres structurent la navigation et facilitent la recherche d’informations.
- Les onglets organisent le contenu par section, tout en gardant le contexte.
- Les filtres permettent d’affiner l’affichage selon les besoins de l’utilisateur.

Élément « Ligne »
L’élément Ligne donne une vue claire de tout un trajet : arrêts et stations avec leur nom et commune, horaires prévus, temps réel d’attente, et état de desserte. Des pictogrammes indiquent l’accessibilité PMR, les autres lignes en correspondance et la position actuelle du véhicule, pour savoir instantanément ce qui a déjà été desservi et ce qui reste à venir.

Élément »Card »
Composants Card affichant les informations clés sur un arrêt/station ou une ligne : prochains passages, bornes de recharge, correspondances… Utilisés en page d’accueil pour les favoris ou à proximité, et dans les résultats de calcul d’itinéraire.

Ticket / Titre
conçu pour évoquer visuellement un vrai ticket, avec un style inspiré de l’imaginaire des tickets dans la pop culture. Il affiche les informations essentielles du trajet tout en restant ludique et identifiable par l’utilisateur.

Textes
Les styles de texte pour le web et le mobile ont été définis en tenant compte de la hiérarchie, de la lisibilité et de la cohérence visuelle. Titres, sous-titres, corps de texte et légendes disposent de règles claires de taille, graisse, interlignage et couleur, afin d’assurer leur réutilisation et leur adaptation selon le contexte.


Bibliothèque
Pour gagner en cohérence et en clarté, j’ai mis en place une bibliothèque de composants directement intégrée aux maquettes et prototypes que j’étais en train de reprendre — et, plus tard, pour les évolutions produit. Boutons, champs, cartes, onglets… chaque composant a été conçu pour être réutilisable, adaptable, et facile à maintenir dans la durée.
Cette base s’est construite à partir de l’existant, en consolidant ce qui fonctionnait déjà, en y appliquant des logiques de styles de texte, de variables de couleur, etc., et en clarifiant ce qui devait l’être. Les spécifications visuelles (marges, comportements, états, contraintes,…) ont été documentées dans des pages Confluence, afin de pouvoir être partagées et accessibles à toutes les personnes impliquées.
Couleurs
- 1er couleur
- 2e couleur
- 3e couleur
- 4e couleur
- 5e couleur
- 6e couleur
- 7e couleur
- Couleur texte
- CTA 1er couleur
- CTA 2e couleur
- CTA 3e couleur
- CTA 4e couleur
Iconographie
Les icônes de l’application posaient plusieurs problèmes : elles n’étaient pas toutes à la même échelle, certaines plus larges ou plus hautes que d’autres, ce qui compliquait la mise en page. Le style graphique variait d’une icône à l’autre, tout comme l’épaisseur des traits. Difficile, dans ces conditions, d’obtenir un rendu propre et cohérent.

J’ai donc repris l’ensemble des icônes depuis zéro, en les redessinant sous Illustrator, sur une grille commune, avec des formes simples et une épaisseur de trait uniforme. Une fois finalisées, elles ont été importées dans Figma pour être intégrées aux maquettes, puis partagées via Font Awesome pour faciliter leur intégration technique.
Ce travail a permis d’unifier le style de l’interface, de fiabiliser la mise en page, et de simplifier les déclinaisons en marque blanche.
- Travail
- Alerte
- Alerte responsive
- Portefeuille
- Voir le titre / ticket
- Vélo libre service
- Utilisateur
- Importer
- Dénivelée gain
- Invalide
- Travaux
- Poubelle
- Transfert
- Tramway
- Train / Bus
- Train
- Horaires responsive
- Horaires
- Fin validité d’un titre / ticket
- Titre / Ticket
- Tag / Etiquette
- T.à.D (Transport à la Demande)
- Carte abonné invalide
- Carte abonné
- Statistique et Consommation
- Bulle de discussion
- Téléphone / Smarthpone
- Voir
- Boutique
- Options A
- Options B
- Envoyer
- Rechercher
- École
- Scanner un QR code
- Sauvegarder
- R.I.B
- Rendre vélo
- Restaurants
- Rafraichir
- QR Code
- Station essence
- Durée / Post Paiement
- Positive
- PMR
- Lecture
- Tirelire
- Photo
- Téléphone
- Animaux de compagnie
- PC
- Pause
- Parking Relais
- Parking
- Cadenas ouvert
- Cadenas fermé
- Hors ligne
- Pas de carte
- Non fumeur
- Pas de téléphone
- Pas de Carte
- Pas de localisation
- Aucun cable
- Lettre information / Newsletter
- Negative
- Renommer / Nommer
- N/A
- Mute
- Musique
- Monument
- Mobilités
- Microphone
- Métro
- Menu burger
- Megaphone / Annonce
- Carte
- Manifestation
- Maintenance
- Carte perdue
- Deconnecter
- Localisation
- Liste
- Liens
- Ligne
- Aimer
- Supprimer son compte
- Ecologie
- Clé
- Calories brûlées
- Rejoindre
- Itinéraire B
- Itinéraire A
- Factures
- Internet
- Intemperie
- Informations
- Carte identité verso
- Carte identité recto
- Heure
- Accueil
- À la maison responsive
- À la maison
- Historique
- Masquer
- Bulle d’aide
- Aide
- Santé
- Gratuit
- Go / Volant
- Cadeau
- Geolocalisation
- Amis
- Flash
- Arrivée
- Finance
- Fin abonnement / période
- Favoris
- ID face
- Liens externes
- Évenement
- Embouteillage
- Adresse email
- Édition
- Zone de Drag
- Téléchargement
- Dénivelée perte
- Double chevron
- Document
- Direction
- Détail
- Désactiver une carte
- Vélo B
- Vélo A
- Vélo C
- CVV
- Culture
- Fermer
- Créditer
- Carte Bancaire
- Covoiturage
- Communes
- Check
- Charge
- Changer de direction
- Changer
- Casque audio
- Carte favorite
- Voiture
- Voiture de derrière
- Date et heure
- Calendrier
- Cable
- Arrêts de bus
- Bus
- Bug B
- Bug A
- Discussion
- Borne de recharge
- Choix heure
- Navettes fluviales
- Anniversaire
- Abri vélo
- Informations
- Pannier
- Bagage
- Pièces jointes
- Flèche vers le haut
- Flèche vers la droite
- Flèche vers la gauche
- Flèche vers le bas
- Alerte
- Intelligence Artificielle
- Paramètres A
- Paramètres B
- Adresse
- Planifier
- Ajouter au panier
- Activer
- 24 heures
Illustrations
Le travail sur les illustrations s’est inscrit dans une logique de continuité graphique. Il s’agissait de préserver le patrimoine visuel existant tout en l’adaptant aux besoins des évolutions. Certaines images ont été retravaillées pour mieux s’intégrer dans les nouveaux écrans, d’autres déclinées pour illustrer de nouveaux cas d’usage. Comme pour les composants, j’ai appliqué une logique de variables et de styles dans Figma, permettant de générer rapidement plusieurs variantes tout en maintenant une cohérence graphique sur l’ensemble de l’application.
- Abri à vélo
- Car scolaire
- Car
- Tramway
- Bus
- Vélo
- Transport à la Demande (TàD)
- Transport express régional
- Voiture
Conclusion
Au fil du temps, le design system s’est imposé comme un socle structurant pour toute l’équipe. Les développeurs gagnaient en fiabilité grâce à des composants cohérents, les chefs de projet pouvaient mieux anticiper l’impact des évolutions, et j’avais de mon côté un cadre clair pour concevoir, affiner et faire évoluer l’application. Ce n’était pas un livrable figé mais une base vivante, que j’ai nourrie et adaptée en fonction des besoins réels du produit et de ses contraintes.
En parallèle, j’ai mené plusieurs entretiens utilisateurs afin de préparer l’arrivée de nouvelles fonctionnalités. Ces échanges ont joué un rôle clé : ils m’ont permis de confronter les hypothèses aux usages concrets, de comprendre les attentes spécifiques des voyageurs, et de vérifier que chaque évolution restait intuitive même dans des situations de mobilité parfois stressantes. L’écoute de ces retours terrain a directement orienté mes choix, garantissant que le design restait centré sur l’expérience réelle plutôt que sur une logique purement théorique.
Avec le recul, cette expérience m’a montré combien le rôle de designer produit va au-delà de la conception visuelle. Il s’agit d’orchestrer, de donner de la cohérence, de faciliter la collaboration entre métiers et de créer un cadre durable où l’équipe avance plus efficacement. Mais surtout, il s’agit de garder le cap sur l’essentiel : proposer une expérience claire, accessible et utile pour les usagers, même dans des contextes d’usage contraints comme les transports.