Accor est un leader mondial de l'hôtellerie. Le groupe comprend des enseignes emblématiques telles que Sofitel, Novotel, ou encore Ibis. Dans un contexte de digitalisation croissante du secteur touristique, Accor a entrepris une transformation numérique majeure pour améliorer l'expérience client à travers tous les points de contact. Ce projet visait à refondre la plateforme de réservation en ligne du groupe, en la rendant plus intuitive, responsive et performante sur tous les appareils.
Réflexion.
Renforcer et développer le design-system
Contexte
Mars 2020 : Accor venait de lancer son programme de fidélité "Accor Live Limitless" (ALL). Cette initiative stratégique visait à transformer l'expérience client en offrant un écosystème digital complet, dépassant la simple réservation d'hôtel. L'objectif était de créer une plateforme lifestyle intégrée, alliant réservations, services personnalisés et récompenses pour les clients fidèles.
Cette refonte s'inscrivait dans l'ambition d'Accor de devenir un acteur majeur de l'hospitalité augmentée, répondant ainsi aux évolutions du marché et aux attentes croissantes des voyageurs en matière d'expériences digitales fluides et personnalisées. Ce projet représentait un défi technique et créatif considérable, nécessitant une refonte complète des interfaces utilisateurs et des systèmes back-end pour concrétiser cette nouvelle vision de l'hôtellerie connectée.
Dans ce contexte de transformation numérique majeure, la mise en place d'un design system était cruciale pour assurer une cohérence visuelle et fonctionnelle à travers toutes les interfaces utilisateurs. Ce système facilitait ainsi le développement rapide et l'évolution harmonieuse de l'écosystème digital d'Accor. Lilian Chapellon, Head Of Design, et Jean-Christophe Besson, Lead Design-System, s'étaient attelés à cette tâche dès la conception de ce programme. Ils avaient maintenant besoin de renfort pour continuer à le développer et l'implémenter sur tous les différents produits.
Mon rôle
J'ai donc rejoint l'équipe design en tant qu'UI Designer, en charge du design system, aux côtés de Jean-Christophe (JC). Nous nous sommes partagé les périmètres à deux : JC poursuivait le site web qu'il avait mis en place, et j'ai amorcé le travail sur les applications mobiles iOS et Android.
Process.
Pont entre équipes design et équipes produits
Organisation
L'organisation d'Accor reposait sur des "feature teams" autonomes, chacune pilotée par un lead product designer accompagné parfois d'autres designers selon l'ampleur du périmètre. Un Product Owner assurait la coordination entre les pôles stratégie, design et développement au sein de chaque équipe.
Mon rôle se situait au carrefour de ces différentes équipes. Je devais créer des ponts entre les designers travaillant sur leurs features respectives et les équipes de développement mobile, tout en gardant en ligne de mire les objectifs stratégiques du groupe. Cette position centrale m'a amené à mettre en place des process et des outils facilitant à la fois le travail créatif des designers et l'implémentation technique par les développeurs.
Concrètement, je veillais à ce que les fondations et chaque composant du design system mobile soit documenté de manière claire, qu'il réponde aux besoins réels des feature teams, et qu'il soit techniquement implémentable dans les délais impartis. Cette approche transversale permettait d'accélérer la production tout en garantissant une expérience utilisateur cohérente à travers toutes les applications mobiles d'Accor, ainsi qu'avec le site web.
Conception technique et cohérence multi-plateformes
Mon rôle principal consistait à construire les composants dans Figma en exploitant au maximum les fonctionnalités avancées de l'outil pour se rapprocher le plus possible de la réalité du code. Les variants et l'auto-layout sont devenus mes meilleurs alliés durant cette période.
L'enjeu était double : designer une interface cohérente avec le branding Accor tout en respectant scrupuleusement les guidelines de chaque OS pour ne pas bousculer les habitudes de nos utilisateurs. iOS et Android possèdent chacun de nombreux composants natifs que nous avons intégrés et harmonisés avec nos propres composants custom.
C'est là que la documentation prenait toute son importance, car chaque OS a ses bonnes pratiques ainsi que sa propre nomenclature. Avec JC, nous passions beaucoup de temps à brainstormer ensemble pour trouver les meilleurs équilibres et concevoir un système à la fois cohérent et efficient pour tous.
Accompagnement des équipes produit et développement
J'accompagnais également les product designers et développeurs sur la partie UI de manière générale. Dès le début des projets, nous nous alignions collectivement sur les composants existants à utiliser ou modifier, nous cherchions dans les guidelines OS si certains éléments natifs pouvaient être incorporés dans notre système, puis les product designers démarraient leur travail avec déjà une base solide.
J'intervenais ensuite selon les besoins des designers dans leur conception et nous itérions ainsi pour adapter notre système aux nouvelles pages à concevoir. Côté développement, une fois les maquettes validées collectivement, j'intervenais également selon les problématiques rencontrées et faisais le lien avec les designers si nous devions itérer sur un élément.
Travail de fond sur les fondations
Parallèlement, il y avait tout le travail de fond sur le système : améliorer ce que nous appelions les fondations, affiner la nomenclature, définir les bonnes pratiques à adopter, avec notamment la mise en place de design tokens. Retrouvez d'ailleurs mon article sur le travail de nomenclature ici.
À ce moment-là, Figma venait tout juste d'implémenter la possibilité de créer des variables. Nous avons expérimenté des process avec Specify qui commençait à émerger — un outil permettant d'automatiser la gestion de tous nos design tokens entre Figma et le code. Malheureusement, les résultats n'ont pas été concluants à ce stade car nous n'étions pas encore assez matures sur l'ensemble de notre stack technique.
Formations et évangélisation
J'ai également pu intervenir auprès de différentes équipes pour leur présenter le fonctionnement de notre design system, mais aussi pour animer des sessions sur l'utilisation de Figma, notamment des formations spécifiquement pensées pour les développeurs afin de faciliter leur prise en main de l'outil et améliorer la collaboration design-dev.
Rapide revue technique
- Figma
- Storybook
- Web : Vue.js
- iOS : Swift natif
- Android : Java natif
Rétrospective.
Retour et leçons apprises.
Ce que j'ai appris
Cette expérience m'a permis d'appréhender la gestion d'un design system à l'échelle d'un grand compte avec de grandes équipes design et développement. Plus les équipes sont nombreuses et les produits diversifiés, plus le système devient primordial pour assurer une cohérence globale et des process communs permettant de gagner en efficacité.
J'ai pu expérimenter cette gestion multi-produits en recherchant les meilleurs équilibres entre l'identité visuelle d'Accor, les guidelines natives d'iOS et Android d'un côté, et les bonnes pratiques web avec JC de l'autre. Trouver ce juste milieu — préserver la marque tout en respectant les standards de chaque plateforme — constitue l'essence même d'un design system réussi.
Suite
Comme tout design system vivant, celui d'Accor continue d'évoluer pour répondre aux besoins changeants de l'écosystème digital du groupe. La prochaine étape consistait à automatiser la gestion des fondations, notamment par l'implémentation de design tokens permettant une synchronisation plus fluide entre les équipes design et développement. Cette automatisation devait faciliter la maintenance et garantir une cohérence encore plus rigoureuse à travers toutes les plateformes.
Parallèlement, le travail de création et d'enrichissement des composants se poursuivait, alimenté par les retours terrain des feature teams et l'évolution des besoins produit. Cette démarche itérative et collaborative assurait que le design system reste un outil au service de l'innovation et de l'excellence de l'expérience utilisateur chez Accor.
Kevin Bizien
Designer UI & Développeur Créatif
Tu souhaites me parler de ton projet web ? Contactes-moi à l'adresse bonjour@kevinbizien.com et échangeons dès maintenant !