Creating a better navigation solution for Hello Boba's extensive menu
UX/UI Designer
Small Business, Responsive Web Design, Prototyping, Storyboarding
.svg){kind=small}
Figma, Iconify, Whimsical, Unsplash
Hello Boba is a local business that I am personally a big fan of. Ironically, I am not a tea person but when I discovered that Hello Boba let’s you customize your own drink, I fell in love!
I wanted to show my appreciation by reaching out to the owner of Hello Boba and was able to get him to agree to meet me. However, he flaked out after I tried to schedule my initial stakeholder meeting with him.
I was slightly defeated when my stakeholder ghosted me. However I had a deadline to reach with UX Academy, so I went ahead and tried my best to create realistic goals based off of my assumptions and learning about other competitors. Obviously, this wouldn’t be the way I would do things, but I had to do what I could with the little information I had.
I wanted to see what were typical features that other boba shop websites had. I found the top performing places in the area.
In order to see what was and wasn’t working for Hello Boba, I conducted several desirability tests. I asked questions on their current boba tea habits and asked them about their impression of the website. The most significant findings I received were:
Hailey is someone who loves getting boba but only gets it once a month due to time and her budget. Because of this, finding the best drink is important to her. Based on these details, I crafted a persona, empathy map, and storyboard that highlights Hailey’s frustrations with unclear menus and the fear of regretting her drink of choice.
After strengthening my persona, I was able to come up with the following problem statement:
“Since Hailey treats herself to boba only once a month due to her budget and busy lifestyle, she needs to be able to visit a comprehensive boba tea website with a clear and organized menu so that she is more satisfied with her drink of choice.”
Afterwards, I used the HMW approach to use a guide to ideate solutions. Here are some that I came up with.
After planning out the task flows and sketching, I went into wireframing. For my low fidelity frames, I made sure to also create how the menus would look. Hello Boba also has an extensive menu. Each category has subcategories which have a list of numerous flavors.
This was the biggest challenge for me, to organize the menu in a clear, uncluttered way. I planned to use a form of an anchor link system as well, so that users could quickly navigate the lengthy menu.
Hello Boba recently had a new logo set by Fiver and their color scheme had already been set up. I was wary about how the current color scheme was clashing (especially with regards to how the colors are used on the current website). However I was able to manage the colors in an effective way by using them as accent colors.
Since I was running low on time, I went ahead and used Maze for the first time for feedback on my mid-fidelity mobile wireframes. The responses were more limited due to the nature of this method, however I did get some insight.
With the feedback I received, I was able to touch up certain aspects of my designs. This included spacing, changing image shapes, etc. The main 4 changes I've made are detailed below.
People expected more context on the home page. I redesigned the hero section by switching it from a basic image to something more eye-catching. I updated the image treatments and styling, a call-to-action button, and another punny hero tagline.
I made more clear CTAs, especially for mobile, by including a button as well as changing the wording so that users have more of an understanding that the website doesn’t have a native checkout process. Clicking on this button will lead to a popup where users can select one of the two locations for pickup orders.
In the navigation, I re-ordered the menu links by priority with online ordering and the menu page as the most important links. Along with this, to make the menu a little less cluttered, I changed the font colors of ingredients for better visual hierarchy.
In my mid-fi frames, I didn’t fully commit to prototyping each anchor link for all devices. I spent about 5-6 hours perfecting my interactions so that the prototype works smoothly. I added more popups, added a scroll to top button, and made sure that the anchor links were functional from each point of the screen.
The majority of my time that I spent on this project was playing with prototyping. I spent hours getting my anchor links to work the way I envisioned. I wanted them to be scrollable, clickable, and sticky.
When you click on a category, the selection will scroll to the section you want. This helps users to navigate the extensive menu a lot faster!
It was exciting to do a real business project even though the stakeholder ghosted me. I learnt a lot with prototyping and also got better with synthesizing my research by drilling into my HMWs, ideation, and empathy map. If I could do this project all over again, I would redo my usability testing and do it in person. I would’ve preferred this way usually if it weren’t for timing issues.
