Tebutiken

ROLL

UX/UI-Designer

TEAM

Enskilt arbete

TIDSRAM

3 veckor

KOMPETENSER

UX/UI design
Målgruppsanalys
Visuell identitet
Innehållsstrategi
Prototyparbete

VERKTYG

Figma
Canva
Meta ads
Pinterest

PROJEKT

Syftet med detta projekt var att ta fram ett koncept för en modern e-handel för premiumte. Att köpa te online är idag ofta överväldigande med hundratals sorter, vilket skapar friktion. Lösningen blev en hemsida med ett noga kurerat utbud. Genom en stilren och intuitiv UX-design skapades en trygg köpupplevelse för den äldre målgruppen, samtidigt som en stark visuell identitet togs fram för att attrahera en ny generation och utmana andra företag inom dryckesindustrin.

ANSVARSOMRÅDE

Jag ansvarade för hela konceptet, från research och personas till en mobiloptimerad Figma-prototyp. Hemsidan designades utifrån AIDA-modellen och inkluderade konverterande funktioner som ett interaktivt ”Te-Quiz”.

Utöver UX-designen formgav jag varumärkets visuella identitet med moodboards och färgpalett. Jag designade även nyhetsbrev och marknadsföringsmaterial för att kunna testa olika uttryck mot målgruppen.

Projektets omfattning

Utveckling av kundresan från landningssida till genomfört köp.
Visuell identitet och varumärkesstrategi, inklusive moodboards och färgpalett.
Målgruppsanalys och framtagning av datadrivna personas.
UX/UI-design med fokus på konvertering (AIDA-modellen) och minskad friktion.
Sociala medier och innehållsproduktion.
Nyhetsbrev och kundkommunikation.
SEO-strategi och kreativa lösningar för ökad organisk synlighet.

UX DESIGN

Mobiloptimerad design skapad för att minska friktion och förenkla köpresan.

NYHETSBREV

Jag skapade nyhetsbrev för att fånga kundernas intresse och stärka varumärket.

PROCESS

Jag började med att analysera branschen och Meta Ads, både för att upptäcka vilka färger och stilar som redan används och bör undvikas, och för att förstå vilken den största kundgruppen är och vilka potentiella kunder som inte nås. Utifrån det skapades två personas, en moodboard, ett grafiskt styrdokument med utvalda typsnitt och bilder, en sitemap och gråa wireframes.

I wireframe-skapandet valde jag vilka delar som ska animeras och vara rörliga för att ge ett modernt intryck utan att överväldiga kunden, och placerade en te-prenumeration högt upp för att få kunder som återkommer. Längre ner lade jag till en video där någon från företaget kan introducera de mest populära teerna och ett te-quiz för besökarna som har svårt att välja te. Jag påbörjade byggandet i mobil framför laptop, eftersom flest kunder handlar på mobilen.

Sedan påbörjades skapandet av inlägg till sociala medier och nyhetsbrev. Här testade jag olika stilar som bör A/B-testas över tid för att hitta rätt.

LÄRDOMAR

Min initiala moodboard fick ändras. Efter feedback på min prototyp valde jag att byta färgpalett, från en tidigare blå färg till den nuvarande mer moderna gröna färgen. Att hitta den absolut rätta färgnyansen drog ut på tiden.

Den stora lärdomen var när jag ändrade mitt arbetssätt i Figma till att använda fler komponenter och auto layout för att bli mer effektiv. Även om den tekniska inlärningskurvan initialt gjorde arbetet trögt, gav det mig en ovärderlig förståelse för värdet av att bygga ett skalbart designsystem.

Tryck för att läsa mer om fallet!

TEBUTIKEN

Att köpa te online är ofta överväldigande med hundratals valmöjligheter. Genom datadrivna personas och en utvecklad kundresa togs ett koncept fram för en modern e-handel med kurerat utbud. Resultatet är en intuitiv UX-design som skapar trygghet för den äldre målgruppen, och en visuell identitet som attraherar en ny generation.