Projets choisis
Étude de cas · Outils pour la restauration

Toast

Les menus de restaurant sont désordonnés, profondément imbriqués et changent sans cesse, et un même article doit apparaître correctement partout où il est commandé et préparé. Ce projet était une refonte complète de la façon dont les restaurants construisent et gèrent leurs menus.

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.

Rôle
Lead Product Designer
Périmètre
Design produit · Architecture de l'information · Recherche terrain · Design multi-supports
Entreprise
Toast
Année
2019
L'éditeur de menus Toast affiné : articles codés par couleur, avec les modificateurs pain, taille et allergies d'un plat édités en ligne
Aperçu

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, la borne, la commande en ligne sur le web et l'application Toast Takeout, avec une correspondance vers les partenaires de livraison comme Uber Eats et DoorDash.

Ce que j'ai piloté
  • 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
  • Des concepts pour une configuration de menu plus rapide
4
niveaux de structure, du menu au modificateur, dans une seule vue
1
source unique pour tout le menu, partout où il est vendu
0
ressaisie entre systèmes pour publier un changement
L'avant

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.

Enregistrement d'écran de l'ancienne gestion des menus Toast : un tableau de bord de nombreux liens séparés sur lesquels la modification d'un seul cheeseburger devait être répartie
L'expérience précédente · le travail sur le menu dispersé sur un tableau de bord de pages séparées
01 Recherche terrain

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.

L'équipe interrogeant un restaurateur, blocs-notes en main, dans un café en activité
Recherche sur place en restaurant · avec les PM et les ingénieurs
02 Exploration de concepts

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.

Éditeur de menus Toast avec quatre colonnes liées : menus, groupes, articles et modificateurs
Concept : flux en quatre colonnes · menus, groupes, articles et modificateurs côte à côte
Vue d'un groupe de menu montrant articles, groupes de modificateurs et modificateurs, avec un menu d'édition ouvert
Concept : arborescence · un arbre du menu à gauche, sections empilées en dessous
03 Aperçu avant publication

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.

Mode aperçu affichant le menu sur un terminal de caisse Android simulé, en mode test
Aperçu caisse en mode test · le menu de l'exploitant tel que le terminal le voit
04 Concept

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.

Leadership · Comment c'est sorti

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 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.

Entités obligatoiresEntités facultatives
MenuPLATS
Groupe de menuSalades
Sous-groupeSalades format famille
Groupe de modif.Choix de sauce
Option de modif.César
Référence d'articleCésar
Option de modif.Italienne
Référence d'articleItalienne
ArticleCésar famille
ArticleCésar en accompagnement
Groupe de modif.Choix de sauce
Option de modif.César
Référence d'articleCésar
Option de modif.Italienne
Référence d'articleItalienne
Groupe de menuPlats
ArticlePoulet grillé
Groupe de modif.Accompagnements
Option de modif.Salade d'accompagnement
Référence d'articleSalade d'accompagnement
Groupe de modif. imbriquéChoix de sauce
Option de modif.César
Référence d'articleCésar
Option de modif.Italienne
Référence d'articleItalienne
Option de modif.Riz
Référence d'articleRiz
Retour de la direction
S
Steve, cofondateur (et designer d'origine)

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.

Impact · Où cela a abouti

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. Il 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.

Projet suivantGoogle Photos Contact ↗︎