SpeedEats
Hur får man en matapp att kännas lika oemotståndlig som en krispig pommes?
Kurs
UI Design
Uppgift
Ta fram UI för en expressmatapp med fokus på "to make it sexy" och att skapa ett smidigt och trevligt beställningsflöde.”
Use cases
- Den spontana myskvällen
- Det flottiga bakiskäket
- Den lyxiga helgfrukosten
För vem?
Den som vill laga så lite som möjligt, som gillar att unna sig och som ofta känner "Vi tar allt vi är sugna på!"
Tidsram
ca 2 veckor
Resultat
En snabb, tydlig och visuellt samlad design som gör expressbeställningar smidiga som smör.
1 - bakgrund:
Bakgrund till SpeedEats
Tänk expressmat som en hybrid av Foodora Market och HelloFresh.
Målet var att skapa ett UI för en app där användare kan beställa det de saknar i stunden och få det levererat på runt 10 minuter. Inga storhandlingar, bara direkta behov: “mjölken är slut”, “lättlagad bakismat nu!”, “akut snacksbrist”.
Leveranserna möjliggjordes av cykelbud som plockar varor från små, centrala lager med snabbt tillgängligt och brett sortiment. För att stötta detta behövde appen vara snabb, tydlig och lätt att navigera. Dessutom skulle den erbjuda färdigpaketerade varukit för olika situationer – ungefär som HelloFresh, fast i expressformat.
Min uppgift?
Att ta fram UI-designen från grunden: typografi, färger, spacing, komponenter och en visuell stil som gör upplevelsen lika smidig som leveransen.
2 - resultat:
"“Det här är sjukt jävla bra design rent generellt sett! Allt från den syndiga brandingen genom logon, “the motif” (det drypande fettet och det underbart subtila fingeravtrycket) och den sjukt tajta ikonografin, vidare via detaljer såsom “det tog tyvärr slut”, rabatterade priser (i rött), kompletterande varor som passar in för den specifika tiden mm. Fantastiskt bra gjort!” - Kursens utbildare
SpeedEats
Smidigt, flottigt och syndigt
SpeedEats är ett UI-koncept för en expressmatapp som är designad för snabba, spontana behov snarare än planerad storhandling. Med fokus på tydliga flöden, stark visuell hierarki och ett lekfullt uttryck gör appen det enkelt att gå från “hungrig” till beställt på bara några klick. Resultatet är en upplevelse som omfamnar det lite syndiga i snabbmat - smidigt att använda, flottigt i känslan och precis lagom syndigt.
3 - Process:
The makning of SpeedEats
Från wireframes till ostig expressmagi
Arbetet tog avstamp i färdiga wireframes, vilket gjorde att fokus tidigt låg på uttryck, hierarki och visuell helhet. Jag hade redan från start en tydlig idé om att appen skulle kännas som en plats för lite "syndig" mat: något snabbt, gott och kanske inte helt genomtänkt.
Den känslan fick styra brandingen. Jag ville att uttrycket skulle vara mjukt, varmt och nästan lite ostigt, vilket ledde till valet av en gul primärfärg kombinerat med bulliga, runda och mjuka typsnitt.
Med wireframesen som grund tittade jag även på liknande matappar för inspiration kring struktur, navigering och visuell hierarki. Jag började med att designa en vy i taget och satte tidigt upp en tydlig komponentstruktur i Figma, vilket gjorde det enkelt att iterera, återanvända mönster och skala designen till resterande vyer.
1. Utgå från färdiga wireframes
Varför uppfinna hjulet på nytt? Jag fick wireframes att arbeta utifrån, vilket gjorde att jag kunde fokusera helt på det visuella språket och UI-komponenterna.
2. Rita och skissa upp layouts
I Figma skissade jag upp olika layouter och komponentplaceringar för att snabbt utforska olika visuella hierarkier och flöden.
3. Systematisera och iterera
Struktur för färger, ikoner och komponenter i Figma som jag kunde återanvända och iterera på genom hela designprocessen.
Färger, typografi och spacingskala som speglar varumärket och som begränsar designvalen.
4 - summering:
Insikter & lärdomar
Tydlig branding ger riktning
Att tidigt ha en klar bild av vad appen ska vara och lika viktigt, vad den inte ska vara - gjorde designbesluten enklare genom hela projektet. Det här var ett otroligt roligt case där jag kände mig fri i tolkningen av uppgiften. Konceptet och ledorden syndigt, flottigt och mjukt fungerade som en röd tråd och gav projektet både tempo och tydlig identitet.
Struktur sparar tid och energi
Självklart är det viktigt att först kunna skissa fritt för att utforska idéer utan att fastna. Men genom att arbeta mer systematiskt utifrån UI-principer och använda verktyg som komponenter och återanvändbara mönster fick jag mycket “gratis”. En tydlig struktur gjorde det enklare att iterera, hålla ihop helheten och skala designen utan att tumma på kvalitet.
