McDonald’s
Type de projet : Design System
Collaborateurs :
- UI designer confirmé
- UX designer confirmé
Outils utilisés : Figma
Demande
Dans le cadre de la refonte complète des bornes de commande McDonald’s, l’objectif principal était d’optimiser les parcours utilisateurs et de moderniser l’interface. En collaboration étroite avec les équipes UI et UX, le projet a nécessité une adaptation fine aux contraintes techniques et physiques liées à un déploiement à grande échelle.
Mon intervention
J’ai accompagné l’équipe UI dans la phase de création du design system, un outil essentiel qui rassemble tous les composants graphiques et fonctionnels (boutons, typographies, couleurs, icônes, grilles, etc.) afin de garantir une cohérence visuelle et une efficacité dans la production de futures interfaces. Ce travail a permis de structurer l’écosystème digital de McDonald’s de manière durable et évolutive.
Les enjeux
La refonte des bornes de commande McDonald’s représentait un enjeu à la fois technique et organisationnel. À chaque évolution ou nouveau besoin, les équipes UI devaient recréer des composants graphiques en partant de zéro, sans base centralisée. Cela entraînait des variations visuelles selon les projets, une perte de temps significative, et une complexité croissante dans la gestion de la cohérence entre les différents supports digitaux (bornes, app mobile, site web).
Atomatisation des images et illustrations
Pour construire un design system solide et fonctionnel, il est essentiel de passer par certaines étapes clés. Lors de ce projet, j’ai eu l’opportunité de prendre en charge l’organisation et l’optimisation des images et illustrations qui allaient être intégrées sur les bornes McDonald’s. À partir d’une base de données fournie par le client, nous avons trié et classifié chaque visuel, qu’il s’agisse d’illustrations de produits, d’icônes ou de photos. L’objectif était d’identifier des groupes cohérents (burgers, menus, boissons, desserts, etc.) afin de poser des bases solides pour la création des composants UI.
Créations de composant
Une fois les visuels bien organisés, l’étape suivante consiste à créer des composants. Ces composants permettent aux UI designers de modifier rapidement les visuels au sein des templates grâce à un système de variantes. En catégorisant les visuels par type de produit, de packaging, de taille, ou encore par la présence de toppings, chaque composant devient modulable selon des critères bien définis. Dans certains cas, nous avons également intégré des toggles, par exemple pour gérer la présence ou non d’ombres sur les images. Ce travail rend la manipulation des visuels plus rapide, plus cohérente, et surtout adaptée aux besoins spécifiques de chaque interface.
Créations des TLC
Une fois tous les composants créés, nous passons à la mise en place des TLC, les Top Level Components. Ce sont des éléments structurants qui se retrouvent dans le back-office, une plateforme interne qui centralise toutes les ressources visuelles et fonctionnelles de la marque. En tant qu’UI designer, je réutilise régulièrement ces TLC pour construire des interfaces tout en respectant les règles du back-office. En quelques clics, je peux intégrer des blocs déjà pensés pour être cohérents, flexibles et prêts à l’emploi, ce qui fait gagner un temps précieux à toutes les équipes.
Avantages des TLC
La création de TLC représente un véritable gain de temps et de qualité dans la gestion d’un design system. Pour les chefs de projet, les développeurs ou les intégrateurs, c’est une garantie de cohérence et de fiabilité. Chaque TLC comprend toutes les déclinaisons nécessaires (desktop, mobile, nombre de slides, etc.) et définit les comportements attendus. Même si certains états ou éléments (comme certains types de CTA) ne sont pas toujours utilisés, leur présence dans les TLC évite les oublis, les erreurs, et surtout les allers-retours inutiles. C’est un vrai pont entre la création et l’intégration : tout est anticipé, documenté, et prêt à être utilisé de manière fiable.
