Varda
Matleverans för spontana vardagsstunder
En matleveransapp för dig som vill lägga mindre tid på att välja och mer tid på själva kvällen.
01Från många val till ett tydligt nästa steg
Varda riktar sig mot urbana, bekvämlighetsdrivna användare som värdesätter snabbhet, enkelhet och samtidigt vill ha en mer premiumpräglad upplevelse.
Varda utgår från två vardagssituationer:
Spontan middag – när man vill lösa kvällens middag utan att leta bland hundratals enskilda produkter.
Spontan hemmakväll – när filmen redan har börjat och man snabbt vill komplettera med snacks, dryck eller annat.
Målet var att göra vägen från inspiration till beslut kortare.
Läs mer om bakgrunden
Jag började med situationen, inte produkten
Utifrån projektets brief och ramar formulerade jag två huvudsakliga user cases som fungerade som strategiskt underlag för mina designbeslut.
User case 1: Det spontana middagscaset
Som användare vill jag
… snabbt kunna beställa ingredienser till kvällens middag utan att behöva söka bland hundratals produkter.
… kunna bläddra bland recept baserat på kategori eller kök, så att vi snabbt kan hitta något att laga.
… kunna lägga till ingredienser från ett recept i en inköpslista, så att jag slipper skriva allt manuellt.
User case 2: Den spontana myskvällen
Som användare vill jag
… kunna få snabb leverans av snacks, godis och dryck när filmen redan har startat och skafferiet är tomt.
… få personanpassade förslag på snacks eller dryck (baserat på tidigare köp), så att jag enkelt kan komplettera med vad jag önskar till min hemmakväll.
I stället för att låta startsidan utgå från traditionella produktkategorier strukturerade jag den kring de situationer användaren faktiskt befinner sig i. På så sätt blir startsidan en discovery hub där användaren snabbt kan känna igen sitt behov och välja en väg framåt.
För Spontan middag leder det exempelvis vidare till recept och färdiga ingredienspaket.
För Hemmakväll ligger fokus på snacks, dryck och spontana köp.
Stora bilder, tydliga sektioner och återkommande komponenter gör innehållet lättare att skanna, samtidigt som färdiga lösningar minskar antalet beslut.
02Ett designsystem som håller ihop upplevelsen
För att skapa ett konsekvent uttryck mellan vyerna byggde jag tidigt upp ett designsystem med återanvändbara komponenter, spacing, typografi och färger.
Produktkort, CTA och navigationsmönster återkommer genom flödet och hjälper till att skapa igenkänning och en tydlig visuell hierarki.
Samtidigt ville jag undvika att konsekvens betydde att alla vyer såg likadana ut. Olika situationer fick därför utrymme att ha olika karaktär.
Utforska designsystemet
Tydlighet med karaktär. Inter används för ett rent och lättläst gränssnitt, medan Poppins används i huvudrubriker för att skapa mer karaktär och kontrast. En kompakt typografisk skala stödjer snabb scanning och tydlig hierarki.
Varmt, sobert och balanserat. Dämpade neutrala toner låter matbilder och produktinnehåll stå i fokus. Grönt används som primärfärg för actions, medan terracotta fungerar som en sparsam accent som tillför värme och kontrast.
Tydliga actions, utan onödig visuell konkurrens. CTA-knapparna används för att skapa en tydlig hierarki och guida användaren mot nästa steg. Primära actions får mest visuell tyngd för att minska friktion i köpflödet.
Enkel väg mellan inspiration och köp. Navigationen förenklades för att göra det lätt att röra sig mellan inspiration, produkter och checkout. Återkommande navigationsmönster bidrar till igenkänning och en mer förutsägbar upplevelse.
Igenkänning med utrymme för variation. Återanvändbara kortkomponenter skapar ett konsekvent browsingflöde. Samtidigt används variationer i kortens utseende och storlek för att särskilja innehåll och skapa mer dynamik i layouten.
03Från user story till design
En av de user stories jag utgick från var att användaren snabbt skulle kunna lösa kvällens middag utan att behöva leta bland hundratals produkter.
Därför använde jag recept och färdiga ingredienspaket för att minska antalet beslut och göra vägen från inspiration till beställning kortare.
Användaren får en färdig middagsidé i stället för att behöva börja med att söka bland enskilda produkter.
Alla ingredienser kan läggas till i varukorgen med ett enda val, vilket minskar antalet steg och beslut.
Användaren behåller kontrollen genom att kunna välja bort enskilda ingredienser innan de läggs i varukorgen.
04Från beslut till checkout
Vad behöver användaren veta för att känna kontroll över beställningen?
- Vad som beställs (och inte)
- Vad det kostar
- När det levereras
Målet var att minimera distraktioner och kognitiv belastning genom ett förenklat informationsflöde, tydlig visuell informationshierarki och konsekventa komponenter.
Sekundär information tonas ned och checkout blir det tydliga nästa steget.
Läs mer om designbesluten
- Information om leveranstid prioriteras visuellt för att minska osäkerhet innan checkout. Fri frakt-indikatorn används för att motivera större köp utan att avbryta checkout-flödet.
- Sekundär information tonades ned för att hålla fokus på checkout-processen.
- Kontextuella produktförslag används för att stödja spontana köp och uppmuntra kompletterande beställningar i linje med affärsmål.
Samma princip återkommer i produkt- och receptvyerna. Tydlig produktinformation, stora touchytor och förenklade köpflöden ska hjälpa användaren att fatta beslut utan onödig friktion.
05AI som designstöd
Ett personligt mål med projektet var att utveckla mina prompt skills och utforska hur AI kan användas som ett stöd i designprocessen.
Jag började med att designa en produktvy manuellt och använde den som stilreferens i mina prompts. Därefter använde jag ChatGPT för att iterera fram prompts som kördes i Figma Make. Outputen krävde mycket manuell bearbetning, men gjorde det möjligt att snabbt utforska olika layoutidéer.
01Manuell design
Jag designade produktvyn och etablerade Vardas visuella riktning.
02Promptarbete
Jag använde ChatGPT för att utveckla idéer och iterera prompts.
03Figma Make
Prompts användes för att utforska nya vyer.
04Manuell bearbetning
Jag utvärderade outputen, arbetade vidare manuellt och itererade både design och prompts.
Läs mer om Hemmakväll – ett exempel från processen
Hemmakväll – ett exempel från processen
Vyn hemmakväll blev den största designutmaningen.
Målet var att skapa en mer emotionell och situationsdriven shoppingupplevelse för snacks, filmkväll och spontana köp. Därför fick vyn en mer cinematisk riktning med dark mode, lifestyle-bilder och en mer dynamisk layout.
Den första versionen drog designen längre åt det visuella än jag hade tänkt. Produkterna fick låg prominens, det blev mycket text ovanpå bilderna och rubrikerna blev svåra att läsa.
- Låg produktprominensProdukterna hamnade i bakgrunden.
- Låg läsbarhetText och bilder konkurrerade med varandra.
- Bristande enhetlighetVyn började kännas mer som en streamingtjänst än som en del av Varda.
När jag itererade behöll jag delar av layoutidén, men styrde den närmare Vardas ursprungliga designsystem. Jag tog fram en ny uppföljande prompt och arbetade därefter vidare manuellt med bland annat spacing, CTA-knappar, accentfärg och produktens visuella prominens.
Det blev ett konkret exempel på hur jag använder AI: inte för att ersätta designbeslut, utan för att snabbt utforska idéer som jag sedan behöver utvärdera, styra och bearbeta manuellt.
06Lärdomar från projektet
Varda blev framför allt en lärdom i balansen mellan funktion och känsla. Jag ville skapa en upplevelse som var enkel och lätt att använda, men som samtidigt hade tillräckligt mycket karaktär för att kännas inspirerande.
Arbetet med Hemmakväll-vyn gjorde det särskilt tydligt hur mycket den visuella tonaliteten påverkar hur en tjänst upplevs. Det som såg bra ut på egen hand fungerade inte automatiskt tillsammans med resten av Varda. Jag fick därför arbeta med balansen mellan enhetlighet och dynamik – hur en vy kan få ha sin egen karaktär utan att tappa sammanhanget med resten av produkten.
Jag tar också med mig ett mer nyanserat sätt att använda AI i designprocessen. AI gjorde det möjligt att snabbt utforska idéer, men det var i utvärderingen och den manuella bearbetningen som designen faktiskt tog form.
"Framåt vill jag fortsätta utveckla ett mer systematiskt arbetssätt med designsystem och komponenter, samtidigt som jag utforskar hur AI kan användas som ett kreativt stöd utan att ersätta designerns omdöme."