Astuce

Réseau du transport

UX Étude de cas

Image d'un ordinateur affichant l'accueil du site Réseau du transport ASTUC

Projet

Redesign du site du Réseau de transport Astuce
Métropole Rouen Normandie

Image d'un ordinateur portable affichant l'accueil du site

Le Challenge

  • Le manque de data sur l’utilisation du produit a compliqué l’identification des aspects à améliorer
  • Les composants métier étaient limités dans leur capacité à recevoir des paramètres, nécessitant une approche créative pour les adapter à nos besoins

L’équipe

L’équipe chez mon client :

  • 1 Chef de projet
  • 1 Product designer
  • 1 Designer junior
  • 1 Business analyst
  • 6 Développeurs

Mon rôle

  • Product Designer (UX / UI Designer)
  • Facilitateur
  • Mentoring d’un designer junior

Objectifs

  • Créer une version cible user friendly.
  • Créer une version intermédiaire qui s’aligne avec les contraintes techniques.
  • Mentorer le designer junior.
  • Évangéliser l’expérience utilisateur.

Design Process

Étape 1

Version cible

Représentation de la démarche utilisée pour obtenir le produit cible

Étape 2

Version intermediaire

Représentation de la démarche utilisée pour obtenir la version intermédiaire du produit

Le résultat

Version desktop

La version cible

Un ordinateur affichant l'accueil du site Réseau du transport ASTUCE
Un ordinateur affichant un article éditorial du site Réseau du transport ASTUCE
Un ordinateur affichant un article éditorial du site Réseau du transport ASTUCE

Version responsive

La version cible

Portable affichant l'accueil du site Réseau du transport ASTUCE en version responsive
Portable affichant le menu du site Réseau du transport ASTUCE en version responsive
Portable affichant des articles éditoriaux en version responsive

Design Process

La version cible

L’analyse de l’existant

Audit de l’ergonomie et de l’accessiblité

Commencer par l’audit nous a offert un aperçu des points à améliorer en termes d’ergonomie et d’accessibilité, tout en élargissant notre compréhension des défis existants.

La représentation d'une grille d'évaluation

Une page de la grille d’évaluation utilisée

Simulation d'un prototype en wireframe

Simulation du Prototype de Navigation

Zoning

Nos premières hypothèses

L’audit nous a fourni les informations nécessaires pour mieux modéliser le zoning et comprendre les réactions des utilisateurs lors des ateliers avenir.

Les ateliers

Atelier d’analyse de l’existant pour l’amélioration

Les utilisateurs ont accompli des tâches spécifiques dans notre produit, partageant ensuite ce qu’ils ont apprécié et moins apprécié. Ces retours directs et précieux sont essentiels pour améliorer leur expérience.

Une partie d'un board collaboratif utilisé pendant un atelier UX

Board de travail collaboratif

Wireframe de la page d'accueil

Wireframe homepage

Le prototype

Solutions Prototype basées sur l’Analyse de l’existant

Après avoir analysé les résultats des ateliers et des audits, nous avions une meilleure compréhension de la façon dont les utilisateurs interagissaient avec les différents éléments.

C’était alors le moment de créer des wireframes et de tester nos hypothèses sur l’intuitivité du produit

La version intermédiaire

Le compromis

Entre la techno et les besoins utilisateur

A ce stade, les premiers tests ont confirmé mes hypothèses et ont conduit à la proposition d’une version intermédiaire tenant compte des limitations techniques.

On a testé la version intermediarie et bien que les fonctionnalités soient présentes, les utilisateurs ont rencontré une efficacité moindre lors de l’accomplissement des tâches.

Des comptes rendus détaillés et des restitutions accompagnées de recommandations, ont été fournis au client.

Capture d'écran affichant des résultats de tests avec 100% de réussite

Des résultats du test de la version intermédiaire

Optimisation de la conception

Le design system

De l’accessibilité et de la cohérence

J’ai créé un design system pour maintenir la cohérence du produit.

C’était la solution pour :

  • Faciliter l’utilisation des éléments de conception par l’ensemble de l’équipe
  • Permettre une collaboration fluide
  • Offrir un accès simplifié et réaliste aux développeurs
  • Accélérer le processus de création de maquettes.
Palette de couleur générée sur les couleurs de base fournis par le client

Couleurs

Les typographies utilisées

Boutons

Les boutons tuiles

Consolidation de liens dans l’équipe

L’évalgélisation de l’UX

La Clé de l’évolution Collective

On a programmé des réunions hebdomadaires pour présenter l’avancement du design process et valider la faisabilité technique.

Nous avons saisi l’occasion de ces réunions pour présenter les résultats de nos ateliers à l’équipe.

Ces rencontres ont été propices à la consolidation des liens au sein de l’équipe, à l’amélioration de la communication et à la sensibilisation de chacun à l’importance de l’expérience utilisateur.

Mentorer le designer junior

De la pédagogie expérientielle

Une approche immersive

Pour mentorer le designer junior, je l’ai impliqué tout au long du processus en lui confiant diverses tâches qui ont renforcé sa compréhension du design process.

La pédagogie expérientielle a pleinement démontré son efficacité.

Ce qu’il faut retenir

Tester le plus tôt possible

Pour agir plus vite

Le principal avantage de tester plus tôt les premières wireframes est de valider rapidement les hypothèses et de poursuivre dans la bonne direction ou, à l’inverse, de reconnaître que l’on ne va pas dans la bonne direction et d’agir au plus vite avant de créer le prototype.

Fixer l’évangélisation comme objectif apporte une dimension pédagogique, qui crée des liens et améliore la communication entre les membres de l’équipe.

Le produit est en cours de developpement et devrait être disponible dans les mois à venir

Un grand merci à tous les participants.