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.
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.
To streamline the checkout process and navigation schema to improve the customer experience.
My Role: UX Designer, Researcher, UI Designer
Team: Solo Project
Tools: Sketch, Axure, Invision
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.
- Multiple Navigation on home screen
- Important information is presented in a 'Blog' format
- Difficult to navigate through the website
- Extensive product descriptions
- Checkout experience is not intuitive
- Single Navigation Bar
- Hero image features important information
- Clear information architecture
- Concise product descriptions
- Smooth checkout experience
I conducted user interviews to understand who the target audience was and to discover what their online shopping habits were.
7 out of 10 working professionals preferred to do their shopping online.
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
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
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