Overview

Hi-Tea is a bubble tea (B2C) shop located close to the University of Syracuse in Syracuse, NY. It's renowned for offering refreshing beverages and delicious food to the local student community. The objective was to provide their website with a modern and attractive look, enhancing its visual appeal and user-friendliness.

Problem

The Hi-Tea manager developed the website from the beginning of the store opening. However, he now envisions a more current design that offers easy navigation and enhanced attractiveness. The focus is on transforming it into a modern and visually appealing platform, especially when showcasing the variety of bubble teas.

Solution

My approach was combining user-centric and user-centered design. Such as figuring out and fixing issues users might have, like problems with navigation, made the redesign better. Also, aligning these enhancements with business needs created a balance with the user expectations while meeting strategic goals.

The Research

Before starting on the user research, I interviewed the manager of Hi Tea to try to understand their desired changes for the website and their ultimate goals for the redesign.
These were the keys takeaway:

Updating the menu for a modern UI
Easier navigation within the website
Include simple animations, keeping in mind that the manager will be the one coding the program prefers straightforward and uncomplicated movements.

After gathering the understanding of the desired changes for the website from the Hi-Tea manager, I proceeded to conduct primary user research to gain insights into how users perceived and interacted with the current website. The participants were college students and fellow bubble tea drinkers. This research aimed to provide a better understanding of the user experience and identify areas for improvement.

Competitive Analysis

During my interview with the manager, they mentioned their desire for an ambiance similar to that of Gong Cha, a popular bubble tea shop. To understand the manager's vision, I immersed myself in the experience by navigating Gong Cha's website, documenting my feelings and emotions through an empathy map. This approach allowed me to understand the ambiance and user experience they aimed to replicate.

User Persona

With a clearer grasp of the current website's pain points and a deeper insight into the desired website attributes, I was able to create a user persona that aligns with the intended user base.

Sketch

Moving forward, I proceeded to craft a low-fidelity sketch incorporating all the insights gathered.

Low-Fi Wireframe

After sketching the wireframes, I used Figma to create the low-fi wireframes. Then, I shared the low-fi wireframe with the manager to receive feedback for potential adjustments.
Two key changes emerged:
1) Remove the Instagram icon from the upper right corner
2) Consider the addition of a scroll feature on the menu

High-Fi Prototype

After considering the manager's feedback, I proceeded to design a high-fidelity prototype to better understand how the website would look and function. The design was keep relatively close to the original website by maintaining the same color palette and using similar fonts.

See low-fi prototype

Usability Testing

Afterward, I shared the low-fidelity prototype with the managers to gather their comments and insights. Following that, I initiated the usability testing phase by conducting remote interviews with two users. During these interviews, I posed a series of open-ended and guided questions while they explored the pages, drawing out their feedback, likes, and dislikes.

Some insights from the testing:
Manager‍

On the menu page, implement a pop-up feature for the food items that will display drink descriptions and allow for future image placement.
Likes the animations and seems doable

Users

Eliminate the button in the Gallery as it currently serves no functional purpose
Eliminate redundancy in the business hours information
Menu is straightforward and concise
The animation adds a nice touch, but it could be slightly faster.

With the feedback in hand, I set to work refining the website. On the homepage, I made the menu button more prominent and simplified the contact section to avoid repetition. Over on the menu page, the selection tabs are now uniform in color and added pop-ups to each drink section for more detailed information. The result was a cleaner, more user-friendly site that seamlessly guided visitors to what they were looking for.

Hi-Tea