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.

Ecrans

Suivant
Suivant

Agirc-Arrco CRM Entreprise