UX/UI-design · Baemingo · UX/UI-design av en menybyggare
Låta restauranger bygga beställningsmenyn som deras kunder ser
Som produktdesigner tog jag layoutbyggaren i Baemingos back office från product discovery till användarflöden, gränssnittsdesign, användartester och utvecklingsklar design. Layoutbyggaren är verktyget där en restaurang bestämmer hur menyn ser ut för kunderna i beställningsappen och i självservice. Personalen skapar kategorier, lägger till produkter och formger varje kategorikort, 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ällningsappen
- Verktyg
- Figma
Kort version
Utmaningen
Restaurangerna 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äljningskanal, utan hjälp från Baemingo.
Vad jag gjorde
Jag genomförde product discovery, designade flödet och UI:t för layoutbyggaren, från att skapa en layout till kategorier, produkter, styling och sortering, testade den med användare och levererade utvecklingsklar design.
Vad det skulle åstadkomma
En meny som restaurangpersonalen kan bygga och ändra själva, och se precis som kunderna kommer att se den.
Det här gjorde jag som produktdesigner
- ProduktdiscoveryAtt bygga menyer var något av det svåraste för nya restauranger, så jag utforskade hur restaurangerna förväntade sig att gå från sina produkter till en meny.
- AnvändarflödenHur en layout skapas, namnges och kopplas till en försäljningskanal och en meny, och hur den hittas och redigeras igen senare.
- 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.
- 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.
- Utvecklingsklar designVersion 2 som utvecklingsklar design, och idéer till produktbackloggen: synlighet per serveringstyp eller tid, färgpaletter, underkategorier och varumärkesanpassning av appen.
Utmaningen
I Baemingo skapas produkterna en gång, i produktkatalogen (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ällningsappen, 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ändbarhetstest beskrev användarna i vilken ordning de förväntade sig att arbeta:
- Skapa produkternaNamn, pris, bild, beskrivning och ingredienser, i produktkatalogen.
- Skapa en layoutDet vill säga menyn: kategorierna och produkterna som kunden ser, och hur de ser ut.
Layoutbyggaren 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.
Version 1 och användartestet
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
Version 1: bygg menyn i en mobilförhandsvisning
Det här testade vi
- Ä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.
- Ä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
- Produkterna först, sedan menynAnvändarna ville först skapa sina produkter och sedan skapa layouten: menyn.
- Dra och släpp fungeradeFormatet, med kategorier och produkter som sorteras med dra och släpp, höll även när menyn växte.
- 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.
Skapa en layout
En ny layout behöver tre saker: ett namn, en försäljningskanal och en meny. Listan med försäljningskanaler 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äljningskanal och meny
Hitta och redigera befintliga layouter
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
Styla kategorikortet
Lägg till produkter i kategorin
Ändra ordningen
Redigera en produkt från layouten
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 produktkatalogen (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 kategorikort 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.
Nästa steg
Idéer som jag noterade till produktbackloggen, utöver den här designen:
- SynlighetsinställningarVisa en kategori eller produkt bara för en viss serveringstyp eller tid på dagen, till exempel lunch.
- FärgpaletterVälja från en palett eller en rekommenderad färgkombination i stället för att skriva en hexkod.
- UnderkategorierStöds inte i den här designen, och en öppen fråga till nästa omgång.
- Varumärkesanpassning av appenEn plats för att ställa in startsidan och generell varumärkesprofil, som logotyp och standardfärger.
Fler av mina ansvarsområden på Baemingo
På Baemingo hade jag flera ansvarsområden. Vart och ett är ett eget case.
Produktledarskap · Designledarskap · BaemingoJag ledde produktutvecklingen så att restaurangerna kunde växa, och Baemingo kunde växa med demProduct discovery, en roadmap för alla produkter, effektmål för restaurangerna och för Baemingo, och ledarskap för fyra utvecklingsteam.Se caset
UX/UI-design · BaemingoLogga in, kom igång och börja säljaOnboardingen i självservice, från att skapa ett konto till den första försäljningen i kassan.Se caset