Concevoir un système embarqué à l’échelle industrielle

Contexte

Dans le cadre du lancement d’une nouvelle génération de véhicules hybrides et électriques, l’équipe design interne d’une marque automobile travaillait sur la conception d’un nouveau système embarqué.

Les premières réflexions UX avaient déjà été engagées : des premiers wireframes et flows existaient déjà. En revanche, aucun design system ni librairie de composants n’avaient été mis en place, rendant la déclinaison des wireframes et la production UI complexe et difficile à maintenir à l’échelle.

Le défi de ce projet était de structurer l’ensemble du système, d’harmoniser l’UX et de mettre en place un cadre design robuste pour favoriser la production de toutes les déclinaisons d’écrans, dans un contexte industriel fortement contraint.

Objectifs

Processus

1. Collaboration avec les équipes produit

   Présence hebdomadaire sur site pour les prises de brief, retours design et validations avec les leads de squad par feature. Constitution d’une équipe de designers pour prendre en charge la quantité de déclinaisons.

2. Structuration des workflows

   Analyse des flows existants. Organisation du travail par feature. Conseils sur l’optimisation de certains workflows grâce à notre vision globale du projet.

3. Création d’un design system / librairie

   Conception et gestion d’une librairie de composants sur Sketch. Définition des styles, grilles et composants réutilisables. Création de variantes UI.
Objectif : permettre aux équipes de décliner rapidement les interfaces tout en maintenant une cohérence visuelle et une UX homogène.

4. Déclinaison des écrans

   Concevoir et orchestrer les déclinaisons d’écrans afin de garantir une expérience cohérente. Adaptation des grilles et des layouts. Gestion des priorités fonctionnelles selon les formats d’écran.

Solution

La mise en place d’une librairie de composants centralisée a été un levier clé du projet. Elle a permis de structurer la production UI et de créer un socle commun pour l’ensemble des équipes design. Résultats :

• La production des déclinaisons a été considérablement accélérée

• Les écrans ont gagné en cohérence visuelle et fonctionnelle

• Le nombre d’erreurs a été réduit malgré la quantité de déclinaisons

Ce projet à grande échelle nous a aussi poussé à mettre en place Abstract, un outil de versioning pour Sketch basé sur un système de branches, inspiré de Git. Cela nous a permis de :

• Travailler en parallèle sur plusieurs features sans conflit

• Faciliter les reviews

• Améliorer la traçabilité des décisions

Une part importante du projet a consisté à décliner un grand volume d’écrans sur des formats verticaux et horizontaux selon les modèles de véhicules.

Chaque interface a été ajustée en fonction du type de véhicule, des fonctionnalités disponibles et des contraintes hardware propres à chaque gamme. L’enjeu était de garantir une expérience cohérente malgré les variantes.

En parallèle, nous avons produit et mis au propre une librairie d’icônes, ainsi que plusieurs animations destinées à enrichir certaines interactions.

Technique