iPad Pro 9.7 Dark Mockup.jpg

African Red Tea website redesign

THE CHALLENGE

 

African Red Tea store has dedicated followers with tea's uniqueness in taste and our client has one of the best quality products. But they have a hard time spreading the words because of their poorly designed e-commerce website.

 
 

THE GOALS

 
 
  • Create streamlined checkout process

  • Redesign the website the way it would attract cutomers

  • Understand users’ behaviors, goals and motivations when purchasing tea online.

 

My role in group

  • UX/UI designer

  • Researcher

  • Information Architecture

Tools

Sketch, InVision, Axure, Illustrator, Photoshop

Category

e-commerce website

Timeframe

2 week

 
 

DEFINE

 
File_000(2)_01.jpg
 
 

Heuristic Evaluation

Heuristics Evaluation_ReaTea_Graph-03.jpg

Analysis of African Red Tea online e-commerce store was needed to identify people's pain points while using the website. Analyzing current website allowed me to identify key problems the users are experiencing. It helped me further define users' wants/needs.

Key Insights

  • Users want to navigate the website and browse information

  • Users want seamless checkout process

C&C Analysis

Feature Comparison

I conducted feature comparison of E-commerce tea online stores in order to understand their business models. Learn from competitors and be better are my approach to better redesign the broken African Red Tea online store.

Landing Page Comparison

Landing Pages play a significant role on any online business websites. Clear & simpler landing pages would attract more people.

Persona

Sung Kim  Age: 40  Occupation: CPA

Sung Kim

Age: 40

Occupation: CPA

I don’t have time to go to the store to buy tea.

Goals

  • To be a great husband and a father

  • To start my own accounting firm

  • To stay healthy

Frustrations

  • Poorly designed websites & apps

  • Heavy workload

  • Fluctuating health conditions such as getting cold, allergies

  • Not enough time to shop

Journey Map

As users went through the website to browse and purchase tea, the mood got worse. I discovered users are frustrated because they couldn't see the images of tea and navigation of the website was messy.

 
 

REDEFINE

 
 

Card Sorting

File_002(1).jpeg

Card Sorting was performed after interviews to observe how users like to have e-commerce website should be structured for tea website. Open & closed Card Sorting helped me further understand what users' wants/needs are.

Open Card Sorting

Closed Card Sorting

Site Mapping

Based on Card Sorting, I was able to clean up confusing navigation of the website.

Current Site Map

Redesigned Site Map

 
 

DEVELOP

 

Low Fidelity Wireframes + Test + Iterate (hand sketch & paper prototype)

Based on user research results, we started identifying users' pain points.

 
 
 
 
 
 

Landing Page (Old & New) - High Fidelity Wireframes

Clear global navigation and visible product information help users to navigate around the website easier and engage users.

 
 
RedTea_LandingPage_Comparison_01-01.jpg
 
 

Product Page Redesigned - High Fidelity Wireframes

 
RedTea_ProductPage_Comparison_01-01.jpg
 

Checkout Process Redesigned - High Fidelity Wireframes

During checkout process, removing access to other navigation is a logical choice for the business so that users can go back to the website when done purchasing.

 
 
 
 
 
 

Key Learnings

  • Clear CTA helps users to take action while the website. Users react positively of new tea cup as shopping cart.

  • Tea lovers are everywhere. Why limit your business to local sales? New website will set up user's own e-commerce tea store to expand her potential, increase sales and grow brand.

 

What's next?

  • More user testing on how people might use this app, and how the interface should change based on their behaviors.

  • Improve sales by social media connectivity.