Alla arbeten

UX/UI-design · Baemingo · UX/UI-design av en menybyggare

Låta restauranger bygga beställnings­menyn som deras kunder ser

Som produktdesigner tog jag layout­byggaren i Baemingos back office från product discovery till användar­flöden, gränssnittsdesign, användar­tester och utvecklings­klar design. Layout­byggaren är verktyget där en restaurang bestämmer hur menyn ser ut för kunderna i beställnings­appen och i självservice. Personalen skapar kategorier, lägger till produkter och formger varje kategori­kort, och ser resultatet i en förhandsvisning i mobilen medan de arbetar. Varje ändring sparas automatiskt.

Min roll
Produktdesigner, hands-on, vid sidan av min roll som Product Manager
År
2021–2022
Bransch
Restaurangteknik, B2B SaaS
Företag
Baemingo
Användare
Restaurangägare och personal
Plattform
Webbapp, med förhandsvisning av beställnings­appen
Verktyg
Figma

Kort version

Utmaningen

Restaurang­erna hade sina produkter i systemet, men behövde ett sätt att göra om dem till en meny som fungerar för kunderna i varje försäljnings­kanal, utan hjälp från Baemingo.

Vad jag gjorde

Jag genomförde product discovery, designade flödet och UI:t för layout­byggaren, från att skapa en layout till kategorier, produkter, styling och sortering, testade den med användare och levererade utvecklings­klar design.

Vad det skulle åstadkomma

En meny som restaurang­personalen kan bygga och ändra själva, och se precis som kunderna kommer att se den.

Det här gjorde jag som produktdesigner

  1. ProduktdiscoveryAtt bygga menyer var något av det svåraste för nya restauranger, så jag utforskade hur restaurang­erna förväntade sig att gå från sina produkter till en meny.
  2. Användar­flödenHur en layout skapas, namnges och kopplas till en försäljnings­kanal och en meny, och hur den hittas och redigeras igen senare.
  3. GränssnittsdesignFärdiga skärmar för varje steg, med två live-förhandsvisningar i mobilen, autospar, dra och släpp för sortering och vägledning på sidan.
  4. Tester med användareVersion 1 testades med användare. De förväntade sig att först skapa produkterna, sedan layouten, menyn, och det formade version 2.
  5. Utvecklings­klar designVersion 2 som utvecklings­klar design, och idéer till produktbackloggen: synlighet per serveringstyp eller tid, färgpaletter, underkategorier och varumärkesanpassning av appen.
01

Utmaningen

I Baemingo skapas produkterna en gång, i produkt­katalogen (PIM). Men en lista med produkter är ingen meny. En restaurang behöver bestämma hur produkterna grupperas och visas för dem som beställer: i beställnings­appen, i en självservicekiosk eller i kassan.

En layout är det beslutet: hur personal eller kunder upplever menyn när de lägger en beställning. I ett användbarhets­test beskrev användarna i vilken ordning de förväntade sig att arbeta:

  1. Skapa produkternaNamn, pris, bild, beskrivning och ingredienser, i produkt­katalogen.
  2. Skapa en layoutDet vill säga menyn: kategorierna och produkterna som kunden ser, och hur de ser ut.

Layout­byggaren behövde alltså utgå från produkter som redan finns, och få menybygget att kännas som att ordna, inte som att fylla i formulär.

02

Version 1 och användar­testet

Att bygga menyer var något av det svåraste för nya restauranger. Jag designade en första version av menybyggaren, testade den med användare och förbättrade den utifrån det vi lärde oss.

Version 1: skapa en menylayout

Den första versionen av sidan Menu layout: ett layoutnamn, en försäljnings­kanal och knappen Create layout, med en tom lista över befintliga layouter
Den första versionen: namnge layouten, välj en försäljnings­kanal och skapa den.

Version 1: bygg menyn i en mobilförhandsvisning

Den första versionen av byggaren: två mobilförhandsvisningar med kategorin Lunch och Ohana Bowl, och en panel för att redigera kategorin och välja produkter
Kategorier och produkter i en mobilförhandsvisning, med en panel för att styla kategorin och välja dess produkter.

Det här testade vi

  1. Är det lätt att förstå vad man ska göra, och hur?Skapa den första layouten: skriv ett namn och skapa den.
  2. Är det lätt att förstå menylayout som begrepp?Att en layout är hur menyn ser ut för dem som beställer, skild från själva produkterna.

Det här lärde vi oss

  1. Produkterna först, sedan menynAnvändarna ville först skapa sina produkter och sedan skapa layouten: menyn.
  2. Dra och släpp fungeradeFormatet, med kategorier och produkter som sorteras med dra och släpp, höll även när menyn växte.
  3. Hjälp med färgerAnvändarna bad om rekommenderade färgpaletter i stället för att skriva in hexkoder.

Resten av det här caset visar version 2, förbättrad utifrån det vi lärde oss.

03

Skapa en layout

En ny layout behöver tre saker: ett namn, en försäljnings­kanal och en meny. Listan med försäljnings­kanaler visar bara de kanaler som företaget har aktiverat, och väljer man kassan (POS) kommer man till POS-layouten. Befintliga layouter listas bredvid formuläret, så att de är lätta att hitta och ändra senare. Klicka på en skärm för att förstora den.

Namnge layouten och välj försäljnings­kanal och meny

Sidan Layout med ett formulär: layoutnamn, försäljnings­kanalen Mobile app / Online ordering och menylistan öppen med Online menu, Bas menu och POS menu
En layout kopplas till en försäljnings­kanal och en av de menyer som restaurangen redan har skapat.

Hitta och redigera befintliga layouter

Sidan Layout med ett tomt formulär och en lista över befintliga layouter med Baemingo online layout
När layouten är skapad visas den under Existing layouts. Ett klick öppnar den i byggaren.
04

Bygg menyn

Byggaren visar menyn i två mobilförhandsvisningar: menyns start med kategorierna, och den kategori som är öppen med sina produkter. Paneler för att lägga till och redigera öppnas till höger, så att förhandsvisningen alltid syns.

Börja med den första kategorin

Byggaren med två tomma mobilförhandsvisningar, Create layout category aktiv och Add product nedtonad, och en sammanfattning av layouten med en guide i tre steg till höger
Tills den första kategorin finns är Add product nedtonad. Till höger visas en sammanfattning av layouten och hur man kommer igång.

Styla kategori­kortet

Panelen Create layout category med namnet Lunch, textfärg #FFFFFF, bakgrundsfärg #474762, bilduppladdning och reglaget Use image as background
Namn, textfärg och bakgrundsfärg, med förvalda värden ifyllda. En bild kan användas som bakgrund i stället.

Lägg till produkter i kategorin

Kategorin Lunch med Ohana Bowl i förhandsvisningen, och en panel som listar produkter per grupp, Bowls, Dryck, Pizza med flera, med Add, Add all och Remove
Produkterna väljs från katalogen, grupperade som där. Produkten syns i förhandsvisningen så fort den har lagts till.

Ändra ordningen

Byggaren med kategorierna Lunch och Dessert i menyförhandsvisningen och Ice cream i kategorin Dessert, och All layout changes saved! högst upp
Kategorier och produkter sorteras med dra och släpp. All layout changes saved! bekräftar att inget behöver sparas manuellt.

Redigera en produkt från layouten

Detaljvyn för Ohana Bowl som den ser ut i beställnings­appen, med artikelpanelen till höger: namn, kategori, moms, kostnad, pris, beskrivning och bild
Ett klick på en produkt öppnar den som kunden kommer att se den, med produktpanelen bredvid. Ändringar utom priset sparas på produkten i katalogen.
05

Viktiga designbeslut

Visa det kunden kommer att se

Byggaren består av två mobilförhandsvisningar: menyn med kategorierna, och den kategori som är öppen. Det personalen bygger är det kunderna får i appen, så de behöver aldrig gissa.

Ett steg i taget

Add product är nedtonad tills den första kategorin finns. Gränssnittet visar i vilken ordning man jobbar, så ingen behöver läsa en manual.

Vägledning där arbetet sker

När ingen panel är öppen visas en sammanfattning av layouten och en kort guide i tre steg till höger. Den försvinner när det finns något att göra.

Produkter återanvänds, de kopieras inte

Produkterna kommer från produkt­katalogen (PIM) och läggs till per kategori, så samma bowl kan ligga under både Lunch och Bowls utan att skapas två gånger.

Enkel formgivning med trygga förval

Varje kategori­kort har ett namn, en textfärg och en bakgrundsfärg med förvalda värden ifyllda, eller en bild som bakgrund med ett enda reglage.

Inget går förlorat

Ändringar sparas automatiskt, och ”All layout changes saved!” bekräftar det. Sorteringsordningen ändras med dra och släpp, och en produkt kan redigeras direkt från layouten.

06

Nästa steg

Idéer som jag noterade till produktbackloggen, utöver den här designen:

  1. SynlighetsinställningarVisa en kategori eller produkt bara för en viss serveringstyp eller tid på dagen, till exempel lunch.
  2. FärgpaletterVälja från en palett eller en rekommenderad färgkombination i stället för att skriva en hexkod.
  3. UnderkategorierStöds inte i den här designen, och en öppen fråga till nästa omgång.
  4. Varumärkesanpassning av appenEn plats för att ställa in startsidan och generell varumärkesprofil, som logotyp och standardfärger.