TWG Tea
A proposed redesign of an ecommerce website to improve the information architecture and the purchasing experience for target users.
In a nutshell
Project Summary
A proposed redesign of the e-commerce platform of specialty tea retailer TWG to improve the information architecture and purchasing experience for target users.
Role
Product Designer
UX Researcher
UX Methodologies
Heuristic Evaluation
Card Sorting & Tree Testing
User Journey Map
Wireframing & Prototyping
Usability Testing
Timeline
2 Week Design Sprint
July 2023
General Assembly Coursework
Problem & Context
A well-known brand, TWG [insert quick history]. However, its e-commerce website has not kept up with the latest digital trends and services. In an ever-changing digital landscape where brands are quickly revamping their e-commerce experience, a refreshed design and re-look to the needs of users is most vital. [to reword]
Go from design to site with Framer, the web builder for creative pros.
Get Started
Learn More
Intentions for the TWG website
A repository of information, giving website users access to rich information and content on the full range of TWG products without having to come down to the store.
What users actually need
Straightforward product discovery, clear and intuitive navigation, product recommendations as well as efficient checkout processes
Methodology
1. Empathize
The project kicked off with a combination of face-to-face user interviews, initial testing using the existing TWG website as well as virtual card sorting conducted with a total of seven users.
The goal of this stage was to get a stronger sense of the problem space, particularly from the perspective of users of the TWG website.
Our users were 1) at least occasional tea drinkers who had experienced the TWG brand's products or services at least once, and 2) were familiar with making purchases online.
I find it so much better to go down to the physical outlet for recommendations.
I view TWG as a "date idea" or "cafe" concept, better suited for dining out than home use.
I like to buy tea from platforms like Shopee or Lazada when there are sales.
I prefer to buy tea offline due to the sensory experience, like being able to smell the tea.
I don't know much about tea so I prefer to have descriptions that tell me about the tones of the tea.
I rely a lot on recommendations to decide what is good to buy.
I prefer to gift tea bags or packaged teas instead of loose leaves.
The price and packaging are the factors I look out for the most when shopping for teas.
I was once interested in the origin of tea, but it doesn't influence my current choices.
From our virtual card sorting exercises with our users, we learnt users could mostly identify tea by two categories: 1) format of the tea, in terms of how it was packaged during purchase 2) variety (black tea / green tea etc).
Swipe to see an example of our card sorting conducted on FigJam
The key user insights we discovered can be categorised as follows:
As-Is Website Evaluation
Apart from user sentiments on the existing TWG website, we also did an evaluation of the current website.
Insert a carousell
Benchmarking against TWG's competitors
*to reword* A comparative analysis of TWG with key competitors such as Fortnum & Mason, Gryphon Tea, 1827 Clipper Tea showed that navigating TWG's website was more challenging and less functional. Most importantly, the interface does not help drive purchases.
Insert Feature Inventory & Element Analysis
Define
Designing the right thing
*to restructure this section*
Ideate
After identifying the problem space, I constructed a user journey map for both personas to identify opportunities for improvement along the ecosystem of interactions with TWG Tea.
Prototype
Solution 1
Revamped navigation according to user mental models
Solution 2
Rethinking the TWG Tea Connoisseur
Solution 3
Reorganised Gifts Section
Solution 1
Revamped navigation according to user mental models
Solution 2
Rethinking the TWG Tea Connoisseur
Solution 3
Repackaged Gifts Section
Testing
Tree testing was done with users using Optimal Workshop to test the findability of products given the new structure of the website. Users generally found the new I.A. much more intuitive to navigate.
With the high fidelity prototype, I was able to test 3 user flows identified as critical tasks which were problematic in the original website.
Insights from usability testing were applied to three main screens. The dashboard went through several iterations.
As-Is
Original website with 5 categories on the global menu.
Usability Test 1
Content structure, navigation and layout tested with users.
Usability Test 2
Specific UI elements tested with users.
Product Listings Page
As-Is
Images
Usability Test 1
Using competitors as a benchmark.
Usability Test 2
Get inspired by blogs, job openings, events and more.
Next Steps
