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





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

  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
  1. Single Navigation Bar
  2. Hero image features important information
  3. Clear information architecture
  4. Concise product descriptions
  5. Smooth checkout experience

Feature Comparison



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


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







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


Existing Site Map


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


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



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


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




Next Steps