Wayfarer
| Role
UI Designer
| Skills
Research
Figma
Responsive Design
| Timeline
2 weeks
Overview
Tisane, a local boba shop, is seeking a comprehensive redesign of their website to enhance its appeal and provide users with a more informative experience. Tisane's website has not been consistently maintained or updated to reflect the growth and evolution of the brand. As a result, the website no longer aligns with the shop's dynamic identity, vibrant offerings, and commitment to delivering a modern and enjoyable customer experience. The primary focus of this project will be to revamp their menu page, ensuring it is user-friendly, intuitive, and visually engaging.
Problem
The current menu page consists of a simple, long list of menu items accompanied by brief descriptions.
On mobile devices, the same design is replicated, resulting in an extended scrolling experience that further detracts from usability.
Solution
-
Discover the key elements that make a menu screen effective and engaging
​
-
Redesign the menu screen to create a more user-friendly and efficient experience that reflects the brand's true essence and appeals to its customer base
​
-
Ensure responsiveness across multiple platforms
My Role
-
UI/UX Designer ​
​​
Gathering Feedback
What are the key elements to an effective and engaging menu screen?
To identify the key components of a successful menu, I conducted interviews with five participants, aged 21 to 24, all of whom were Tisane customers. These interviews provided valuable insights into their preferences, pain points, and overall expectations for an enhanced menu experience.
.png)
Conducting Competitor Analysis
What are other boba shops doing that works?
After gathering insights from user interviews, it was essential to conduct a competitor analysis to benchmark industry standards, identify effective design strategies, and uncover opportunities to differentiate Tisane's menu experience.
Opportunity Areas
-
By adopting modern design trends and features found in successful boba shop websites, Tisane can enhance its appeal and attract customers who value a visually engaging and user-friendly online experience.
​
-
​Incorporating interactive elements, such as animations, customizable drink options, or a "favorite drinks" feature, can encourage users to explore the menu and stay on the website longer.
​
-
With phone usage being the most common access point, optimizing the mobile UI can significantly enhance the user experience, leading to increased accessibility and engagement.
​
-
Adding detailed descriptions and nutritional information provides valuable information that users actively seek, positioning Tisane as transparent and customer-centric.
​
-
Organizing the menu with tabs can help customers quickly find their favorites while also drawing attention to exclusive options.
POV Statement
I’d like to explore ways to help indecisive customers explore different drink options by improving the menu interface, making it more informative, intuitive, and visually appealing.
HOW MIGHT WE enhance the user experience on Tisane’s menu page so that customers can easily navigate through drink options and make informed decisions in their selections?
Information Architecture
User Flow
It was important that the structure and layout of the menu screen aligned with user expectations to ensure a seamless and intuitive browsing experience. By prioritizing logical navigation and clear organization, the design aims to make it effortless for users to explore and select menu items.
​
Additionally, many locals in the area are not completely fluent in the English language, so providing language options for the menu was crucial to ensure accessibility and inclusivity. This would allow a wider range of customers to navigate the menu comfortably.
.png)
Developing the Low-Fidelity Wireframe
A modernized and info-packed platform
The low-fidelity wireframe for Tisane’s improved menu was tested with five participants to assess web responsiveness, intuitive navigation, and overall user satisfaction. Feedback was collected to identify areas for improvement and ensure that all design aspects met user needs effectively.
The test was conducted on the low-fidelity prototype in a moderated Zoom call. Users were asked to interact with both the mobile and desktop prototypes on the following tasks:
-
Task 1: Navigate through the page and browse through the Menu
​
-
Task 2: Find the product Lil Orange and learn more about the drink
-
Users liked the interface’s simplicity and the ease of navigation with the tabs, menu, and footer.
​
-
They also appreciated the various language options when it came to menu selection since the store is located in an area that is majority Vietnamese and Mexican.
​
-
Users responded well to the additional information added such as the ingredients list and nutritional facts.
PROS
-
While there were no errors when it came to misclicks and completion rate was 100%, I noticed that time spent on each page went fairly fast and users did not spend a long time looking at the product description page.
​
-
Some users did not realize that the menu was clickable until it was indicated while I was telling them the task.
​
-
There were also a few suggestions that users would’ve liked to see that would further enhance the UI such as adding more visual content and description details.
CONS
Developing the High-Fidelity Mockup
A night-club and urban-inspired aesthetic
Tisane customers are passionate about the taste of their drinks. When they find a flavor they enjoy, they tend to return regularly, demonstrating strong brand loyalty. Customers also value the vibrant culture and atmosphere at Tisane, which features a nightclub vibe and holds strong popularity among local students.
​
The shop’s unique branding, which blends a trendy, social environment with high-quality boba drinks, creates a memorable experience that keeps patrons coming back. The new menu screen had to reflect this energy, capturing the edgy, nocturnal atmosphere that defines Tisane. By incorporating deep, rich colors, sleek designs, and bold, modern typography, the updated menu exudes a mysterious and captivating vibe that aligns with the shop’s nightlife-inspired brand.
