Starbucks on the go – fra friktion til flow

Dette er et studieprojekt, hvor jeg redesignede Starbucks’ selvbetjeningsflow på en Q8 tankstation.

Målet var at gøre bestillingen hurtigere, mere intuitiv og nemmere at forstå i en situation, hvor brugeren ofte er på vej videre.

Projekt: Redesign

Type: Studieprojekt · Individuelt UX-case · 3 uger

Min rolle: UX designer (research, user flow, wireframes, prototype og test)

Metoder: Heuristisk evaluering, feltobservation, user flow mapping og think aloud-test

Værktøjer: FigJam, Figma og WordPress

Mål: At forenkle bestillingsflowet, tydeliggøre valg og reducere unødvendige trin

Resultat: Et forbedret user flow og en testbar low-fidelity prototype

Bestillingen tog unødvendig tid og skabte usikkerhed hos brugeren

Når man bestiller kaffe på en tankstation, forventer man, at det går hurtigt. I det eksisterende Starbucks-system blev brugerne dog ofte i tvivl og brugte for lang tid på at finde ud af, hvad de skulle gøre.

Problemet var ikke funktionerne, men at flowet var uklart. Brugeren skulle selv regne næste skridt ud, hvilket gjorde bestillingen langsommere og mindre intuitiv.

Analyse af hvor brugeren oplever usikkerhed og tidsforbrug

Jeg ville finde ud af, hvorfor brugerne blev forvirrede ved automaten – og vigtigst af alt, hvordan det kunne løses.

Jeg observerede rigtige brugere i en reel situation, fulgte deres adfærd og lyttede til, hvad de tænkte undervejs.

Samtidig kortlagde jeg hele brugerrejsen for at spotte præcis, hvor tingene gik galt – hvor folk tøvede, blev usikre eller brugte for lang tid.

Ud fra det redesignede jeg flowet og testede en simpel prototype for at se, om det faktisk gjorde en forskel.

Observationer fra fieldtest viste årsager til besvær i bestillingsflowet

Som en del af projektet besøgte jeg sammen med medstuderende en Q8-station, hvor vi gennemførte en fieldtest ved selv at bestille kaffe og observere brugen af systemet i praksis.

Testen gjorde det tydeligt, at flere faktorer skabte unødige udfordringer i flowet
1. Kan man se hvad der sker?
  • Mangler info før valg
  • Risiko for fejlbestilling
  • Skaber usikkerhed
2. Behøver man at huske noget?
  • Intet overblik over bestilling
  • Uklart valg og pris
  • Skaber usikkerhed
3. Er fejl nemme at forstå og rette?
  • Uklare fejlbeskeder
  • Ingen forklaring på problemet
  • Kræver hjælp → spilder tid
4. Fungerer alt som forventet?
  • Uklart hvor brugeren er i flowet
  • Mangler feedback
  • Kan føre til afbrud

Endelig er sproglig tilgængelighed vigtig. Da kaffemaskinerne bruges af både danske og internationale kunder, vil en engelsk version gøre systemet mere forståeligt og inkluderende.

Problemet lå ikke kun i designet

Problemet handlede ikke kun om selve designet – men også om rækkefølgen af de valg, brugeren skulle tage.

Det gjorde især én ting tydelig for mig: Problemet lå ikke kun i skærmbillederne, men i rækkefølgen af dem. 

Problemer:

  • Flowet bliver afbrudt midt i beslutningsprocessen
  • Brugeren skifter mellem at tænke og handle
  • Unødvendig bevægelse
  • Uklart næste skridt

Jeg kortlagde det eksisterende bestillingsflow for at forstå, hvor oplevelsen brød sammen.

Det eksisterende flow så sådan ud:

  1. Vælg drik
  2. Vælg størrelse
  3. Vælg tilpasning
  4. Bekræft valg
  5. System viser “tag kop”
  6. Brugeren finder kop
  7. Brugeren placerer kop
  8. Trykker start / maskinen starter
  9. Maskinen brygger
  10. Drik er klar
  11. Betaling ved kassen

Designretning: Jeg skabte en mere sammenhængende og lineær proces

De vigtigste indsigter.

På baggrund af research og flowanalyse formulerede jeg tre spørgsmål, som styrede mit redesign:

  • Hvordan kan jeg gøre bestillingsflowet mere intuitivt, så brugeren kan gennemføre sin bestilling uden tøven?
  • Hvordan kan jeg reducere unødvendige trin i bestillingsprocessen, så den bliver hurtigere for brugere på farten?
  • Hvordan kan jeg skabe tydelig feedback og vejledning, så brugeren altid ved, hvad næste skridt er?

Herfra arbejdede jeg med nogle klare mål for redesignen:

  • Reducere besvær i flowet
  • Skabe tydeligere valg
  • Minimere antal trin
  • Gøre oplevelsen hurtigere og mere intuitiv

Flowet startede ikke på skærmen – men ved koppen

Jeg startede med hurtige skitser for at undersøge flowet og omsatte derefter de vigtigste idéer til low-fidelity wireframes i Figma med fokus på struktur og sammenhæng frem for visuel detaljering.

Nyt, optimeret flow:

  1. Tag kop (vælg størrelse fysisk)
  2. Placer kop
  3. Vælg drik
  4. Tilpas
  5. Se overblik + pris
  6. Bekræft
  7. Brygning starter
  8. Klar
  9. Betaling ved kassen

I det eksisterende flow blev brugeren afbrudt midt i sin bestilling for at udføre fysiske handlinger som at finde og placere en kop.

Det skabte et brud i flowet, hvor brugeren skiftede mellem at tænke og handle. Og ved at lade det fysiske valg definere det digitale flow, gjorde jeg oplevelsen mere intuitiv.

Løsningen: Et simplere og mere sammenhængende flow

Det endelige resultat blev et redesign af Starbucks’ selvbetjeningsflow med fokus på hastighed, tydelighed og tryghed.

I den nye løsning:

  • træffer brugeren først alle valg
  • bedre feedback undervejs
  • visuel markering af valg og en progress indikator
  • og guides derefter videre til de fysiske handlinger

 

Det nye flow er enklere at forstå og gør det hurtigere at bestille. Det vigtigste var ikke at tilføje flere funktioner, men at gøre de eksisterende mere forståelige og placere dem i en mere logisk rækkefølge.

Think aloud-test identificerede behov for designforbedringer

Under brugertesten blev det tydeligt, hvor hurtigt små uklarheder skaber tøven og usikkerhed i et ellers simpelt flow. Især valg af størrelse, tilvalg og muligheden for at ændre eller annullere en bestilling viste sig som kritiske punkter.

Jeg traf derfor disse designbeslutninger:

Tydeligere valg af størrelse
Flere brugere stoppede op ved størrelser og stillede spørgsmål som “hvad er lille?”. For at gøre valget mere intuitivt koblede jeg navn og volumen, fx Small (250 ml), og præsenterede det som tydelige visuelle valg.

Synligere tilvalg
Jeg observerede, at tilvalg som ekstra sukker blev overset. Mit redesign fungerede derfor ikke som forventet. 

Jeg havde forsøgt at samle flere valg på én side for at gøre flowet enklere, men det skabte et nyt problem: for mange valg på én gang. Det gjorde det sværere for brugeren at overskue og træffe beslutninger.

Mere forståelig redigering
Når brugerne ville ændre deres bestilling, opstod der frustration. Jeg gjorde derfor redigering tydeligere og omformulerede “Ret” til “Rediger bestilling”, så handlingen bliver mere direkte og forståelig.

Tryggere annullering
Brugerne var usikre på konsekvensen af “Annuller”.
Jeg erstattede den med et “X”-ikon (kendt som en mere definitiv handling) for at gøre handlingen tydelig.

Resultat: Brugerne gennemførte bestillingen hurtigere og med mindre tøven

Jeg vurderede løsningen ud fra, om det reducerede besvær i flowet og skabte en mere forståelig og testbar bestillingsoplevelse.

Projektet resulterede i:

  • Et tydeligere og mere sammenhængende bestillingsflow
  • Færre unødvendige trin i processen
  • En prototype, der kunne bruges til usability-test
  • Et bedre grundlag for at validere designvalg gennem brugerfeedback

Læring: Små ændringer i struktur skaber stor effekt i brugeroplevelsen

Dette projekt lærte mig, at selv små uklarheder i et flow kan have stor betydning, når brugeren står i en hurtig situation.

Jeg lærte også:

  • At koble usability-problemer direkte til designbeslutninger
  • At arbejde iterativt med test → insights → redesign
  • At low-fidelity prototyper er nok til at teste idéer effektivt
  • At et godt design ikke nødvendigvis handler om at tilføje funktioner, men ofte om at fjerne det, der ikke er nødvendigt
  • Undervejs eksperimenterede jeg også med at redesigne forsiden ved at samle valgmuligheder i kategorier.
    Formålet var at skabe bedre overblik, men tests viste, at det i stedet gjorde oplevelsen mere kompleks og forvirrede brugerne.

 

En vigtig personlig læring var også testdelen. Jeg blev mere opmærksom på, hvor vigtigt det er at forblive neutral og give deltagerne tid til at tænke selv, så feedbacken bliver så ærlig og brugbar som muligt.

Citat-highlights fra testen:

“Ups, det var ikke den jeg skulle have” – “Jeg ville bare starte forfra” – “Det giver mening, det fungerer fint” – “Okay, jeg prøver igen” – “Det er ret nemt”