ART_Logo.jpg
 
 

African Red Tea, (ART) is a specialty herbal tea shop featuring rooibos tea products with distribution capabilities in both digital and brick & mortar marketplaces. ART has been building it's brand by serving the world its brand of Rooibos tea since 1999.

 

 

The Problem

ART has neglected it’s online presence and is looking to redesign it's website in order to stay competitive and to continue to attract a loyal following.

 
 

The Goal

To streamline the checkout process and navigation schema to improve the customer experience.

The Project

My Role: UX Designer, Researcher, UI Designer
Team: Solo Project
Tools: Sketch, Axure, Invision
Platform: Desktop

 
 
 

Discovery

 
 

Research

I began my process by conducting a heuristic evaluation, C&C Analysis and a Feature Comparison exercise to determine how I should approach the redesign.

 

C&C Analysis

 
ss_ART_Home.png
  1. Multiple Navigation on home screen
  2. Important information is presented in a 'Blog' format
  3. Difficult to navigate through the website
  4. Extensive product descriptions
  5. Checkout experience is not intuitive
Teavana1.png
  1. Single Navigation Bar
  2. Hero image features important information
  3. Clear information architecture
  4. Concise product descriptions
  5. Smooth checkout experience
 
 

Feature Comparison

 
FeatureComparison.jpg
 
 

 

User Interviews

 

I conducted user interviews to understand who the target audience was and to discover what their online shopping habits were.

 
 
 

Shopping Preference

 

7 out of 10 working professionals preferred to do their shopping online.

 
My last online shopping experience was... convenient! It was efficient and easy
— Joseph C., Frequent online shopper
 
 

Persona

Based on the data acquired during the discovery phase, I developed Jeff Smith to represent the target audience for African Red Tea.

 

JEFF SMITH

 
JeffSmith_V2.png
 
 

 

Define

 

Now that I had a user to design for, I proceeded by creating a site map for the existing website

 

Existing Site Map

existing_sitemap.png
 
 

Card Sorting

By performing card-sorting exercises with some users, I was able to narrow down the primary navigation to 5 categories down from 7.  The secondary navigation containing the account creation links were also reduced to 2 from 6 by condensing everything into 'My Account' and a simple 'Bag' Icon.

New Site Map

new_sitemap.png
 
cardsort_gif.gif
 
 
 

User Flow

User flow with the goal of purchasing one bag of loose leaf rooibos. 

User flow with the goal of purchasing one bag of loose leaf rooibos. 

 
 
 

Journey Map

User Journey - Page 1.png
 
 
 

 
 

Design

I used paper prototypes to validate my user flows and found some key insights on what users expect to see when performing specific actions.

 
 
 
20170922_015727.jpg
ART_Paper_Prototype.jpg
 
P2_Wireframe_gif.gif
 
 
 
 

I learned that most users expected to see a notification of some kind and a cart that would indicate how many items they had put into their carts.

 
 

Notification overlay appears to notify users that their purchase has been added to cart

Dropdown and quantity appears when items are added to "Bag"

Dropdown and quantity appears when items are added to "Bag"

 

High Fidelity Prototype

 
 

Feedback

 
 
P2_Feedback.jpg
 
 

Next Steps