top of page
BH background.png

project overview

Boba Heaven Redesign 

Redesigning the website for startup company Boba Heaven, applying responsive design.  

duration ⏳

Ten Weeks

role 👩🏻‍💻

UX Designer

project type 🖌️

Redesign 
 

tools 🔧

Figma 
Zoom 
Google Docs

define

problem

Users had an unpleasant experience browsing

There were difficulties regarding readability, navigation, and content placement. 
There was missing content, large areas of white space and an advertisement pop up as users switched to each page. 

solution

Website Redesign 

A more minimalistic feel with clear call to action and UI card design so that users do not feel overwhelmed. 

Simplified sitemap so that users can navigate with ease. 

research

Interview Objectives

  • Gain an understanding of peoples experiences while navigating through Boba Heaven's website

  • What do people like or dislike on the site and their overall feelings towards the site 

  • Determine if people face any challenges while they are on the site

User Interviews

  • I recruited 4 participants to explore Boba heaven's website on both a desktop and mobile phone. I encouraged participants to share their thoughts aloud and asked interview questions as they browsed the site as well​

  • All participants have ordered food and drinks online, and participants age range was from 17 to 48 years old

affinity map

affinity map.png

Analyzing the why 

All users were unhappy with content placement, navigation, an readability. They were overloaded with product options making it difficult to organize their order and it's cost. 

Quotes from interviews: 

"I thought that I could order online here."

-User 2

😟

"The menu is so overwhelming, I wouldn't know how to customize my order"

-User 4

😓

"I feel lost, not sure how I got to this page"

-User 3

🤔

Examples of frustrations:

original site.png

ideation

How can we enhance user experience?

  • How can we organize content and information so that users can navigate the site efficiently and not get lost?

  • How can we improve the accessibility and  functions needed for users to complete an order online without being prompted to order from another site such as door dash and other online platforms?

  • How can we reduce the amount of information so that the company can communicate its messages to users clearly?

  • How can we create a design aesthetic that would invite users to a friendly environment and keep visiting boba heaven?

Mapping out improvement ideas by each page: 

problems and ideas.png

revising the site map 

Before redesigning, users who visited the site felt overwhelmed and confused. They did not feel confident navigating the site, and there was no order online capability from the original site. 

Users wanted to be able to easily order online from the original boba site and  know exactly what they are ordering, the price for each type of product, and the ability to customize their order.  

Most users felt like they would like a clear option between carry out and delivery at their checkout process as well, weather they will be driving to the store's address and picking up, or adding their own address for delivery. 

Original & revised site maps:

ORIGINAL.png

Changes made to pages:

changes made.png

wireframing

Visualizing the solution

During the wireframing process I prioritized implementing solutions for each page stemming from the concerns that users had while browsing. I did this by improving the navigation system, having more clear call to action buttons, designing a more organized menu, and decreasing the amount of white space and blocks of text on the site. 

all wireframes.png

inspiration

Here is an inspiration board that I have used while creating wireframes. Due to there being so many restaurants as well as business displaying products, I was able to find examples for many elements I ended up including in the final design. 

inspo.png

usability testing

Positive feedback was provided for the redesign along with iteration suggestions

Users expressed how they wanted to explore the new "organized and inviting" redesigned site. 

2

Prototypes

User testing was first done on the mobile prototype, followed by the desktop prototype

4

Flows

Browse menu, customize item, order online and checkout

4

Participants

Users who participated in the interviews were invited for usability testing

Overall users had a much more intuitive experience

did it work?

Results by task:

  • 4/4 users used the hero image Call To Action button to browse the companies products and visited each section on the menu. They used the menu bar at the top of the page to switch between sections (mobile & desktop)

  • 4/4 users clicked on an item on the menu and were able to understand the pop up, how to use it in order to make specific customizations to their order such as different ingredients, sizes and quantities (mobile & desktop)

  • 4/4 users were able to read the summary of their order, see the quantity and price, and recognized where they could edit their specific product or go back to the menu to add more items. All users were able to use the order online method and checkout successfully (mobile & desktop) 

iteration

Addressing user feedback

User feedback during usability testing called for adjustments and inspired new designs 

Updated menu options and search bar 

  • Most users 3/4 did not click on the menu arrow in the initial design to see other selections. This called for updating the design to make sure that most of the options were visible right away for the user rather than having more of the options hidden

  • Users preferred buttons to be pill shaped and I added color to the non selected options along with a clearer drop down for other options instead of a horizontal click option, search was moved up 

updated menu.png

desktop

Updated Ui cards for locations

  • 2/4 users did not want to use a drop down to see when the specific locations were open but instead liked seeing if they were open or closed right away with color coded words

  • 3/4 users also wanted to see specific locations on the map and wanted to be able to do so by clicking straight from the specific location of the card that they chose, rather than only using the search bar

  • I added color to the status of business hours for each location along with a 'show on map' option for each location ui card and moved the 'order now' button to the right of the ui card

updated locations ui.png

desktop

Updated product popup Ui card & Menu

  • 4/4 of the users would have liked to see the actual sizes next to the 'small' 'medium' 'large' size options along with each of the specific prices for every size of the product immediately when browsing the menu

  • I enlarged the product popup so that it may accommodate the added features

  • I updated the rest of the selections to match the buttons for consistency

  • I added each of the prices for each size on the menu under the image of the product

updated desktop popup.png

desktop

updated menu ui.png

desktop

Clarified the flow to customize order

  • 2/4 users wanted a more clear way to be able to bring back the pop up that displays the options to customize the order when they are on the order summary page, they did not like the pencil icon

  • I changed the pencil icon to words 'Edit Order' on the UI card so there can be more clarity for users if they would like to customize their order once they are on the summary page

updated mobile product summary.png

mobile

updated product summary.png

desktop

Updated Reviews

  • Users liked looking at the reviews section, however they wanted to be able to look at one review at a time and  be able to control when they see the next customer's review

  • I made a larger section for the reviews written and the ability to click through them, however users then desired to see exactly how many reviews were left and how many they would be clicking through

  • I added numbers as a visual representation on the bottom of the review ui card to let users know exactly where they are in the process of reading the reviews 

updated reviews.png

desktop

Color coded discounts

  • 4/4 users felt like they would be more motivated or more likely to consider an offer when they know how much they will be saving right away, rather than reading into text that looks too similar as a whole

  • In order to save users time while browsing, I color coded the discount on the order summary page so that users can immediately know what their offer is without needing to read the entire text

updated coupon.png

desktop

reflection

How this redesign helped customers & the company 

Customers

  • Created an inviting design with clear Call to Actions 

  • Improved upon the site map, navigation and information organization 

  • Improved upon content placement, white space and use of color & imagery

  • Created the process of browsing for products, customizing them and being able to order online

Company 

Throughout the process my goal was to implement user centered design to enhance the website's usability and conversion rate. By conducting thorough user interviews and usability testing, I have identified key pain points in the customer flow and restructured the site map to streamline navigation.

An organized and responsive ui was introduced to improve accessibility and create a consistent experience on both mobile and desktop devices. Call to actions were optimized and the checkout process was simplified, reducing frustration and increasing user engagement.

Through usability testing and continuous iteration, the new design led to improved task completion rates, and an uplift in customer satisfaction. These UX enhancements contribute to higher conversion rates, ultimately helping the company boost revenue from the redesign.

What I learned 🌱

  • It is best to avoid investing too much time and effort into a design before receiving earlier feedback and  conducting user testing. Designs should always be user centered and iterated based on user feedback, so frequent and early input can be very helpful in a design process. 

  • There are plenty of businesses that users can order online from rather than attempting to navigate a disorganized site. A well structured navigation, site map and informational hierarchy with clear call to actions are all essential parts of a website that produce higher conversion rates and prevent customers from leaving the site due to it being too difficult to navigate, browse products and purchase from.  

Final Design 

bottom of page