Bubble Bee

    Responsive Web Design for a local business

    My Role: UX/UI Designer: UX Research, Information Architecture, Visual Design, Interaction Design, Usability Testing

    Client: Bubble Bee, local bubble tea store

    Team: Self-directed (with expert mentor support and group crit feedbacks)

    Prototype: View prototype in Invison

    Time: 80 hours over 4 weeks, June-July, 2019

    About the project

    Background

    Bubble Bee is a locally owned and operated business in Arizona that sells the popular Asian Bubble Tea drinks, served in their unique fat cups. Bubble Bee strives to be different from other local boba shops so they offer a wide variety of 70+ drink combinations with unique flavors and hot bubble tea drinks. The business also emphasizes the importance of their quality USDA approved quality organic ingredients.

    The Challenge

    • Bubble Bee wants to create a fully responsive website where customers can learn about them, can get information about their products and online ordering options.
    • Develop or extend coherent branding that aligns with the shop’s current and/or desired customer experience.

    Process

    01.Research

    Goal: To research the current position of the business and its customers

    Process: Market Research, Competitive Analysis, User Interviews

    Market Research

    I conducted market research first to gather information about the business and the bubble tea industry itself by relying on market analysis forecast reports, demographics articles and reports about current trends as well. The research showed how most customers research online before choosing a boba shop to visit because there are many bubble tea places with the same offerings. This is a great opportunity for Bubble Bee to have a website where they canshare their organic & more unique approach to the bubble tea drinks and with that attract more customers by estabilishing a stronger online presence and emphasizing how they stand out of the crowd.

    INDUSTRY & STATISTICS:
    • Bubble tea market is expected to see a tremendous growth and reach approximately to 10976 million USD by the end of 2025
    • U.S. accounts for more than 97% of the North American market
    • Price ranges between $3-$6 in the U.S , depending on cup size
    • Excess of sugar content in these drinks leading to health issues, which restrains the market growth
    • The green bubble tea segment is estimated to be the most lucrative segment from 2017 to 2023 - health benefits such as prevention of cancer and cardiovascular diseases
    • Bubble Tea shops in bustling locations can expect to sell more than 1,000 drink orders a day

    TRENDS:
    • Mobile ordering and payment processes are beginning to make a presence
    • Most customers—82%—conduct research online before choosing a boba shop to visit
    • 74% of domestic trips are for leisure purposes
    • Delivery services through Grubhub, Postmates or Doordash is becoming more and more popular among bubble tea businesses
    • Promotion through social media channels (Facebook, Instagram)
    • Adjusting sweetness level of bobas and using healthier and fresher ways of making the drinks have been popular

    DEMOGRAPHICS:
    • Appropriate for all ages but primarily targeted towards younger consumers: 20s - 30s
    • Middle-class and above
    • Asian-American people primarily as they have more likely have had exposure to boba products before
    • Asian influence on the industry is high

    CONSUMER BEHAVIOUR FACTORS:
    • Convenience of ordering, consuming the product and leaving
    • Social media presence
    • Atmosphere of the store (noise, interior design, music)
    • Quality of drinks and boba pearls
    • Promotion through social media channels (Facebook, Instagram)
    • Adjusting sweetness level of bobas and using healthier and fresher ways of making the drinks have been popular

    Competitive Analysis

    I looked into who the competitors of Bubble Bee are to understand the industry standards by pointing out the strenghts and weaknesses of direct and indirect competitors. I developed an understanding of how other bubble tea websites design for their users and how they solve problems for similar user needs. I chose the direct competitors by searching for other popular local shops in the area that sell bubble tea and/or have similar concept to Bubble Bee. As for indirect competitors, I chose businesses that sell similar yet different products, but satisfying the same user needs.

    User Interviews

    To further investigate what I knew so far, I conducted user interviews as my primary research method to gather qualitative information and empathize with customers. I interviewed 5 people in person at the Scottsdale location of Bubble Bee. I asked open-ended questions about their experiences with Bubble Bee both online and offline, how they generally go about searching for bubble tea shops, why they decided to choose Bubble Bee and their way of placing an order as well.

    View Interview Script

    Interview Participants

    • Number of interviewees: 5
    • Gender breakdown: 4 females, 1 male
    • Age: 20-39
    • Criteria: Have been to Bubble Bee before at least once
    • Location: Bubble Bee at Scottsdale Quarter Mall
    • Interview lenght: 10-15 minutes / person

    02.Define

    Goal: Synthesize research to define the target audience - and their needs, frustrations, goals

    Process: Empathy Map, Persona, POV Statements & HMW Questions

    Empathy Map

    Next, I started to organize all the observations and information that I gathered during the 1:1 interviews and created an empathy map. I wrote key findings on sticky notes from each participants and organized them into categories (doing, thinking/feelings, hearing, seeing, pains, gains) then was searching for patterns across the notes and grouped those further based on recurring patterns I identified across the answers. Based on the insights, I could identify the user needs of the customers of Bubble Bee.

    Insights:

    • Customers are curious about the menu prior visiting.
    • Customers find it hard to choose a drink out of the many.
    • Customers are looking for quality products.
    • Customers find it out about the business from offline resources.

    Needs:

    • Customers need to check online what the store has to offer.
    • Customers need recommendations on what flavors are popular.
    • Customers need to be informed about the srouce of key ingredients.
    • Customers need a way to validate their desire to go.

    User Persona

    I created a persona - called "Amy" - based on the empathy map, who represents the key audience of Bubble Bee. I took needs directly from the empathy map findings and the information placed in each sections are based on the interview conversations and the empathy map. I was able to establish the ideal type of users whom I will primarily be designing for.

    POV Statements & HMW Questions

    I defined the core problems of users by creating POV Statements to start the ideation process in the right direction. I took the insights and needs from the research findings, to be more precise, from the empathy map after having synthesized my findings and created the POV statements with the combination of our persona (Amy), insights and needs. Based on the POV statements, I could phrase the HMW questions that helped me to start my brainstorming process about how I could solve the problems of Amy that I defined.

    03.Ideate

    Goal: To generate ideas about the information architecture, website features and user flows

    Process: Business & User Goals, Product Roadmap, Sitemap, Task Flow, User Flow

    Strategy: Business & User Goals + Product Roadmap

    To help achieve business stated goals with the experience of the product, I had to focus on the UX strategy plan first. Defining the UX strategy involved planning the requirements around both the user goals and the stakeholder business strategies. I identified the shared goals of the business and the user in order to make better design decisions. Then to communicate our UX strategy, I put together a Product Roadmap document, which is a high level strategic document. I prioritized the user goals and identified features that could help meet user goals and solve the problems. View Product Roadmap.

    Information Architecture: Sitemap

    Moving forward, based on the product roadmap and research findings, I created the sitemap of the website to have the content organized and to visualize how the information can be structured. The main pages are indicated with the dark grey colored boxes while the yellow ones indicate the subpages. I researched how the competitors of Bubble Bee built their websites and I decided to have ours built in a similar and simple way to help users navigate through the website efficiently.

    User Flow

    I created a User Flow diagram to visualize how Amy can complete different tasks in different ways to achieve her goals and how she would navigate through the website. I created two scenarios for Amy based on research findings and built flows including site pages, decision points, actions and external pages. Since one of Amy's needs is to check what the store has to offer prior visiting, I focused on this particular task first. She wants to check the menu and find a drink that she would enjoy consuming. Another task includes two other needs of her, which are to find out the source of key ingredients and to validate her desire to go. These needs can be satisfied by completing the given task in Scenario 2. .

    Task Flow

    Then I created a Task flow to map out the user journey for a single key task, which was to find a drink to order. This task would be completed most likely the same way by the majority of the users. Both the user flows and task flows are needed to create a better user experience for customers and guranatee a perfect flow for them.

    04.Design

    Goal: To design responsive mid-fidelty wireframes

    Process: Low-fidelity Sketches, Mid-fidelity wireframes

    Low-fidelity Sketches

    After I have identified the key pages that were needed to be designed in order to help Amy achieve her goals and tasks successfully, I sketched out the layout of the main pages before going digital. These are the low-cost low-fidelity wireframe sketches with annotations to explain certain elements.

    Mid-fidelity wireframes

    Next, I digitized the wireframes in Figma and had them as visual guides that represents the skeletal framework of the pages of Bubble Bee. I designed the responsive versions of the homepage, about page and menu page to show how they will look like if the user is browsing the website on tablet or mobile phone. Responsive design makes sure that the Bubble Bee’s website is easily usable across different devices and browsers.

    05.Mid-fidelity Prototype

    Goal: To build an interactive prototype that can be tested by users

    Process: Mid-fidelity wireframes, Prototype in InVision

    Mid-fidelity Prototype

    When I finished the mid-fidelity wireframes, I put together a limited-functionality prototype to be able to test the website as it is with users to uncover pain points and see what works well or doesn’t work well up to this point. You can interact with the prototype below by clicking on the button under the prototype image.

    06.Usability Testing, Iteration, UI Design, Prototype

    Goal: To test how well the prototype solve the problems, improve usability based on results and develop high-fidelity wireframes

    Process: Usability Test on Mid-fidelity prototype, Affinity Map, Branding, High-Fidelity Wireframes + Prototype , UI Kit

    Usability Test

    I started the Usability Test by creating a Test Plan document to guide me during the usabiliity test and to know how to go about the process and then I conducted in person usability testing with 5 participants (3 females and 2 males), whose age fell between 20 and 35.

    Test Objectives

    • Determine if participants can complete the given tasks
    • Determine the way participants navigate through the website to complete the given tasks
    • Identify any pain points and confusion of participants
    • Identify possible changes that might improve user performance

    User Tasks

    • Task 1: Check their menu and see if there’s anything that suits your taste
    • Task 2: Find your ideal drink that matches the following criterion since you’re craving a drink like this: a refreshing creamy bubble tea with honey bobas in it!
    • Task 3: Place an order for a blended creamy drink named “Coco N Rose” for delivery
    • Task 4: Explore the website to learn some valuable information about the business.
    • Task 5: You are pretty interested in Bubble Bee and you definitely want to go so you're looking for the open hours!

    Results

    After reviewing the videos that I recorded of the participants while completing the given tasks, I put together a document of how the participants completed each tasks, what I observed and what they said or recommended regarding the prototype.
    View Test Findings

    Affinity Map

    With the help of the test finding notes that I transcribed from the recordings, I could create the affinity map to synthesize the findings to find out what could be improved on the wireframes and prototype. I took notes from the test findings and grouped them into Successes, Observations and Comments, which is how I got my insights. Based on these insights recommendations were made to improve usability, which were prioratized from high to low.

    Insights:

    • Users tend to change their minds or click on the wrong option when choosing between options in the Find Your Drink feature
    • Users are distracted by the interactive map and it blocks them from finding the open hours and contact information quickly
    • If users want to order for delivery they automatically navigate to the Delivery page and won't look at the menu on the website (problem: grubhub/doordash/postmates lack product photos, info + an overwhelming number of choices are listed

    Recommendations:

    • On the Delivery page, add an instruction on how to go about the process. 1) View Menu with CTA 2) Select a Drink 3) Order 4) Select a delivery service
    • Add backwards link or breadcrumbs in the Find Your Drink feature in each steps to be able to correct themselves without needing to start everything all over
    • Place the Interactive Map under the content on the Visit Us page

    High-fidelity Wireframes + Prototype

    Brand guide + Logo

    To showcase the brand identity and visual design direction of Bubble Bee, I created a style tile which helped me expanding the existing branding of the business while keeping their value and image that they have estabilished. I created a new logo for the business as I wanted to show a different approach to it and the business was open to any new logo ideas. I kept the existing yellow + black brand colors and introduced a new highlight color and chose fonts that match the brand adjectives which are the following: Creative, Modern, Inviting, Fun, Unique, Bold.

    High-fidelity wireframes

    After I have made updates to the mid-fidelity wireframes based on the affinity map insights and recommendations, I started to apply the visual design to the wireframes to create high-fidelity wireframesThe high-fidelity wireframes demonstrate how the website will look and operate when it goes live.

    High-fidelity prototype

    I built another desktop prototype of the high-fidelity wireframes in InVision, which I can showcase to stakeholders how the website looks in its polished, final version before handing the desing off to developers to build the website. You can interact with the prototype by clicking on the button under the image.

    UI Kit

    I put together a UI Kit to share UI elements and patterns with other designers or develpers on the team. I designed all of the associated states of certain comps, how certain elements behave when they are active, inactive or hovered over.

    Reflection

    Designing a responsive website from scratch is always challenging, especially if it's for a well-estabilished business like Bubble Bee is. This project helped me understand how important it is to define the core problems the right way. If I didn't do my research thoroughly and if I skipped the POV Statements + HMW Questions, I might have not implemented a "Find Your Drink" feature or would have designed the menu in a different way, which would have been still be confusing for customers. I was able to think outside the box and find ideal solutions to the problems that I was able to define.

    Next Steps

    • Conduct more rounds of usability testings with the high-fidelity prototype.
    • Keep making improvements on the design based on user feedbacks for a better user experience.
    • Prepare all deliverables for handoff.

Copyright © 2019 szanilee.com.
Website Design & Development by Szani Lee.