Alla arbeten

UX/UI-design · Baemingo · UX/UI-design av onboardingen i självservice

Logga in, kom igång och börja sälja

Som produktdesigner genomförde jag product discovery, designade användar­flödena och gränssnittet, testade med användare och levererade utvecklings­klar design för inloggningen och onboardingen i självservice i Baemingos webbapp: från att skapa ett konto till den första försäljningen i kassan. En guide på startsidan visar varje steg och vad som är klart, så att en ny restaurang alltid vet vad som återstår innan den kan börja sälja.

Min roll
Produktdesigner, hands-on, vid sidan av min roll som Product Manager
År
2021–2022
Bransch
Restaurangteknik, B2B SaaS
Företag
Baemingo
Plattform
Webbapp
Verktyg
Figma
En mockup av Baemingos webbapp: artikelredigeraren i ett webbläsarfönster, med den gröna onboardingguiden i förgrunden

Det här gjorde jag som produktdesigner

  1. ProduktdiscoveryMed nyckelkunder, sälj, customer success och support, för att hitta var nya restauranger fastnade.
  2. Användar­flödenFrån att skapa ett konto till den första försäljningen i kassan, med en guide som visar varje steg och vad som är klart.
  3. GränssnittsdesignInloggningen, onboardingguiden på startsidan och redigerare i en sidopanel, på svenska och engelska.
  4. Tester med användarePrototyper testade med användare, och förfinade med feedback från användare, sälj, customer success och support.
  5. Utvecklings­klar designFärdiga skärmar, inklusive felmeddelanden och hur man kommer vidare, redo för utvecklingsteamet.
01

Utmaningen

När företaget började växa blev den manuella onboardingen, som krävde mycket support, något som höll tillbaka tillväxten. Från att skapa ett konto till att börja sälja krävde varje steg mycket hjälp från interna team. Nya kunder kom igång långsammare, och det begränsade hur snabbt företaget kunde växa.

För att kunna växa behövde onboardingen bli självservice, så att nya kunder på egen hand kunde:

  1. Skapa ett kontoUtan att vänta på någon på Baemingo.
  2. Sätta upp betalningarKoppla en betalleverantör och aktivera utbetalningar.
  3. Lägga till och hantera produkterEn i taget eller genom import.
  4. Organisera menyerOch sälja dem i flera försäljnings­kanaler.

Målet var att göra det enklare att komma igång, korta tiden till första försäljningen, låta potentiella kunder utforska plattformen innan de bestämde sig och minska behovet av säljmöten och operativt stöd.

02

Smärt­punkterna

Före självservice behövde en ny restaurang hjälp från Baemingo i varje steg. Den product discovery jag genomförde med nyckelkunder, sälj, customer success och support pekade på fem saker som skavde:

  1. Kan inte testa plattformen innan de binder sigDet krävdes ett säljmöte bara för att få tillgång.
  2. Beroende av interna teamVarje steg krävde hjälp från någon på Baemingo.
  3. Långsamt med ett stort sortimentProdukterna fick läggas till en och en, eller genom att be om hjälp.
  4. Oklart varför KYC behövsOch oklart vad som händer när dokumenten har skickats.
  5. Vet inte vad som återstårIngen överblick över stegen innan restaurangen kan börja sälja.

Målet för designen: en ny restaurang kommer från registrering till första försäljningen på egen hand, utan säljmöte.

03

Viktiga designbeslut

En guide, varje steg

En guide på dashboarden listar varje steg från konto till första försäljningen och visar vad som är klart. Restaurangen vet alltid vad som återstår.

Arbeta bredvid listan

Redigerarna öppnas i en sidopanel, så att listan med artiklar eller menyer syns medan restaurangen fyller på den.

Tydliga felmeddelanden, lätt att komma vidare

Vid inloggningen säger felmeddelandena vad som gick fel och vad man ska göra härnäst, och ett glömt lösenord kan återställas direkt.

Förklara varför

Steget för utbetalningar förklarar varför KYC-ansökan behövs och vad som händer när den har godkänts.

Välj hur du vill sälja

Sista steget låter restaurangen välja sina försäljnings­kanaler: onlinebeställning, självbetjäningskiosk, i kassan eller vid bordet.

Testat med användare

Prototyperna testades med användare och förfinades utifrån feedback från användare, sälj, customer success och support.

04

Onboardingen steg för steg

Som produktdesigner tog jag onboardingen från flöden och prototyper till testat, utvecklings­klart UI. En guide på startsidan listar varje steg och visar vad som är klart, så att en ny kund alltid vet vad som återstår innan den kan börja sälja. Alla skärmar finns på svenska och engelska, som i produkten. Klicka på en skärm för att förstora den.

Logga in och skapa ett konto

Tre inloggningsskärmar: logga in, skapa ett konto med lösenordsregel och villkor, och inloggningen med felmeddelanden
Logga in, skapa ett konto och felmeddelanden som säger vad som gick fel och vad man ska göra härnäst.

Berätta om din verksamhet

Tre skärmar: steg 1 av 2 med företagsnamn, land, organisationsnummer, språk och valuta, steg 2 av 2 för att lägga till serveringsställen, och Glömt lösenordet
Två korta steg för att sätta upp företaget och dess serveringsställen, som går att ändra senare, och ett sätt att återställa ett glömt lösenord.

Lägg till artiklar

Onboardingguiden på dashboarden med Lägg till artiklar som första steg, och artikelredigeraren med panelen Skapa artikel
Guiden börjar med att lägga till artiklar, en i taget eller genom import. Redigeraren öppnas i en sidopanel, så att listan syns hela tiden.

Skapa en meny

Guiden med tillagda artiklar och Skapa en meny som nästa steg, och menyredigeraren
Nästa steg bygger en meny av artiklarna som redan lagts till.

Skapa ett betalkonto

Guiden med betalningssteget, och betalningssidan med betalkonto och utbetalningar
Betalkonto och utbetalningar finns på samma sida, med utbetalningshistoriken nedanför.

Aktivera utbetalningar

Guiden med Aktivera utbetalningar valt och knappen Skicka in KYC, och utbetalningssidan
Guiden förklarar varför KYC-ansökan behövs och vad som händer när den har godkänts.

Börja sälja

Guiden med Välj försäljnings­kanal: beställning för allmänheten, självbetjäningskiosk, i kassan eller vid bordet, och ett formulär för serveringsstället med försäljnings­kanaler att aktivera
Sista steget: välj hur du vill sälja och aktivera sedan varje försäljnings­kanal för ett serveringsställe.

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 produkt­utvecklingen så att restaurang­erna kunde växa, och Baemingo kunde växa med demProduct discovery, en roadmap för alla produkter, effektmål för restaurang­erna och för Baemingo, och ledarskap för fyra utvecklingsteam.Se caset UX/UI-design · BaemingoRestaurangerna bygger själva menyn som kunderna serMenybyggaren: version 1, användar­testet och version 2.Se caset
Nästa · UX/UI-design · Baemingo Restaurangerna bygger själva menyn som kunderna ser