Euro UI TV design system
Uniformiser et modulariser l’expérience TV pour chaque pays d’Europe du groupe Orange
ClientOrange XD LabAnnée2022 - 2024ObjectifsMise en place et évolution du design system TV Euro UIMon rôleGestion de composants - Edition de documentsOutils utilisésFigma - After Effects
System de composants construit surle principe de l'Atomic Design
Objectifs
Les objectifs de ce système sont nombreux :
- Réduction des couts de développement en proposant une plateforme unifiée.
- Unification des principes de navigations et de l’UI pour une cohérence autour de la marque Orange.
- Mise en place en place d’un système modulaire, pouvant s’adapter au besoin d’un pays et à leur parcours utilisateur.
- Proposer à l’utilisateur la navigation la plus rapide, efficace et confortable.
Anatomie d'un fichier
Processus de travail
Pour atteindre ces objectifs, nous avons mis en place plusieurs axes de travail :
Recherche et besoins utilisateurs
Sur la base de recherches ethnographiques et d’interviews utilisateurs effectués sur plusieurs pays, nous avons rédigé et édité une étude comportementale sur les besoins et modes de consommation des contenus de divertissement.
Nous avons ensuite travaillé en concertation avec les équipes TV de plusieurs pays afin de recueillir les parcours actuels ainsi que leur vision et connaissances de leurs utilisateurs.
Benchmarking
Nous avons également documenté un état des lieux des pratiques des interfaces actuelles utilisées dans le divertissement pour distribuer du contenu. Et ce sur plusieurs plateformes, devices et pays.
Maquettes et parcours
Sur la base de ces connaissances, nous avons travaillé sur un système de parcours et de composants modulaires pouvant être adaptés et utilisés pour chaque besoin pays.
Documentation et spécifications
Pour rendre ces travaux accessibles, nous avons documenté et mis en ligne un site permettant de prendre connaissance de ces principes interactifs et de navigation.
Consulter le site
Bibliothèque de composants sous Figma
Nous avons également travaillé et mis en ligne des bibliothèques FIGMA à l’attention des développeurs et personnes en internes souhaitant construire et tester des parcours utilisateurs.
Cette bibliothèques couvraient les besoins UI et proposait des templates définis pouvant être modulés grâce à la méthode Atomic Design de Brad Frost.
Nous avons également documenté l’aspect Cinetic et motion à l’aide d’une bibliothèque dédiée.
