Online Ordering Website
Chatime is a popular bubble tea chain that offers wide variety of drinks and introduces the Taiwanese drink to clients all over the world. The website, however, was facing usability issues that led to a decline in user satisfaction and engagement. Our goal was to redesign the website, improving its UX/UI to provide a seamless, intuitive, and enjoyable experience for users, ultimately increasing user retention and satisfaction.
UX Designer/Researcher
User Research, UX Design, Visual Design, Prototyping and Testing, Pitching
Figma, Miro, Trello, Illustrator
UX/UI Design
School Project
November - December 2023 (7 weeks)
Challenge
The goal is to redesign an interface which addresses accessibility, creates a cohesive user experience, and is consistent with Chatime's other websites. We want to improve customer acquisition through responsive website and mobile interface.
How Might We… design a better user experience that targets discoverability, cohesive design and accessibility?
Results
We decided to create features that would enhance the experience and allow customization.
Flavor Profiles: Indicates the flavour, type and temperature, so you can choose the best drink based on preference. Also allowing alternatives for any allergens.
Tea of the Month: Recommendations for user's to try if they are uncertain which drink to pick
Filter Menu: No need to scroll through all 50 drinks, allows you to be more efficient when ordering.
Customize your drink: The ability to adjust size, toppings, ice level, sweet level, milk type and more.
Suggested Drink: Don't have to go back to the home page, can add a preset drink right in your cart.
SSO: no need to spend time creating an account, use SSO for easier login.
Interested? You can check it out for yourselves right here:
Ordering bubble tea should be quick, easy and seamless…
Chatime's problem is that it doesn't provide a consistent online ordering process across their regional websites.
This creates a lack of trust in the brand, which leads to a decrease in conversion and onboarding. The ineffective presentation prevents users from information acquisition, frustrating potential users navigating the website for the first time. Overall, this problem can affect potential sales.
Our Goal: create an interface that addresses all these issues and improve the user experience, while establishing Chatime's global presence. We focused on 3 issues:
Our Design Process starts with the users.
The success rate of a redesign is measured on user feedback and functionality. We asked users about their experience ordering bubble tea either in person, or online and this is what they had to say:
By understanding user's pain points, we were able to create a user persona to help us map out the flow of the app and the customer journey. Meet Josh; a bubble tea enthusiast.
We also created a user flow based on our user's goal: to order bubble tea on the website for pick up in store. Although our product can be designed for delivery and pickup, we focused on pick-up for this flow.
Reshaping the tea industry and the user experience…
Before we could get into the redesign, we wanted to conduct some user research on Chatime's current website. We found that other regional websites all had a different type of style, and arranged their content differently.
Aside from studying competitors, I wanted to conduct a heuristic evaluation on Chatime's current website, to pin point areas we needed to improve based on importance.
Ideate, Prototype, test and ideate again.
As a team, we split up the different screens and sketched out an ideation that matched the user flow of ordering a drink online.
Our intention when creating the low fidelity is to create all of our assets ahead of time, and map them out so we can envision what the high fidelity prototype would look like. This saves us time on designing, and focus more on fixing what the product needed, and implementing user feedback from the usability tests.
Designing for bubble tea enthusiasts…
We wanted to design a user experience for bubble tea drinkers themselves. We collected data from 3 participants, and conducted usability testing on our low-fidelity prototype. And this is what we learned:
Flavour Profiles
Users loved seeing what goes into certain drinks, and its temperature. It gives a quick and concise overview of what to expect. However, including allergens and milk options would be great as well.
Continue Shopping
Users expressed they would love the ability to keep shopping while they are in their cart before checkout, instead of having to go back to the homepage.
Dropdown Error
Some drop downs did not reflect information accurately, or they required more steps to select things.
Keeping this in mind, we made changes to the high-fidelity to reflect these changes, and altered the flow of our prototypes.
The future of the tea industry is closer than you think.
New Home Page:
Instead of boxed elements, we decided to use the new design language, and implement curves and waves to mimic the texture of bubble tea, and to emit the playful language of Chatime's branding.
First, we wanted to create consistency in the header for both mobile and desktop, and display content visually to not only educate users what goes into a drink, but easy way to order without trying to find the menu in the side bar.
We also added an interactive map that displays the different locations near you, and the website also displays which locations are open, the store's hours and distance, as well as rating and reviews. The location bar is optimized to be changed by a click of a button as well.
For the drink menu, we used a card system to display the different drinks with it's respective flavor and temperature profiles. We also used a simple filter system, to allow customers to easily find the type of drink they want without endlessly scrolling. We also promoted Chatime's main feature on the landing page — Tea of the Month, to display recommendations for user's who are unsure what drink to get.
For the product page, we created a drop-down menu that allows the customers to see what is in the drink, and prioritize customization where they can change and alter the drink as much as they like. This means being able to change size, ice and sugar levels, milk options and toppings. The price is automatically updated and reflected in the total, and they can add it immediately to their cart.
Check out is now made easy with the ability to edit your cart and add drinks right away without ever having to go back to the main page. We added a suggestion drink with preset options for users to immediately add to cart and guarantee a faster checkout experience.
Account creation is now made simple at the user's convenience. Never having to worry about a customer username and password, when we adopted a SSO approach instead. Now users can save their login with the remember me box, and choose their preferred sign in method: Google, Microsoft or their Apple ID.
The evolution of Chatime… goodbye yesterday, hello future.
Before designing the new prototype, we needed to establish what Chatime's brand and style was. We looked at the values and created descriptors to explain what our design style language would be. Since we could not have Chatime's direct branding style guide, we found a franchise brochure and cross-referenced that with the existing website to find colours, patterns, text styles and imagery.
Designs are never truly "finished"
Great designs are always made with users in mind. And the best results are from users themselves. Given the short time frame, I would love to go back and conduct more user testing, implement new features and improve on the flow of the website. I definitely would love to explore the usage of different software and build upon skills to create more interactions and animations.
Accessibility is also very important when navigating a product, and a website. I want to learn more about WCAG 2.0 audits, and implement other features to create an accessible product that many types of users can benefit from.
I would love to add a chat bot to the website for FAQs, and delve more into Chatime's reward's program. Something we didn't have time for was exploring alternate payment methods, and designing a through user profile.
Lessons I've learned is that it's not about making something aesthetically pleasing, but allowing the data from the users guide the design.
It was a great opportunity being able to work with different designers who had different skill sets. I think this project really came through due to strong leadership, communication, work ethic and collaboration. Although we may not have been able to seen metrics of success rates of the redesign, our testing with participants showed us results from improvement of flow, design and layout. It was a great experience learning how to make responsive websites and learning about design via Figma.