Un UI kit pour tester et construire la messagerie pro d’Orange
User test
UI kit
UX/UI
Challenge : Faire du prototype un moteur d’innovation
Dans le cadre de la refonte de sa messagerie professionnelle, Orange souhaitait proposer une expérience moderne, cohérente et testable rapidement. L’enjeu était de rester aligné avec le design system global d’Orange, tout en permettant aux équipes produit et design de travailler avec agilité.
Cependant, certaines contraintes ont vite émergé : les composants hérités étaient peu flexibles, les templates rigides, et la collaboration entre les équipes internes et l’agence pâtissait d’un manque d’outillage commun. Il devenait difficile d’itérer rapidement, de tester efficacement, et de s’aligner sur les décisions d’interface.
Solution : Un UI kit modulaire pour tester, itérer, documenter
Nous avons conçu un UI kit sur mesure, en nous appuyant sur les fondations graphiques d’Orange, mais en le rendant plus modulaire et flexible pour les besoins du projet.
Objectif : permettre à chaque designer (interne ou agence) de travailler rapidement, tester différentes variantes de parcours, puis mettre à jour les composants au fil des retours.
Le tout avec une structure claire (atomes, modules, templates), une documentation accessible directement sur Figma, et des liens renforcés entre design, prototype et version développée.
Itération rapide & base commune
L’UI kit avait pour but de servir concrètement les équipes projet. Il a donc été conçu comme une base modulaire et réutilisable, pensée pour fonctionner en cycles courts, et avec un haut niveau de traçabilité.
Chaque prototype construit à partir du kit pouvait être :
facilement dupliqué et adapté selon le scénario testé
archivé une fois testé, pour garder une trace de l’évolution
mis à jour directement via les composants source
Les retours issus des tests étaient analysés et, lorsqu’ils impliquaient des changements d’interface, donnaient lieu à une mise à jour du kit. Les spécifications étaient centralisées dans Figma, au plus près des composants, facilitant l’alignement des designers et des développeurs.
Résultat : un outil réellement vivant, évolutif, et connecté au terrain.
Tester pour mieux innover
Chez Attoma, nous avions l’habitude de structurer les tests utilisateurs en suivant une méthodologie rigoureuse, mêlant qualité de l’écoute et rapidité d’exécution.
1. Préparation
Rédaction d’un scénario de test reprenant plusieurs parcours types
Définition d’hypothèses à valider ou d’interfaces à comparer
Recrutement d’utilisateurs représentatifs (profils pro ciblés par la messagerie)
2. Construction des prototypes
Création des prototypes directement à partir du UI kit dans Figma
Utilisation d’instances de composants pour varier les versions sans repartir de zéro
Mise en place de liens de navigation réalistes, parfois sur plusieurs niveaux de parcours
3. Passation des tests
Animation des entretiens en agence ou à distance
Enregistrement vidéo, observation des blocages, verbatims
Notation des retours selon leur criticité (bloquant, gênant, fluide)
4. Analyse et boucle de feedback
Archivage du prototype testé
Analyse croisée des retours avec l’équipe produit
Intégration des enseignements dans les composants ou parcours concernés
Impact
Le projet a transformé la dynamique entre les équipes :
5 tests utilisateurs réalisés en un trimestre (contre 1 auparavant)
Une base claire pour itérer efficacement sans repartir de zéro
Une communication plus fluide entre agence et client
Une meilleure appropriation du design par les développeurs
Des coûts de développement réduits grâce à la cohérence et à la réutilisabilité
En créant un outil réellement adapté à ses utilisateurs (les designers eux-mêmes), ce projet a prouvé qu’un bon UI kit peut devenir un levier stratégique pour accélérer la conception et améliorer la qualité des produits.
Credits
Mon rôle
Conception et structuration d’un UI kit modulaire sur Figma, prototypage des parcours, organisation et conduite des tests utilisateurs, analyse des retours, itérations post-tests, documentation des composants, et coordination entre les équipes design et développement.
l'équipe
3x UX UI côté agence
1x PO
équipe complète de développement
2x UX UI côté orange
outils
Figma
Jira
Airtable
Date / durée
2021 - 2022
