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
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.
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.
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.
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.
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.
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.
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.
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.
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.
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. .
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.
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.
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.
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.
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.
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
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.
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.
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.
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.
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.
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.