UX/UI E-commerce User flow

Auro

Design av ett e-handelsflöde för ett friluftsvarumärke med fokus på tydlig navigation och smidig checkout.

Auro — laptop mockup

Auro är ett konceptprojekt där fokus låg på att integrera ett användarvänligt e-handelsflöde för ett friluftsvarumärke. Projektet utformades för hela köpresan, från startsida och produktlistning till produktdetaljer och checkout. Målet var att skapa en tydlig, smidig och trygg användarupplevelse för både desktop och mobil.

Problem

Hur kan användaren enkelt hitta produkter och genomföra ett köp utan onödig friktion?

Lösning

En tydligare e-handelsstruktur från produkt till köp, med fokus på enkel navigation och trygg checkout.

Idégenerering

Skissarbete

I ett tidigt skede handskissades wireframes och layoutalternativ för produktlistning, produktkort och checkoutflöde. Fokus låg på att skapa ett tydligt och konsekvent e-handelsflöde som guidar användaren naturligt vidare.

Auro — skissarbete

Användarflöde

Ett användarflöde togs fram för att kartlägga vägen från startsida till genomfört köp. Flödet hjälpte till att identifiera tydliga navigationssteg och definiera de viktigaste momenten i köpprocessen.

Auro — användarflöde

Mid-fidelity wireframe

Wireframes togs fram i Figma för att strukturera innehåll och layout visuellt innan UI-designen påbörjades. De användes för att testa flöde, hitta och lösa navigeringsproblem tidigt i processen.

Auro — mid-fi skiss

UI-design

UI

UI-designen skapades med fokus på enhetlighet, tydlig visuell hierarki och konsekvent användning av färg, spacing och komponenter. Målet var att skapa igenkänning och ett lättnavigerat gränssnitt.

Auro — färgpalett
Knapp Filter Label Minus plus knapp Pil

Lärdomar

Resultat & Reflektion

Projektet resulterade i ett responsivt e-handelsflöde för desktop och mobil som kombinerar en estetisk visuell upplevelse med tydlig produktinformation och smidig navigation.

Arbetet gav fördjupade kunskaper kring informationsarkitektur, visuell hierarki och interaktivt prototyparbete i Figma. Jag stärkte mina kunskaper inom användarflöden, wireframing och att ta ett designbeslut baserat på UX-principer snarare än enbart estetik.

Fler case