Uzer

Phase 1 : diagnostic design

‍

Afin de comprendre les enjeux du projet, nous avons réalisé différents workshops avec l’équipe de “Montri”. Nous avons dans un premier temps étudié une carte des acteurs et leurs liens avec les collectivités territoriales. Nous avons ensuite identifié les personae pour lesquelles la fonctionnalité était pertinente et avons pu réaliser leur journey map.

‍

Le diagnostic design comporte également un audit de l’application existante au travers de 4 axes: la navigation, les fonctionnalités, l’ergonomie et le graphisme. Grâce à cette étude, nous avons identifié les différents axes d’améliorations pour l’application. Nous les avons classés en 2 parties : une qui serait modifiable lors de l’implantation de TriAct, et l’autre non.

Notre challenge tout au long du projet fut d’implémenter la nouvelle fonctionnalité sans modifier ni la structure ni l’identité de l’application existante.

‍

Phase 2 : L'expérience utilisateur au travers de parcours

‍

Une fois les besoins bien identifiés, nous sommes passés dans la phase de définition où nous avons posé les principes UX de la fonctionnalité, notamment à l’aide d’une arborescence complète et détaillée de l’ensemble de l’application.


‍

L’objectif de cette phase était d’identifier les parcours ajoutés par la fonctionnalité TriAct sous forme de maquettes de principe.

Nous avons donc dans un premier temps étudié les parcours souhaités, en analysant si les étapes de chacun d’entre eux existaient déjà, devaient être modifiés, ou s’il fallait les créer. Dans un second temps, nous avons matérialisé ces analyses au travers d’écrans lo-fi pour chaque parcours. Nous pouvions visualiser pour chaque étape les modifications à apporter ou non.

‍

Phase 3 : Wireframes

‍

Grâce au travail de définition réalisé en amont, nous connaissions précisément les modifications à apporter pour chaque écran. Nous avons réalisé des wireframes hi-fidelity en suivant ces lignes directrices.

‍

Nous avons d’abord commencé par des exercices de zoning pour structurer les pages, puis nous avons poussé ces zonings en y rajoutant des principes d’Ux pour anticiper le contenu graphique.

Lors de cette phase nous avons défini des règles universelles pour l’application qui se basent sur le comportement des composants : par exemple la différenciation de listes cliquables par rapport à celles qui ne le sont pas.

‍

‍

Phase 4 : Ui et design system

‍

Une fois la phase d’itérations UX terminée, il ne nous restait plus que la dernière phase : l’UI. Un nouvel enjeu de taille s’est ouvert à nous : celui de s’adapter à la charte graphique existante de Montri. Celle-ci implique notamment que la charte puisse s’adapter à la couleur de chaque métropole.

Nous avons donc pris le parti d’avoir comme couleur d’action un gris foncé et que chaque métropole puisse décider de la couleur principale de son application.

Nous avons travaillé les différents composants en indiquant leur comportement : ils pouvaient soit prendre la couleur de la métropole, soit prendre la couleur de Montri, soit avoir une couleur invariable (feedbacks, actions et contenus texte)

‍

Design System

‍

Le projet s’est terminé par l’élaboration d’un design system complet afin d’accompagner les développeurs dans leur compréhension des différents composants.

‍