Repenser la commande pour les usages mobiles

Commander ne se fait pas nécessairement devant un écran. Le restaurateur consulte ses stocks, identifie ce qui manque et construit sa commande au fur et à mesure.

Le réseau, lui, n'est pas toujours disponible. La commande doit donc pouvoir être préparée sans connexion, sans perdre les informations saisies, puis être envoyée lorsque le réseau est retrouvé.

L'enjeu était de rendre cet état compréhensible à tout moment : ce qui a été enregistré, ce qui reste en attente et ce qui a effectivement été envoyé.

La commande peut être construite hors ligne et reste disponible jusqu'au retour de la connexion. La saisie et l'envoi sont volontairement traités comme deux actions distinctes, afin de donner à l'utilisateur un retour clair sur l'état de sa commande.

Le parcours de commande, la personnalisation des menus et le suivi ont été conçus pour permettre une saisie rapide et répétitive. Le travail UI a également porté sur les états, les cibles tactiles, la hiérarchie de l'information et les messages d'erreur, avec une attention particulière portée à l'accessibilité.

Un Design System Figma a été structuré pour garantir la cohérence des interfaces et fournir aux développeurs un cadre précis pour leur intégration.

Ce projet marque un changement de méthode : l'IA n'est plus utilisée uniquement pour explorer des idées, mais directement intégrée à la production.

Claude, connecté à Figma, a notamment été utilisé directement sur les fichiers de conception. Sur le Design System, cette connexion a permis de créer et structurer des pages, de gérer et corriger les variables, et d'intégrer la charte graphique dans le système.

L'IA a également servi de second regard sur les maquettes. Elle permettait de contrôler certains points d'accessibilité comme les contrastes, les tailles des cibles et la hiérarchie, et de vérifier certains usages liés aux conventions iOS et Android.

Pour les fonctionnalités complexes, elle a permis de prototyper rapidement différentes solutions afin de les confronter aux équipes UX et de développement avant d'aller plus loin dans la conception. Figma Make a également été utilisé pour explorer et prototyper certaines idées plus rapidement.

Explorer → produire → prototyper → contrôler → documenter

Chaque production générée a été relue, corrigée et validée manuellement. L'IA accélère le processus et facilite certaines vérifications, mais ne remplace pas les décisions de conception.

Une application pensée pour rester utilisable malgré les contraintes du terrain, avec un parcours de commande structuré autour de la saisie hors connexion et d'un suivi clair de son état.

Le projet a également permis de mettre en place un Design System et d'intégrer l'IA directement dans le workflow de conception, de la production des interfaces au prototypage, au contrôle et à la documentation.