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. 




Are users able to complete common tasks?

Do they need assistance


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. 




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.



Beverage Metadata

Descriptive metadata of beverages that competitors have implemented, but Chatime has not are: price, option to make beverage hot and dietary restrictions. 




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.



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.




  • 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
Brown Sugar Pearls
Smoothie & Slush

Proposed Drink Categories

All Flavours
Milk Tea
Fruit Tea & Juice
Smoothie & Slush



IA Schematic Redesign



Low Fidelity Sketches

Using our research findings, we sketched a lo-fi prototype of what the new website would look like. 


  • 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 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

Using Format