The Project
The focus of this project was to critique and redesign the information architecture of the Chatime Canada website.
MY ROLE: Information Architect | Researcher | UX Designer
TEAMMATES: Myles Lee | Nancy Lee | Rola Refaat | Suzie Tran Le
TOOLS: Figma | Balsamiq | Mural | Miro | Photoshop
PLATFORM: Web Browser
About Chatime
Chatime is the largest tea franchise in the world with nearly 2,100 locations across the globe. Their mission is to deliver the best quality, innovate, and make customers happy.
From our research, we identified two areas of improvement for the Chatime Canada website: the drink menu and global navigation system.
Research Goal
To assess the effectiveness and efficiency of the information architecture on the Chatime Canada website.
Objectives
Effectiveness
Are users able to complete common tasks?
Do they need assistance?
Efficiency
How quickly can users complete the tasks?
Key Areas of Focus
Drink Menu
The drink menu is poorly organized in terms of its taxonomy, navigational space and choice of labels.
Global Navigation
The global navigation system needs to be reconstructed to reduce redundancy in order to improve usability.
Methodology
Competitive Benchmark
We looked at direct and indirect competitors' websites to see common practices in the industry.
Usability Test
We assessed the effectiveness of the current website by recruiting three participants to complete six common goals.
Card Sort
We evaluated the information architecture of the drink menu by running a hybrid card sort with five participants.
Competitive Benchmark
Despite being the only website without an About section, Chatime has more labels in its global header with 13 categories than the industry average at 8, indicating overcomplexity. The hamburger menu icon is unique to Chatime’s website and unlike its competitors, Chatime did not have a drink category for toppings and bestselling items.
Comparing
Beverage Metadata
Descriptive metadata of beverages that competitors have implemented, but Chatime has not are: price, option to make beverage hot and dietary restrictions.
Configurator
We also looked at related industries for IA inspiration for Chatime to adopt.
Pizza Pizza has an exceptional configurator that visualizes the user building a pizza, reflecting price and calorie changes with each customization.
Usability Test
User Goals
Goal 1: Land on the Chatime website and explore the website for 1 minute.
Goal 2: Find the phone number of your nearest Chatime location.
Goal 3: Find how many calories are in a large honeydew slush.
Goal 4: Imagine you are calorie-conscious, but really like toppings in your drink. Which topping has the lowest calories?
Goal 5: Find how much it costs to replace a lost or stolen Chatime Rewards card.
Goal 6: Find the beverage for the Tea of the Month promotion.
Results
There were two goals that testers had difficulty completing:
Goal 4: Imagine you are calorie-conscious, but really like toppings in your drink. Which topping has the lowest calories?
Goal 6: Find the beverage for the Tea of the Month promotion.
Note: Goal 1 omitted from graph because it generated qualitative data on initial impressions of the website.
Goal 4: Finding Toppings
This task was challenging because the only place the user can find toppings is under Our Drinks > All Flavours. There is no toppings category or search to assist the user.
Goal 6: Finding Tea of the Month
Currently, Tea of the Month can only be found on the homepage, but you need to click a few slides over on the banner carousel to find it.
Card Sort
Using OptimalSort, we conducted a hybrid card sort to assess the effectiveness of the current Chatime Canada drink menu categories against the mental models of its consumers. Five representative users organized thirty cards, consisting of drinks and toppings, into the current drink categories and were able to create new categories if needed.
Results
Findings
- Confused on Signature Milk Tea vs. Flavoured Milk Tea
- Not sure what Specialty Drink meant
- Brown Sugar Pearls, and Juice and Jelly inconsistent
- All participants added a category for Toppings
- 3 people noted drinks should be in more than one group
Drink Menu Recommendations
Current Drink Categories
All Flavours
Signature Milk Tea
Flavoured Milk Tea
Fruit Tea
Specialty Drinks
Jelly and Juice
Matcha
Brown Sugar Pearls
Smoothie & Slush
Proposed Drink Categories
All Flavours
Promotions
Bestsellers
Milk Tea
Latte
Fruit Tea & Juice
Matcha
Smoothie & Slush
Toppings
IA Schematic Redesign
Low Fidelity Sketches
Using our research findings, we sketched a lo-fi prototype of what the new website would look like.
Home
- Removed hamburger menu
- Added "About" to global navigation
- Drop down local navigation to drink categories
Our Drinks
- Updated category labels
- Added search, filter, sort and bread crumbs
Search Results
- Able to search by entering key words
Product Page
- Product page with configurator
- Changes reflected on price, calories and image
High Fidelity Prototype
High Fidelity Demo
Lessons Learned
Understand Information Needs
Before tackling any design, it is important to understand the user's information needs. In the case of information architecture, it is vital to conduct research to identify common user scenarios and adapt information systems to fit the audience's behaviours. For example, are they looking for specific information or are they browsing the website casually?
Mobile First ≠ Neglect Desktop
A hamburger menu in the global navigation header on desktop is a clear sign that this website follows the exact same design as the mobile version. The result was a website with an awkward layout and inefficient architecture that makes sense on a phone, but does not on a larger screen. Although the designer's intention for mobile-first design is justified since most users access the website on their phones, this does not mean that the desktop design should be neglected.
Good IA = Good UX
From conducting the card sort with several people over Zoom, it was apparent that information architecture directly impacts user experience. When users cannot find the information that they need intuitively, they become frustrated and give up on the task. To ensure good information architecture, we should follow the user-centred design cycle; this will ensure that information systems are tested with users and continuously being improved upon.
More Projects
