❖ Contexte du projet
La région Nouvelle-Aquitaine propose un service de transport en commun pour les jeunes écoliers vivant dans la région. Pour la rentrée 2024 elle souhaite refondre la plateforme existante et mettre en place un Design System pour ses services .
❖ Objectifs
● Refondre le parcours en mobile first en faisant évoluer l'UX et l'UI
● Créer le Design System de la Région Nouvelle Aquitaine
● Décliner le parcours en version desktop
Research
❖ Roadmap du projet
Cette roadmap retrace les différentes étapes et les objectifs accomplis lors de notre projet de refonte du site de la région Nouvelle-Aquitaine, qui s'est étendu de novembre 2023 à décembre 2024.
❖ L’audit UX : Évaluer l'expérience utilisateur pour optimiser la performance
Cette roadmap retrace les différentes étapes et les objectifs accomplis lors de notre projet de refonte du site de la région Nouvelle-Aquitaine, qui s'est étendu de novembre 2023 à décembre 2024.
❖ Points négatif
● L'interface manque de cohérence dans la hiérarchisation.
● La première section d'une interface présente une largeur différente des autres, ce qui crée une rupture visuelle et une incohérence graphique.
● Le titre de la page n'est pas suffisamment mis en évidence, ce qui peut nuire à la compréhension de l'utilisateur et à l'expérience globale.
● Les boutons sont visuellement trop similaires, créant une confusion.
❖ Points positif
● La charte graphie est respectée, ce qui donne de la crédibilité au site.
❖ Recommandations
● Supprimer les éléments non essentiels, établir une hiérarchie visuelle claire
● Vérifier le responsive, Utiliser des breakpoints adaptés pour maintenir une mise en page cohérente sur tous les appareils.
● Hiérarchiser les boutons visuellement (taille, couleur, forme)
❖ Points négatif
● L'emplacement de la carte dans la page n'est peut-être pas suffisamment évident, ce qui risque de la rendre invisible pour certains utilisateurs.
● Les champs obligatoires doivent être clairement signalés dès le début du formulaire.
❖ Points positif
● Les placeholder des champs de saisie comporte des exemples sont parlant
● Existence de captions complémentaires pour aider a la saisie
● La loi de proximité est respecter entre les différents groupement d’information demandé
❖ Recommandations
● Ajuster la hierarchie des contenus sur la page
● Placer en haut du formulaire la mention des champs obligatoire
❖ Points négatif
● La longueur excessive de certains champs de saisie peut rendre le formulaire fastidieux à remplir et nuire à l'expérience utilisateur.
● Le champ de saisie du captcha ne respecte pas la charte graphique du formulaire, notamment en termes de contraste.
● L'affichage de l'étape actuelle aurait bénéficié d'un stepper, permettant à l'utilisateur de mieux visualiser sa progression dans le formulaire.
❖ Points positif
● Existence de captions complémentaires pour aider a la saisie
❖ Recommandations
● Mettre en place une documentation qui limite la largeur des champs de saisie
● S’assurer de la cohérence graphique des éléments utiliser sur les page et leur contraste
● Ajouter un stepper pour donner plus de lisibilité aux utilisateurs sur leurs parcours
❖ Points négatif
● Une liste déroulante pour deux options seulement alourdit inutilement le parcours utilisateur et peut le ralentir.
● L'utilisation d'une boîte rouge et d'un bouton sans texte clair crée une incohérence visuelle qui rend difficile la compréhension de son rôle dans la hiérarchie.
● Le contraste entre le lien et le fond et d'utiliser une police de caractère n’est pas lisible.
● Absence d’un bouton précédent pour revenir en arrière dans le parcours ou d’annulation
❖ Recommandations
● Intégrer un bouton "Précédent"
● Proposer une fonction d'annulation
● Trouver une alternative aux listes déroulantes
● Rendre le bouton plus explicite / Ajouter un texte clair et concis
❖ Veille et Benchmark UX : S'inspirer des meilleures pratiques pour innover
Cette roadmap retrace les différentes étapes et les objectifs accomplis lors de notre projet de refonte du site de la région Nouvelle-Aquitaine, qui s'est étendu de novembre 2023 à décembre 2024.
Intérêts: Parcours d’inscritpion
Intérêts: Bonne hiérarchie de l’information Mire de connexion clair
Intérêts: Agencement du contenu Design d’interface
❖ Les interviews utilisateurs : Comprendre en profondeur les besoins et les motivations
Nous avons réalisé des entretiens semi-directifs avec cinq individus d'une durée de 5 à 10 minutes chacun. Ces discussions nous ont permis de recueillir des données qualitatives et d'affiner notre compréhension des principaux points de friction rencontrés par les parents.
Les résultats de notre étude nous ont permis d'identifier plusieurs axes d'amélioration pour le processus d'inscription au transport scolaire.
Parmi ces axes, on peut citer la simplification des démarches administratives, la mise en place d'un système d'information plus clair et accessible, et l'amélioration de la communication avec les parents.
❖  Les personas UX : Donner vie aux insights des interviews utilisateurs
La création de personae en UX est essentielle pour plusieurs raisons. Elle aide à comprendre les utilisateurs potentiels, leurs besoins, leurs attentes et leurs comportements.
❖  User Flow : Cartographier le parcours utilisateur pour une expérience fluide
Après l’audit du site, nous avons décidé de nous concentrer sur le parcours d'inscription centré sur l'inscription complète du parents pour son enfant au service de transport scolaire de sa région et de le simplifier.
Les étapes clés de ce nouveau parcours comprennent :
Création d'un compte parent sur le site web :
Les parents devront créer un compte sur le site web du transport scolaire en saisissant leurs informations personnelles et en définissant un mot de passe sécurisé.
Ajout d'un enfant au service de transport scolaire :
Une fois le compte parent créé, les parents pourront ajouter un enfant en fournissant ses informations personnelles.
Dans une troisième phase, nous testerons la fonctionnalité de connexion/déconnexion et l'ergonomie du tableau de bord.
nous demanderons aux parents d'ajouter un second enfant à leur compte et de naviguer dans les différentes sections du tableau de bord afin d'évaluer la facilité d'utilisation et l'accès aux informations.
Conception
❖  La charte graphique : vers une identité plus douce et plus dynamique.
Suite à un benchmark approfondi des interfaces utilisateur et dans une démarche d'éco-conception, nous avons décidé de nous démarquer des chartes graphiques institutionnelles traditionnelles.
En privilégiant une palette de couleurs pastel et des illustrations épurées, similaires à celles de Notion, nous souhaitons offrir une expérience utilisateur plus agréable tout en réduisant notre impact environnemental.
❖  Création de composants design système : Vers une interface utilisateur plus cohérente et efficace.
Suite à un benchmark approfondi des interfaces utilisateur et dans une démarche d'éco-conception, nous avons décidé de nous démarquer des chartes graphiques institutionnelles traditionnelles.
Création de composants d'interface utilisateur : Un processus clair et efficace
Après une première réunion de cadrage, nous avons établi la liste des composants indispensables à la création de nos interfaces. Nous les avons ensuite classés par ordre de priorité et nous nous sommes réparti les tâches.
Lors des réunions de suivi, les personnes assignées à un composant le présentent en situation et le soumettent à l'analyse des autres. Cette phase de challenge permet d'itérer sur la conception du composant et de l'améliorer.
Une fois finalisé par le designer, le composant passe en phase de vérification. Un autre designer vérifie sa construction et son comportement avant de le valider.
Fonctionnement du design système: de l'architecture à l'utilisation.
Le fichier est structuré en quatre grandes catégories regroupant tous les éléments du design système (voir index). Chaque élément est directement accessible depuis l'index pour une navigation simplifiée.
Un guide d'utilisation accompagne le système et détaille les différentes catégories ainsi que l'état d'avancement de chaque composant.
Mise en place de tokens primitif
Dans le cadre de notre design système, nous avons mis en place des tokens primitifs regroupant les couleurs, les radius, les espacements et les marges.
Suite à l'implémentation de cette palette, nous avons évalué son accessibilité à l'aide du plugin Contrast et attribué un score de contraste à chaque teinte.
❖  Prototype de test utilisateur :
Nous avons utilisé Figma pour créer un prototype haute fidélité qui reproduit fidèlement le parcours d'inscription. Les tests menés sur ce prototype visent à évaluer la compréhension du processus par l'utilisateur, ainsi que l'ergonomie et la fluidité de navigation, notamment au niveau du tableau de bord.
Test utilisateurs
❖  Les tests utilisateurs : les retours sur notre V0
Afin de mesurer la compréhension des utilisateurs et d'identifier les points d'amélioration de nos interfaces, nous avons élaboré ce protocole de test. Notre attention se portera principalement sur trois parcours clés : l'inscription d'un compte parent, l'inscription d'un enfant au transport scolaire et la navigation sur le tableau de bord.
À travers des questions ciblées et des observations directes, nous chercherons à recueillir des verbatims riches qui nous permettront d'affiner nos conceptions.
Les retours et recommandations : bilan des tests utilisateurs
Itérations
❖  Itérations : Optimiser l'expérience utilisateur suite aux tests
Les tests utilisateurs ont mis en évidence la nécessité d'affiner certains aspects de notre formulaire.
Revu la formulation des questions :
Pour faciliter la compréhension des parents, nous avons retravaillé le wording, les titres et ajouté des paragraphes d'introduction contextuels.
Redessiné l'étape "Itinéraire" :
Cette étape a été scindée en deux parties distinctes pour une saisie et une validation plus claires des données.
Intégré une étape dédiée au paiement :
En cohérence avec notre démarche globale, nous avons ajouté une étape de paiement, portant ainsi le nombre total d'étapes à quatre.
Enseignements du projet :
Apprentissage de l’application :
  1. Des grandes règles du design d’expériences utilisateurs (Bastien et Scapin, Jacob Nielsen)
  2. Ux writing
  3. D’architecture de l’information et de contenu (Gestalt,Opquast)
  4. et d’ergonomie