Welcome
Welcome to my Boba Tea case study!
We'll explore the creative process behind a new app that simplifies ordering and expands your palette. Join me as we discover how it can revolutionize the boba tea experience for all. Ready to create with me?
EXPANDING THE PALETTE
INTRODUCTION
Boba tea is a popular drink that originated in Taiwan and made its way to the US during Taiwanese immigration. It's made by mixing tea with milk or fruit and adding chewy tapioca balls.
But with so many different flavors and variations to choose from, it can be tough for newcomers to figure out what they like. That's where my app comes in. The design makes discovering and trying new boba tea flavors easy and enjoyable for all of us. With just a few clicks, we can explore a wide variety of options and find our new favorite drink in no time!
MAKING IT HAPPEN
PROJECT OVERVIEW
My Role: UX/UI Designer
Project Duration: 16 Weeks
Tools: Figma, Miro, Adobe Photoshop, Adobe Illustrator, Procreate
Problem
〰️
Research
〰️
Analyze
〰️
Ideate
〰️
Sketching
〰️
Prototype
〰️
Testing
〰️
Problem 〰️ Research 〰️ Analyze 〰️ Ideate 〰️ Sketching 〰️ Prototype 〰️ Testing 〰️
A SNEAK PEEK
THE OUTCOME
OVERWHELMING CHOICES
THE OBSTACLE
I aimed to make choosing boba tea easier without limiting our options. The idea was to simplify the process while still giving us a variety of choices. To do that, I focused on three main goals:
Streamline the Menu: Categorize and present boba tea types clearly.
Enhance the Customer Experience: Create an engaging environment for exploring options.
Preserve the Choices: Showcase the variety of boba tea variations.
Let’s look at this a little bit deeper by gathering some data…
DIVING INTO THE PROBLEM
RESEARCH
As I worked on this project, I wanted to make sure I really understood the problem we were trying to solve. That's why I did some research to learn more about our target audience and their needs. By doing this, I was able to focus on the user problem and create a solution that would work for them.
To gather this data, I used a variety of methods, such as conducting both secondary and primary research, surveys, and doing interviews. By taking a comprehensive approach to research, I was able to gain valuable insights that helped shape the development of the Boba app.
Now, let's delve into the research.
SECONDARY RESEARCH
While conducting my secondary research, my main goal was to understand the challenges that people face when it comes to choosing boba tea. What I discovered was that the vast array of choices can be overwhelming for some, which can lead them to stick with what they know or avoid it altogether. This can be a barrier to entry for those who are not familiar with the drink or its ingredients, leading to a lack of understanding of what boba tea is and its potential benefits.
PRIMARY RESEARCH
My primary research aimed to identify what motivates people to drink boba tea and what discourages them. I wanted to better understand the challenges they encounter while enjoying boba tea, so I could identify areas where they face difficulties and make improvements. To gather raw data, I would first need to conduct screeners to identify potential candidates for conducting interviews.
SCREENER SURVEY
Following my secondary research, I reached out to individuals with different levels of familiarity with boba tea, ranging from frequent consumers to those who had only tried it once or never before. To reach out to potential participants, I utilized social media and local boba shops to distribute the screener surveys to gather valuable insights.
As I analyzed the data, it became clear that many participants were interested in trying new boba flavors or trying boba tea for the first time. However, they often felt overwhelmed by the vast number of choices that were available to them.
As soon as I had identified the potential candidates through my screeners, I proceeded to collect qualitative data by conducting interviews.
INTERVIEWS
During my research, I conducted five interviews with individuals from various backgrounds. Through these interviews, I was able to identify the common problems people face when selecting boba tea.
Shared feedback among participants:
Afraid to try something they would not like or are not familiar with
Wanted healthier options but did not have enough information to make a decision
Overwhelmed by the many choices offered
We have gathered alot of data. To better understand more, let's examine this in further detail...
SORTING THE DATA
ANALYZE
Through the interviews I conducted, I gathered valuable data that enabled me to synthesize my findings into various tools such as affinity mapping, empathy mapping, personas, competitive analysis and How Might We statements.
So, let's take a closer look at these tools and why they were utilized in the first place. It's important to understand how they work together and their impact on our ultimate goal.
AFFINITY MAPPING
Pulling from the data used in the interviews, I was able to categorize the data into five distinct themes.
Flavor Preferences
Topping Preferences
Price and Value
Decision-Making and Accessibility
Preference Recommendation
As I analyzed the data from the interviews, I noticed that certain topics kept coming up repeatedly. These common threads allowed me to narrow down and focus on the most pressing issues that users were facing, which ultimately helped me develop a more effective solution.
When I created the affinity map, it was clear to see how each piece of feedback related to one of the five themes. This visual representation helped me to better understand the relationships between different pieces of data and allowed me to identify patterns and trends that were not immediately apparent. It was a crucial tool in synthesizing all of the qualitative data into a cohesive and actionable plan.
EMPATHY MAPPING
As I dug deeper into the data collected from the affinity map, I was able to identify two distinct groups of individuals: the experienced boba tea drinkers and the novices.
The insights gained from these visual representations of consumer preferences, challenges, and behaviors were crucial in the process of building well-defined personas.
This enabled me to obtain a better understanding of the diverse needs, behaviors, and motivations of each group, which shed light on how they approach decision-making when it comes to selecting boba tea.
Armed with this knowledge, I could develop more tailored solutions that address the unique needs of each group, ultimately helping them overcome their pain points and make more informed choices when it comes to enjoying their boba tea.
PERSONAS
As we have gathered insightful data from the affinity and empathy maps, we can now take the next steps, which is building personas. With the help of these personas, we can gain a deeper understanding of the target audience and their behaviors, needs, and motivations. This will enable us to create tailored solutions that are specifically designed to meet the needs of our users.
Jenna Lee, 32
Background: Jenna is a working mom with two young children. She enjoys trying new boba tea flavors and toppings, but also has her go-to choices. She typically orders boba tea when she needs a pick-me-up during her busy day.
Behaviors: Jenna frequents boba tea shops during her lunch breaks or after work. She tends to order drinks with lower sugar levels and enjoys trying new fruit and herbal flavors. She often brings her children with her and sometimes orders them kid-friendly boba drinks.
Goals: Jenna wants to be able to quickly order her favorite boba drinks without having to search through a long menu. She also wants to find new drinks that she and her children will enjoy.
Pain Points: Jenna is often rushed and does not want to spend a lot of time deciding what to order. She can become overwhelmed by extensive menus and dislikes when boba shops run out of her favorite toppings or flavors.
Ashley Davis, 21
Background: Ashley is a young professional in her early 20s. She recently graduated from college and is starting her career. She has boba tea on occasion and still considers herself a novice when it comes to trying new flavors and toppings. She enjoys boba tea as a treat after a long day at work or when she wants to catch up with friends.
Behaviors: Ashley likes to try new boba tea shops in different neighborhoods. She tends to order drinks that look new and interesting if she knows it’s similar to something that she has had before in the past. She likes to share pictures of her drinks on social media.
Goals: Ashley wants to find new boba tea flavors and toppings that she will enjoy. She also wants to be able to customize her drinks to her liking and have control over the sugar and milk types. She wants to be able to quickly and easily order her drinks without feeling overwhelmed by the menu.
Pain Points: Ashley can become overwhelmed by extensive menus and dislikes when boba shops don't offer clear descriptions of their drinks. She wants to avoid ordering a drink that she won't like or wasting her money on something she doesn't enjoy. She also wants to avoid waiting in long lines during peak hours.
COMPETITIVE ANALYSIS
Personas can be a great tool to help us better understand the needs and motivations of our target audience. By building personas, we can create solutions that meet the specific needs of our users, which can result in increased customer satisfaction and retention.
Understanding our users is crucial, but it is also essential to be aware of our competitors in the market. Let’s look at the competition.
During my research, I analyzed various competitors to comprehend the challenges that customers encounter when placing an order. By examining their processes and comparing them to my findings, I identified four primary challenges customers face when placing an order: being limited to a single store, a long list of choices, an absence of nutritional information, and lacking product descriptions.
Here are my findings on our competitors…
Restricted to a Single Store: Users expressed dissatisfaction with the limited options available when restricted to a single store and desired access to the vast range of boba tea choices available elsewhere.
Long Lists of choices: Users were frustrated with the long list of choices causing decision paralysis. The overwhelming number of choices made it difficult for users to find what they were looking for.
Absence of Nutritional Information: Users expressed dissatisfaction with the lack of nutritional information, such as calorie count, which hindered their ability to make informed decisions and choose healthier options while ordering boba tea.
Lack of Product Descriptions: The absence of product descriptions made it challenging for customers to explore and try new boba tea items beyond their usual preferences or familiarity.
By identifying these challenges, we were able to confirm our customers' pain points and discover new insights that can help us build a better boba app. With this information, we could improve our ordering system and better meet our customers' needs.
Great job! We have made significant progress in our project. However, before we move on and flesh out our ideas, we need to use another tool to help us generate ideas for our solution. This tool is called HMW statements, which stands for "How Might We."
HOW MIGHT WE
By using HMW statements, we can reframe our insights into actionable design challenges, which can guide us in creating solutions that better address the needs of our target audience. With HMW statements, we can break down complex issues into manageable and focused challenges that will help us create effective solutions.
How might we incorporate customer feedback and preferences into the menu to tailor it to their tastes?”
Proposal: Create a boba tea quiz to recommend drinks based on preferences, simplifying decision-making and encouraging customers to try new options.
How might we provide nutritional information to customers who are health-conscious?
Proposal: Display calorie and nutritional information for each drink on the menu in the boba shops.
How might we make the boba tea customization process more intuitive?
Proposal: Simplify the customization process by using clear visual aids and making the options more clear.
How might we help customers discover new flavors that they will enjoy?
Proposal: Create a feature that suggests drinks based on customers' previous orders and preferences.
How might we make the ordering process faster and more efficient for busy customers?
Proposal: Implement a mobile ordering system that allows customers to place their orders in advance and pick up their drinks without waiting in line.
How might we encourage customers to try more adventurous flavors and toppings?
Proposal: Offer samples of new or lesser-known flavors and toppings.
How might we create a more engaging and personalized experience for customers?
Proposal: Offer loyalty programs, personalized drink recommendations, and a rewards system.
How might we encourage customers to share their boba tea experiences on social media?
Proposal: Create a social media campaign with hashtags and incentives for customers who post about their boba tea experiences on social media.
Now that we have framed our insights into actionable challenges using HMW statements, we can begin brainstorming and fleshing out solutions. This is where we can start to really let our creativity flow and generate a wide range of ideas that address the challenges we have identified.
Let’s brainstorm and see what innovative ideas come from our hard work!
THE THINK TANK
IDEATION
IDEATION SKETCHES
Once I had a clear understanding of the problems I wanted to address, I created a series of quick sketches that explored potential design solutions.
USER STORIES
As part of my design process, I wrote user stories to ensure that our product was user-centered. These stories helped us understand how people would use our product and prioritize which features were essential. By using user stories, I was able to design a product that was easy to use and helpful for our users.
As a boba tea drinker,
I want to be able to see pictures of the boba tea drinks on the menu, so I can get an idea of what they look like and what toppings they come with.
As a boba tea drinker,
I want to be able to see the nutritional information for each boba tea option, so I can make healthier choices for myself.
As a boba tea drinker,
I want to be able to quickly and easily find my go-to boba tea drinks on the menu, so I don't waste time searching through a long list of options.
As a boba tea drinker,
I want to be able to easily find boba tea shops that are located near my home or workplace, so I can make quick stops when I need a pick-me-up.
As a boba tea drinker,
I want to be able to order boba tea drinks online, so I can save time and avoid having to wait in line.
As a boba tea drinker,
I want to be able to earn loyalty points or rewards for frequent purchases, so I can save money and feel appreciated as a customer.
As a boba tea drinker,
I want to be able to customize my boba tea drink with different types of boba, flavors, and toppings, so I can experiment with new combinations.
As a boba tea drinker,
I want to be able to share my favorite boba tea drinks with my friends on social media, so I can show off my unique taste and potentially influence others to try new drinks.
SITE MAP
After identifying the user's needs, I created a comprehensive site map that included all the necessary features and functions to meet their requirements. The site map is designed to ensure that the user can easily navigate through the app and access all the essential features without any difficulty. This helps to enhance user experience and increases the likelihood of user engagement.
USER FLOWS
These user flows ensure that users can navigate the app with ease and accomplish their objectives with minimal obstacles.
Now that we have established a user flow and analyzed our data, it's time to get creative and bring our ideas to life through sketches.
Once I completed the site map, I designed user flows to outline the key paths users would take to complete tasks on the app. To optimize user experience, I identified three crucial red routes:
Boba Quiz
Menu Items
Checkout
Based on the insights we gained from our research and analysis, we can now get creative and start generating ideas for how we want to lay out and organize the app. We can start ideating by doing some quick sketching, creating user stories, and exploring various user flows to come up with different design solutions that would make the app easy to use and intuitive for our target audience.
This is also a good time to gather feedback from our team members and stakeholders to ensure that we are on the right track.
Time to put our pens to paper or screens and start exploring different design solutions.
PEN TO PAPER
SKETCHING & GUERILLA TESTING
After brainstorming and organizing our ideas, we can now move forward with sketching and testing. Guerilla testing will allow us to quickly and easily test our sketches and gather feedback for improvement. Once we have identified and addressed any issues, we can move on to wireframing and start building out the structure of our design.
It's time to examine our design more closely and make it even more user-friendly.
SKETCHES
During the design process, I utilized sketching to visually explore my ideas and approach the project.
Through sketching, I was able to simplify and streamline the design to create a user-friendly experience. By mapping out different design solutions, I could quickly visualize and iterate on different concepts until I found the most effective solution.
This approach allowed me to create a simple and intuitive user interface that was easy for users to navigate. By taking the time to sketch out my ideas, I was able to refine the design and create a better user experience.
Once I was able to fix and identify our problems through our sketches and testing I could now prototype to solidify our design and create a tangible representation of the ideas.
Time to transform our sketches into a tangible design solution.
BRING IT TO LIFE
PROTOTYPING
Now that we have a few solid design ideas, we can move on to creating wireframes and ultimately our fully fleshed-out high-fidelity mock-up. Through this iterative design process, we can refine our ideas and create a final product that not only meets our user's needs but aims to exceed their expectations.
LOW-FIDELITY WIREFRAMES
While working on the wireframes, I utilized Figma to create low-fidelity mockups that allowed me to explore different design options. With wireframing, I was able to focus on the placement of elements on the page without being distracted by the use of colors, graphics, or typography.
Wireframing is an essential step in the design process as it acts as a guide to the product's content, establishing the hierarchy of the elements that comprise the product. This, in turn, helps us determine the layout of the product, leading us to create a high-fidelity mock-up, but first, let's do some testing.
USABILITY TESTING
I recruited 6 users who were familiar with boba tea to test a clickable prototype in order to gain feedback and identify any usability issues.
ITERATIONS
After identifying the issues faced by our users, I made necessary design updates to the prototype to address them. Here are a few examples of how I implemented an iterative approach.
BRAND PERSONALITY
Once I updated the prototype, I proceeded to develop the brand personality and style guide to ensure a consistent and visually appealing design. My inspiration for the boba app was to create a functional yet playful design. I used bright colors and playful graphics to achieve a lighthearted feel without compromising the accessibility of the app's necessary functions and features. My aim was to create an app that not only assists boba lovers but also adds a touch of joy and playfulness to their day.
STYLE GUIDE
To ensure the app's style guide met accessibility standards, I carefully balanced a playful and sleek design with considerations like color contrast and font sizes. I chose the versatile Inter font for its readability and utilized a consistent color palette throughout. These design decisions reflect the brand's lively and playful personality while conveying professionalism and trustworthiness. Overall, I'm confident that the style guide will help achieve the goal of creating a functional and engaging app for users.
HIGH-FIDELITY
Following the creation of the brand and style guide, I proceeded to design the boba tea app in Figma. Utilizing the guide as a foundation for the app's visual design, I was able to establish a consistent and engaging user experience.
INTERACTION DESIGN
As I began prototyping the boba tea app in Figma, my primary objective was to create an engaging and enjoyable user experience. I wanted to ensure that the app was not only visually appealing but also intuitive to use. To achieve this, I focused on creating micro-interactions that would assist users in navigating the app more easily and provide feedback on their actions. Here are some examples below.
After implementing design updates based on user feedback, I conducted additional user testing to identify remaining areas of improvement in the app's overall flow. My research findings indicated several opportunities to enhance the user experience, which were addressed through further design iterations. Here are some examples of the changes I made based on my findings.
ITERATION IS KEY
FURTHER ITERATIONS
KEY TAKEAWAYS
As the sole UX/UI designer working on a product not yet available in the market, I empathized with our target users and realized the importance of conducting thorough research and applying human-centered design principles. By investing time in research and testing, I gained a deeper understanding of our user's needs, pain points, and preferences. Regular user testing and feedback helped me to continuously improve and optimize the user experience. This project has taught me the value of taking a user-centric approach to product development, resulting in a fun and engaging boba app!
