African Red Tea website redesign
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.
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
Sketch, InVision, Axure, Illustrator, Photoshop
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.
Users want to navigate the website and browse information
Users want seamless checkout process
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 Pages play a significant role on any online business websites. Clear & simpler landing pages would attract more people.
To be a great husband and a father
To start my own accounting firm
To stay healthy
Poorly designed websites & apps
Fluctuating health conditions such as getting cold, allergies
Not enough time to shop
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.
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.
Based on Card Sorting, I was able to clean up confusing navigation of the website.
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.
Product Page Redesigned - High Fidelity Wireframes
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.
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.
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.