Toast
Un menu, chaque support du restaurant
Les menus de restaurant sont désordonnés, profondément imbriqués et changent sans cesse. Un même article doit apparaître correctement partout où il est commandé, préparé, imprimé et retiré : sur la caisse, le terminal portable, l'écran cuisine, la borne, le ticket, l'application et chez le partenaire de livraison. J'ai dirigé la refonte complète de la façon dont les restaurants construisent et gèrent leurs menus, ainsi qu'un design sprint qui a repensé le moment du retrait lui-même.
Toast est la plateforme tout-en-un qui gère la caisse, la commande en ligne et les opérations de dizaines de milliers de restaurants.
Un menu de restaurant est plus complexe qu'il n'y paraît. Un seul article définit sa cuisson, ses accompagnements et les substitutions courantes comme sans oignons, un steak végétal ou un pain sans gluten. Son prix bouge aussi : tarifs happy hour selon l'heure, prix différents par établissement dans une chaîne, prix distincts par taille. Et les menus imbriquent tout cela : les menus contiennent des groupes, les groupes des articles, les articles des modificateurs.
J'ai dirigé le design d'un éditeur de menus qui rend cette structure lisible et modifiable en un seul endroit, puis garde chaque support synchronisé depuis une source unique : la caisse et le terminal portable Toast Go, l'écran cuisine (KDS) et les tickets imprimés, la borne, la commande en ligne sur le web et l'application Toast Takeout. Il assure aussi la correspondance avec les partenaires de livraison comme Uber Eats et DoorDash.
- L'UX de bout en bout de la gestion des menus
- La recherche terrain en restaurant avec les exploitants
- L'aperçu multi-supports avant publication
- L'architecture de l'information des menus imbriqués
- Un design sprint sur l'expérience de retrait, livré et devenu un brevet en instance
- Des concepts pour une configuration de menu plus rapide
Un cheeseburger, huit pages différentes
Dans l'outil d'origine, la gestion des menus était un tableau de bord de destinations séparées : Menus, Open Items, Item Tags, Price Levels, Pre Modifiers, Advanced Properties, Price Editor, Items Database. Ajouter un cheeseburger, avec sa cuisson, ses accompagnements et ses substitutions, supposait de savoir quelle page faisait quoi et de ressaisir la même chose sur plusieurs d'entre elles.
Recherche sur place, avec les PM et les ingénieurs
J'ai mené la recherche sur place en restaurant avec mes product managers et ingénieurs, en observant de vrais clients récupérer leurs commandes dans un restaurant en activité. Emmener toute l'équipe sur le terrain, c'était faire voir aux personnes qui construisent le produit les mêmes frictions que moi, si bien que les constats sont devenus des priorités partagées plutôt qu'une passation.
Nous avons testé un flux en quatre colonnes et une arborescence
Nous avons exploré plusieurs concepts pour naviguer dans un menu profondément imbriqué. L'un gardait menus, groupes, articles et modificateurs côte à côte dans un flux en quatre colonnes. Un autre associait une arborescence du menu à gauche aux sections article, groupe de modificateurs et modificateur empilées en dessous. Les tester tous deux avec des exploitants a montré où chacun aidait, et le design final a retenu les parties les plus claires de chacun.
Les menus contiennent des groupes, les groupes des articles, les articles des modificateurs
- 1Les groupes et sous-groupes organisent les articles dans la structure que parcourent les clients.
- 2Un groupe de modificateurs peut s'attacher à un groupe, un sous-groupe ou un seul article.
- 3On définit un groupe de modificateurs une fois, puis on l'attache partout où il s'applique.
- 4Un modificateur peut porter son propre groupe de modificateurs imbriqué.
- 5Un modificateur renvoie à une définition partagée, si bien que la sauce César est comptée comme une seule chose sur tous les menus et établissements.
Un article, construit une fois, juste partout
Suivez une seule commande à travers le restaurant. Un cheeseburger, cuit à point, sans oignons, avec des frites de patate douce, est construit une fois dans l'éditeur de menus. De là, il doit apparaître correctement sur la caisse du serveur, sur le terminal portable à table, sur l'écran cuisine où la brigade le prépare, sur le ticket imprimé, sur la borne, dans la commande en ligne et l'application Toast Takeout, et chez Uber Eats et DoorDash. Chacun de ces supports a des utilisateurs différents, des tailles d'écran différentes et des moments de pression différents, de l'hôte à l'entrée au cuisinier en plein coup de feu. Le rôle de l'éditeur de menus était qu'un seul changement les atteigne tous, correctement, en même temps.
Voir le changement sur le terminal avant le personnel
Publier un menu relevait de l'acte de foi. Nous avons ajouté un aperçu intégré qui affiche le menu modifié exactement tel qu'il apparaît sur la caisse, en cuisine, dans la commande en ligne et dans Toast Takeout, pour qu'un exploitant repère un article mal placé ou un mauvais prix avant qu'il n'atteigne un serveur en plein service.
Retrouver sa commande sans révéler qui l'on est
Le retrait ne fonctionnait plus dans les restaurants très fréquentés. Avec l'essor de la commande en ligne via Toast et l'application Toast Takeout, les clients s'entassaient dans la salle en attendant leur repas, puis cherchaient leur sac parmi des étagères de sacs identiques, mobilisant le personnel pour les aider. Pour qu'on retrouve les commandes, la plupart des restaurants scotchaient le ticket sur le sac, ce qui affichait le nom complet et le numéro de portable de chaque client aux yeux de tous.
Une partie de la foule venait d'un problème de timing. La plupart des restaurants annonçaient un seul délai de préparation par défaut pour toutes les commandes, le même pour une limonade que pour un traiteur, si bien que les clients arrivaient en avance et attendaient.
En tant que lead designer, j'ai mené un design sprint pluridisciplinaire avec l'ingénierie et le produit pour régler tout le moment du retrait : quand les clients arrivent, comment ils trouvent leur commande et ce que l'étagère révèle d'eux.
Nous avons amélioré les notifications de retrait pour que les clients calent leur arrivée sur leur commande plutôt que sur une estimation, ce qui a réduit la foule qui attendait à l'intérieur.
Pour l'étagère, nous avons donné à chaque commande un emoji, imprimé en grand en haut du ticket, et retiré le numéro de téléphone. Une baleine se repère plus facilement qu'un nom sur une étagère encombrée, s'annonce facilement au-dessus d'un comptoir bruyant et ne signifie rien pour qui elle n'appartient pas. L'idée traversait tout le service : le parcours de commande, la notification, l'imprimante à tickets, le sac sur l'étagère et la remise. Elle a été déployée dans des restaurants Toast et a donné lieu à un brevet en instance, dont je suis l'un des inventeurs.
« Une baleine se repère plus facilement qu'un nom sur une étagère encombrée. »
Pointer un appareil photo sur le menu imprimé
La partie la plus lente de l'intégration d'un restaurant est la première saisie de son menu. J'ai exploré un concept, Toast Lens, qui permet à un exploitant de scanner un menu imprimé et de le transformer en brouillon structuré, pour que l'éditeur démarre de quelque chose de réel plutôt que d'un écran vide. Il a mis à l'épreuve jusqu'où nous pouvions réduire l'écart entre un menu papier et un menu en vente.
Un seul modèle, porté par toutes les équipes
La difficulté de la gestion des menus n'est pas un écran en particulier. C'est de s'accorder sur un seul modèle de données auquel le back-office, la caisse, la commande en ligne et la cuisine font tous confiance. En tant que contributeur individuel le plus senior de l'équipe design avant l'entrée en bourse, j'ai travaillé étroitement avec l'ingénierie et les PM pour maintenir cette structure commune stable, pendant que chaque support la restituait de la façon dont ses utilisateurs en avaient besoin.
Ancrer les décisions dans la recherche terrain a gardé ces débats attachés à la façon dont les restaurants fonctionnent vraiment, pas à la forme de l'organigramme.
Jess vient de partager le travail UX sur les menus, et c'est formidable de voir tout l'effort investi. Il semble que nous ayons très bien défini le problème, et c'est formidable de voir les différents wireframes et les tests clients nous aider à trouver les designs optimaux.
Un seul menu, fiable sur tous les supports
L'éditeur de menus est sorti comme la source unique derrière chaque support Toast : la caisse et les terminaux portables, l'écran cuisine, la borne, la commande en ligne et Toast Takeout, avec correspondance vers les partenaires de livraison. Un restaurant construit son menu une fois et s'y fie partout où il est vendu, sans ressaisie entre systèmes. Le travail sur le retrait est sorti en parallèle, offrant aux clients une heure d'arrivée plus claire et une façon discrète de retrouver leur commande. Le tout est sorti alors que Toast grandissait vers son entrée en bourse de 2021, en gérant la caisse et les opérations de dizaines de milliers de restaurants.