Restaurangapp

Tinto & Tapas

Study case       Design Thinking      App        Wireframes & Prototyping

Projekt: ta fram en konceptdesign av appen baserat på briefen och användargruppernas behov. 

Mål: utveckla en användarcentrerad konceptdesign där visuellt och funktionellt illustreras hur appen ska fungera, kännas och användas.

Brief:

”Vi är en ny restaurang i centrala Göteborg som serverar tapas och vill ha en mobilapplikation där våra gäster kan beställa och betala sin mat i. Det ska vara inbjudande och lätt att se vad som erbjuds i menyn. Man ska kunna filtrera utifrån allergener (bland annat glutenfritt, veganskt).”

Tidsram:

2 veckor i grupp och 1 vecka själv

Min roll i teamet:

UX-designer i ett team med två andra UX-designers. Vi medverkade aktivt i hela projektet, och efter att prototypen färdigställts i grupp, vidareutvecklade jag den individuellt.

 

Teamet:

3 personer

Använda metoder:

  • Statistikinsamling (matköp via appar)
  • Konkurrensanalys
  • Skreeningenkät
  • Intervjuer med valda personer från skreeningenkät 
  • Affinity mapping
  • 10 min brainstorming
  • Personas 
  • User flow
  • Konstruktiv designfeedback
  • Crazy 8
  • User stories
  • Kravspecifikationer
  • Wireframes
  • Prototyp med visuell design
  • Design systen och grafisk identitet
  • UX-review med analys utifrån ”10 usability heuristics”
  • Presentation

Använda verktyg:

  • Canva 
  • Miro
  • Trello
  • Figma
  • Papper och penna
  • Discord
  • FigJam
  • Teams
  • Microsoft forms
  • Planningpokeronline.com

Research och behovsanalys

Vi fokuserade oss på att förstå användarna och marknaden. Vi genomförde en konkurrensanalys och  insamling av statistik där avändarna lyfte irritation över många klick, reklam och brist på allergifilter eller möjlighet att anpassa maten. Samtidigt uppskattades snabbheten i appbeställningar. Statistik visade att 73 % föredrar att betala med kort i appar – något vi tog med i våra designval. För att få en bättre förståelse för vår målgrupp och kunna välja rätt personer att intervjua, skickade vi ut en screening-enkät.

Efter screeningenkäten intervjuade vi utvalda deltagare för att få djupare insikter kring hur de använder restaurangappar i vardagen och sedan efter organiserade vi insikterna i en omfattande affinity map. Det hjälpte oss att se mönster, behov och frustrationer hos användarna.

Parallellt med insamlingen av data genomförde vi en 10 minuter brainstorming-session för att generera idéer om funktioner och krav för appen.

Med stöd på vår research tog vi fram tre tydliga personas i olika åldrar och med varierande beteenden vilket blev en viktig grund för vidare designbeslut.

Idégenerering och konceptutveckling

Vi skissade först individuellt sina versioner av appens user flow. Därefter presenterade vi våra idéer till varandra och gav/fick konstruktiv feedback för att kunna ta det bästa vidare.

Därefter kombinerade vi de starkaste delarna från varje user flow till ett gemensamt flöde som låg till grund för vidare designarbete.

Baserat på vår research och intervjuer formulerade vi en omfattande lista med user stories vilka hjälpe oss att ta fram kravspecifikationer för att hålla fokus och fördjupa förståelse. Vi prioriterade de viktigaste funktionerna: beställning, betalning, inloggning och registrering.

För snabb estimering och en gemensam bild av arbetsbelastningen använde vi planningpokeronline.com.

 Design och prototyp

Vi använde metoden Crazy 8 där varje gruppmedlem skissade åtta varianter på wireframes för appens viktigaste sidor. Det gav ett brett spektrum av idéer att arbeta vidare med.

I nästa steg kombinerade vi de mest lovande elementen och itererade fram gemensamma wireframes, som sedan utvecklades till mer detaljerade high-fidelity-versioner.

Medan en var fokuserade på hi-fi wireframes, arbetade vi andra med att ta fram ett designsystem & grafisk identitet. Vi delade upp arbetet och itererade tillsammans för att möta användarnas behov och få in en spansk känsla. Färgpaletten inspirerades av Spaniens färgkaraktär, med serif för rubriker och sans-serif för brödtext.

Vi avslutade med att skapa mockups och en klickbar prototyp. Tack vare vårt färdiga designsystem och user flow gick det snabbt att bygga upp rätt flöden och visuella detaljer.

Medan vi gjorde UX-review till ett annat arbete fick vi konkret feedback till vår prototyp: felmeddelanden saknades, vissa texter var otydliga och bekräftelser vid köp behövdes. Vi gjorde förbättringar utifrån detta och presenterade en fungerade och klickbar prototyp där användaren kan logga in, skapa konto, beställa tapas och betala.

Individuell vidareutveckling 

Jag har vidareutvecklat användarflödet för appen vi skapat i gruppen, med fokus på att göra det enkelt för användare att beställa mat tillsammans. Flödet utgår från användarperspektivet med målet att underlätta gruppbeställningar (framkom som ett behov i våra intervjuer). En ny sida, ”Set för fler”, har lagts till för att förenkla gruppbeställningar. Användaren väljer mellan set för 2, 4–6 eller 8–10 personer, med förslag som enkelt kan anpassas. Det gör det lätt att beställa tillsammans, särskilt för nya användare. Eventuella designändringar som inte påverkar användarflödet kommer att motiveras separat, tillsammans med visuella exemplar.

Jag uppdaterade 2 kravspecifikationer utifrån ändringar i user flow och skapade 3 nya som kändes avgörande för att stödja den vidareutvecklade funktionaliteten. Dessa nya acceptanskriterier säkerställer att flödet stämmer överens med användarens behov och appens mål.

Det som jag skrev till/ ändrade markerat med grön

Det som jag skrev till/ ändrade markerat med grön

ett nytt

ett nytt

ett nytt

Jag har förbättrat delar av gruppens prototyp genom att justerat funktioner och vyer för en tydligare och mer användarvänlig upplevelse.

Slutprototyp efter individuell vidareutveckling

Jag uppdaterade några delar av designsystemet efter vidareutvecklingen av prototypen.

Oanvända element, som gamla ikoner och bilder, tog jag bort för att skapa tydlighet. Jag lade till nya ikoner, knappar och en ny grön färg specifikt för CTA-knappar som valde för att stärka hierarki och vägleda användaren tydligare. Nya setbilder  genererade jag med Chat GPT.

Resultat och lärdomar:

Designen är nu klar inom projektets ramar och nästa steg är användartester.

Genom att vidareutveckla användarflödet och designsystemet har jag blivit bättre på att fatta beslut utifrån användarens behov. Arbetet visade hur viktigt det är att iterera, testa och hålla designen tydlig och konsekvent.

Anna Prykhodko – UX designer     

Tack för att du scrollade hela vägen hit!

© 2025 Designad & byggd av mig