Tea shop

ROLE

UX/UI Designer

TEAM

Solo project

TIMELINE

3 weeks

SKILLS

UX/UI Design
Target Audience Analysis
Visual Identity
Content Strategy
Prototyping


TOOLS

Figma
Canva
Meta ads
Pinterest

PROJECT

The purpose of this project was to develop a concept for a modern e-commerce store for premium tea. Buying tea online is often overwhelming today, with hundreds of varieties creating friction. The solution was a website with a carefully curated selection. Through a clean and intuitive UX design, I created a secure and reassuring shopping experience for the older target group, while also developing a strong visual identity to appeal to a new generation and challenge other companies in the beverage industry.

RESPONSIBILITIES

I was responsible for the entire concept, from research and personas to a mobile-optimized Figma prototype. The website was designed around the AIDA model and included conversion-focused features such as an interactive “Tea Quiz”.

Beyond the UX design, I created the brand’s visual identity, including moodboards and a color palette. I also designed newsletters and marketing materials to test different expressions with the target audience.

PROJECT SCOPE

  • Development of the customer journey from landing page to completed purchase.
  • Visual identity and brand strategy, including moodboards and color palette.
  • Target audience analysis and creation of data-driven personas.
  • UX/UI design focused on conversion (AIDA model) and reduced friction.
  • Social media and content production.
  • Newsletters and customer communication.
  • SEO strategy and creative solutions for increased organic visibility.

UX DESIGN

Mobile-optimized design created to reduce friction and simplify the purchase journey.

NEWSLETTER

I created newsletters to capture customers’ interest and strengthen the brand.

PROCESS

I started by analyzing the industry and Meta Ads, both to discover which colors and styles are already in use and should be avoided, and to understand who the largest customer group is and which potential customers are not being reached. Based on this, I created two personas, a moodboard, a style guide with selected typefaces and images, a sitemap, and grayscale wireframes.

While creating the wireframes, I chose which elements should be animated and dynamic to give a modern impression without overwhelming the customer, and placed a tea subscription near the top to attract returning customers. Further down, I added a video where someone from the company can introduce the most popular teas, as well as a tea quiz for visitors who find it hard to choose. I began building in mobile before laptop, since most customers shop on mobile.

After that, I began creating social media posts and newsletters. Here I tested different styles that should be A/B tested over time to find the right one.

LESSONS LEARNED

My initial moodboard had to change. After feedback on my prototype, I decided to change the color palette, from an earlier blue to the current, more modern green. Finding exactly the right shade took longer than expected.

The biggest lesson came when I changed my way of working in Figma to use more components and auto layout in order to be more efficient. Although the technical learning curve made the work slow at first, it gave me an invaluable understanding of the value of building a scalable design system.

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.

ROLL

UX/UI-Designer

VERKTYG

Figma
Canva
Meta ads
Pinterest

TEAM

Enskilt arbete

TIDSRAM

3 veckor

ANSVARSOMRÅDE

Jag ansvarade för hela konceptet, från research och personas till en mobiloptimerad Figma-prototyp. Gränssnittet 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.

SE HELA STARTSIDAN HÄR

PERSONAS

Två olika personas för att representera båda åldersgrupperna i målgruppen.

NYHETSBREV

Jag skapade nyhetsbrev för att fånga kunders 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.

LÄS MER OM FALLET HÄR