Configurateur utilitaire PSA
Création, optimisation des configurateurs des véhicules utilitaires des marques Peugeot et Citroën
PSA
Client
Sketch / Zeplin / Abobe XD / JIRA
Détails
-
À la suite de l'adoption d'une nouvelle charte graphique pour les marques Peugeot et Citröen, nous avons entrepris une refonte des sites dédiés à leurs véhicules utilitaires.
-
Nous avons dû adapter la nouvelle charte graphique destinée à l'impression au contexte des écrans web, en tenant compte des impératifs du responsive design. Nous avons également développé un Kit UI pour assurer une cohérence visuelle sur l'ensemble des interfaces. Pour faciliter la communication et la collaboration, nous avons mis en place des mécanismes efficaces de dialogue avec les deux équipes, en tenant compte des spécificités de chaque marque et de leur environnement respectif.
Ensuite, réaliser une recherche approfondie auprès des utilisateurs pour identifier les enjeux réels et les difficultés liées à la configuration d’un véhicule professionnel.
-
L'adaptation de la charte graphique et le développement du kit UI pour les deux marques ont conduit à plusieurs résultats positifs :
Cohérence visuelle renforcée : L'utilisation du kit UI a assuré une uniformité sur toutes les interfaces des différentes marques, améliorant ainsi leur identité visuelle respective et facilitant la navigation pour les utilisateurs.
Optimisation pour le responsive design : L'adaptation de la charte graphique au contexte des écrans web a permis une expérience utilisateur fluide, quelle que soit la taille de l'écran, augmentant ainsi l'accessibilité et l'engagement des utilisateurs pour chaque marque.
Amélioration de la collaboration inter-marques : Les mécanismes de dialogue mis en place ont favorisé une communication efficace entre les équipes, permettant de prendre en compte les spécificités de chaque marque tout en alignant les objectifs communs.
Gain de temps dans le processus de conception : Une meilleure organisation et une communication fluide ont permis de réduire le temps consacré aux révisions et aux ajustements, accélérant ainsi le développement des projets pour l'ensemble des marques.
Ces résultats ont non seulement contribué à une expérience utilisateur de qualité, mais ont également renforcé l'efficacité des équipes travaillant sur des marques multiples.
Méthodologie
-
Mise en place de sondages, études qualitatives et quantitatives
Atelier de co-création avec les métiers
Création de parcours utilisateurs
Réalisation de wireframes (Mid-FI)
Tests utilisateurs
Protypage (Adobe XD ou Invision)
-
Création d'écrans responsives
Inclure tous les CAS (cas erreur, conditions...)
Création de nouvelles fonctionnalités
Mise en conformité avec les normes d’accessibilité RGAA
Création de Kit UI pour les deux marques
Conception
Processus de création des wireframes
Réalisation des parcours en fonction des jobs to be done
Réalisation des wireframes Mid-Fi
Réalisation de prototypes simples visant à tester les nouvelles interfaces
Ce wireframe représente la première étape de configuration du véhicule sélectionné par l'utilisateur. Avant l'ajout au panier, sept étapes sont nécessaires pour configurer le véhicule. L'enjeu consiste à rendre toutes les informations et options disponibles lisibles et compréhensibles, tout en offrant une interface utilisateur à la fois attrayante et interactive.