Analyse & stratégie UX
Chez Monkey Factory, j’avais pour mission de faire progresser l’application en menant une analyse UX approfondie et en définissant les orientations nécessaires pour sa suite.
J’ai consolidé les fondations produit en définissant les parcours essentiels, les règles d’usage et les priorités fonctionnelles.
Ce travail a servi d’appui pour guider les évolutions, assurer la cohérence entre les équipes et renforcer la vision globale du service.
Audit complet de l’application
L’audit de MyBus (devenue NéMO) a permis de clarifier l’état de l’application et de définir les priorités pour la faire évoluer de manière cohérente.
En adaptant la méthode Bastien & Scapin au contexte du transport en mobilité, l’analyse a évalué le guidage, la charge cognitive, la cohérence visuelle et la gestion des erreurs.
Elle a révélé trois obstacles majeurs : un parcours d’activation trop long pour un achat rapide, une hiérarchie visuelle peu lisible et un manque de contraste limitant la perception en situation réelle.
Ces constats ont servi de base à une refonte axée sur la rapidité d’action et une meilleure lisibilité en mobilité.
Cartographie des parcours utilisateurs
J’ai cartographié les parcours utilisateurs afin de clarifier les scénarios d’usage clés et de mettre en évidence les ruptures, redondances et points de friction.
Cette analyse a permis d’aligner les équipes sur une vision partagée des besoins et d’orienter les priorités de conception.
Identification des points de friction
Les points de friction relevés concernaient surtout les situations en mobilité : activation de service trop longue, hiérarchie d’action peu lisible, contrastes faibles et erreurs signalées de manière trop discrète.
Ces éléments nuisaient à la rapidité d’exécution et ont guidé les améliorations prioritaires.
Amélioration continue
L’évolution du design s’est faite par itérations ciblées afin d’améliorer l’expérience sans perturber ce qui fonctionnait déjà.
Les points issus de l’audit ont été priorisés selon leur impact et leur faisabilité, permettant d’avancer de manière progressive et structurée.
La migration vers Figma a renforcé la collaboration et clarifié la documentation, devenant un véritable levier pour accélérer et fiabiliser les étapes suivantes de conception.
Conception & prototypage
Après l’audit et la définition des fondations produit, la phase de conception a consisté à structurer les parcours, clarifier les fonctionnalités et tester rapidement les orientations retenues.
L’objectif était d’assurer une expérience fluide, cohérente et adaptée aux usages en mobilité, avant d’engager les étapes de production.
User flows
La cartographie des parcours utilisateurs a permis d’obtenir une vision globale et partagée du service. FigJam a été utilisé pour visualiser rapidement les étapes clés, produire des schémas lisibles et faciliter la collaboration avec les autres pôles.
Ce travail a révélé plusieurs points de friction, clarifié la logique du service et posé des bases solides avant d’engager les premières phases de prototypage.
Scénarios et structure des fonctionnalités
Les scénarios d’usage ont été définis à partir des besoins réels des usagers et des contraintes de mobilité.
Ils ont permis de structurer les fonctionnalités essentielles, hiérarchiser les actions prioritaires et assurer une cohérence entre parcours, interface et logique métier.
Prototypes interactifs
Les prototypes ont été réalisés pour tester rapidement les hypothèses, explorer différentes configurations d’écran et valider les ajustements nécessaires avant la production.
L’objectif était d’optimiser l’enchaînement des actions essentielles et d’améliorer la fluidité de l’expérience en mobilité.
Tests et itérations
Les retours des équipes internes et des premiers tests utilisateurs ont permis d’identifier rapidement les ajustements à apporter.
Ces itérations successives ont consolidé les choix fonctionnels, affiné les interactions clés et sécurisé la transition vers les maquettes finales.
Prototypage & maquettage
Les maquettes existantes, initialement créées sur Sketch puis partiellement migrées vers Adobe XD, présentaient des inconsistances dans les alignements, les espacements et l’organisation des fichiers.
Pour retrouver une base fiable, un outil collaboratif et multi-device s’imposait.
Figma a été choisi pour structurer durablement la production, améliorer la collaboration et soutenir l’évolution continue du design.
UI Design
En parallèle du travail UX, j’ai repris l’ensemble des écrans et des composants de l’application sur Figma afin de poser des bases visuelles solides et de construire un design system fiable, cohérent et adapté aux déclinaisons en marque blanche.
Bibliothèque de composants
Une bibliothèque complète a été construite dans Figma pour rassembler tous les composants : boutons, champs, cards, onglets… Chaque élément a été pensé pour être réutilisable, évolutif et facile à maintenir.
Cette bibliothèque s’appuie sur l’existant, en consolidant les bonnes pratiques et en clarifiant les zones floues.
Les spécifications visuelles (marges, comportements, états, contraintes) ont été documentées dans Confluence afin d’être partagées et accessibles à toutes les équipes.
Design System
La reprise des écrans et des composants essentiels a permis de stabiliser rapidement l’interface sans bloquer la production.
L’objectif était d’obtenir un design clair, pratique et facilement réutilisable : composants cohérents, structure lisible et styles unifiés.
Les règles d’espacement, de marges internes, les styles typographiques, les nuanciers et les grilles ont été définis.
Les composants existants ont été nettoyés et uniformisés pour renforcer leur robustesse, notamment en vue des déclinaisons pour différents réseaux de transport.
Ce travail a permis de réduire les erreurs, d’accélérer les mises à jour et d’améliorer la collaboration entre les équipes.
Couleurs
Des grilles adaptées aux formats mobile, tablette et web ont été définies afin d’assurer une structure cohérente sur tous les supports.
Elles facilitent l’alignement, renforcent la hiérarchie visuelle et servent de base commune pour la mise en page.
Iconographie
L’iconographie présentait des variations de taille, de style et d’épaisseur de trait. J’ai redessiné l’ensemble des icônes sur Illustrator, sur une grille commune, avec un style unifié et une épaisseur cohérente.
Elles ont ensuite été importées dans Figma puis intégrées via Font Awesome pour simplifier la mise en œuvre technique.
Ce travail a renforcé la cohérence visuelle et fiabilisé les déclinaisons 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é
- Statistique et Consommation
- Bulle de discussion
- Téléphone / Smarthpone
- Voir
- Boutique
- Options
- 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
- 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
- Renommer / Nommer
- Mute
- Musique
- Monument
- Mobilités
- Microphone
- Métro
- Megaphone / Annonce
- Carte
- Manifestation
- 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
- Historique
- Masquer
- Bulle d’aide
- Aide
- Santé
- Go / Volant
- Cadeau
- Amis
- Flash
- Arrivée
- Finance
- Fin abonnement / période
- Favoris
- ID face
- Liens externes
- Évenement
- Embouteillage
- Adresse email
- Édition
- Téléchargement
- Dénivelée perte
- Double chevron
- Document
- Direction
- 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
- Panier
- 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
Les illustrations ont été retravaillées pour s’intégrer harmonieusement dans les nouveaux écrans, tout en préservant l’identité visuelle existante.
Certaines ont été ajustées, d’autres déclinées pour de nouveaux usages.
L’utilisation de variables et de styles dans Figma a permis de produire rapidement plusieurs variantes tout en maintenant une cohérence graphique globale.
- Abri à vélo
- Car scolaire
- Car
- Tramway
- Bus
- Vélo
- Transport à la Demande (TàD)
- Transport express régional
- Voiture
