Product Designer UX · UI

Sitemap

Etablir le plan actuel du site et de son contenu nous a permis d’identifier plus facilement la structure et les éléments composant les sections.

User Stories

Réalisation de scénariis selon les actions à mener pour une opération permettant pour chaque cas d’usage, de nous assurer que tous les éléments sont bien présents et forment un ensemble cohérent.

Storymap

Lister avec le scrum master, les besoins en fonctionnalités de chaque étape des opérations, ce qui nous permettra de définir les priorités et valider les fonctionnalités.

Wireframes

J’ai réorganisé les éléments afin de simplifier la présentation des informations de l’interface puis idéalisé par itérations les premières solutions par des moyens ergonomiques de présenter les fonctionnalités.

Design system

La contrainte fut de devoir adapter une charte issue initialement du Print (en CMJN), j’ai ainsi réorienté l’ensemble de la charte présente vers des couleurs web accessibles équivalentes puis nous avons décliné les différents éléments.

Livrables

Les différentes informations sont disponibles depuis une page unique condensant le contenu et les liens/fonctions afin d’éviter un grand nombre de sous-niveaux et aussi de permettre une visualisation rapide.
L’interface permet ainsi à l’utilisateur de consulter des offres de formations adaptées et de pouvoir accéder facilement au suivi de son dossier personnel.
L'interface fut réalisée de façon responsive pour répondre aux besoins sous format mobile ou desktop tout en ayant pu répondre aux attentes de fonctionnalités demandées.

• ✔︎ Contenu personnalisé selon le profil
• ✔︎ Enrichissement de fonctionnalités
• ✔︎ + de satisfaction
• ✔︎ + de fidélisation
• ✔︎ - de temps de process administratif

User Research

Il ne fut pas possible de questionner ou observer directement les utilisateurs (clients) durant leurs action pour des raisons de dérangement dans une phase business. 
Les informations pour créer les Personas, les Empathy Map et Journey Map furent ainsi récupérées par questionnements directs ou indirects auprès des différents intervenants en relations avec le sujet (Support, PO, Marketing, Agences).

Design system

Nous avons décidé, avec la validation des développeurs, de travailler sur la charte selon la méthodologie Atomic design afin de réduire les impactes et mieux distribuer les modifications éventuelles sur l’ensemble des éléments pour la pérennité des applications.
Utilisation de Font Awesome pour la partie icons et de Boostrap pour faciliter l’intégration et la structure. 
J’ai mis en place un ensemble de couleurs respectant la charte graphique actuelle du groupe et respectant des normes RGA. Les différents éléments nécessaires ont été listés, adaptés et j’ai fais mettre en place une bibliothèque partagée des différents types d’objets (Atomic) pour les développeurs afin d’avoir un référentiel et réduire leur charge de travail grace à une solution durable et facile à mettre à jour.

Accessibilité et éco-conception

Dans le but d’optimiser l’accessibilité visuelle, j’ai appliqué la norme RGAA dans la mesure du possible en essayant de garder les couleurs de la charte de la marque.
La première étape fut ainsi de tester et corriger les couleurs présentes, définir un ensemble de couleurs représentatives de l’identité et fondamentales puis une revue ergonomique des éléments fonctionnels. 
La restructuration sémantique du CSS/Html, l’optimisation des ressources et des requêtes nous a permis de baisser considérablement la charge logicielle.

Livrables

Les différentes sections furent construites de façon modulaires et se sont intègrées facilement au fil des parcours dynamiques.
Elles ont été repensées en fonction des besoins pour être simplifiées puis visuellement distinctes pour faciliter la lisibilité.
L’homégéisation entre la partie expérience et graphique permet de garder une facilité de navigation et d’utilisabilité des différentes applications aussi bien du coté client que métier, ainsi par la suite, nous avons décliné la structure et la méthodologie sur les autres applications internes / métiers pour obtenir une expérience de navigation et une charte graphique homogène.

• ✔︎ Ergonomie générale améliorée
• ✔︎ Design system structuré réduisant le temps de production
• ✔︎ Meilleure adoption interne
• ✔︎ Gain sur la rapidité d’affichage et l’accès aux ressources
• ✔︎ Taux de satisfaction très positif

Wireframes

Nous avons commencé par trier, réunir et organiser les informations par écrans puis réalisé un début de structure.
Cela permet de détecter les points à améliorer, de valoriser les points forts, et de commencer à se projeter dans les évolutions envisagées. Nous avons ainsi validé de façon itérative chaque étape d’avancement, au travers de validations de l’équipe projet.

Maquettes

Création des écrans et interactions dynamiques puis tests / validations avec les responsables du projet selon le cahier des charges.

Livrables

L’application rassemble les fonctionalités nécessaire pour consulter les informations du dossier de l’utilisateur ainsi que les moyens de communication avec les interlocuteurs de la société de logement.

• ✔︎ Contenu clair et navigation simplifiée
• ✔︎ + d’autonomie des locataires
• ✔︎ - de sollicitations du support
• ✔︎ Une meilleure satisfaction