Boba Tea

✦ UX/UI, Brand Identity, Illustration

Client
Self Study

Role
UX Researcher

UI Designer

Duration
1 month

Background
In recent years, boba has experienced a surge in popularity worldwide. With the boba craze on the rise, there's an interest for an informational platform to explore and educate about boba drinks. The Boba Tea website offers rich cultural history and recipes of boba to bring together a community of boba lovers.

Objective

To develop a responsive website for Boba Tea that seamlessly translates across desktop and mobile devices. The website will comprise of 4 primary screens and 2 secondary screens, serving as the ultimate guide to educate and inform users about boba drinks in an engaging manner.

✦ Process

01 | Research

Research Goal

Gain insights into the needs and challenges of users to create a human-centered website that consolidates comprehensive educational content on boba tea. The aim is to offer seamless access to concise information, ensuring a user-friendly platform that serves as a one-stop resource for all things related to boba tea.

Research Objective

1. Understand the demographics and preferences of the target audience interested in boba tea.

2. Conduct market research to gain insights into existing informative boba websites.

3. Conduct user interviews to learn about the pain points and motivations driving users to seek information on or engage with a website dedicated to boba tea.

Target Audience

As boba tea gains global recognition, its target audience can be categorized into two groups: East Asians and non-East Asians.

For East Asians, particularly East Asian-American youths, boba has evolved into a significant aspect of their cultural identity. They may find Boba Tea empowering them with insightful content and resources, fostering a deeper connection to their cultural roots. Moreover, Boba Tea aspires to extend beyond the East Asian community, attracting individuals from diverse backgrounds. These users are encouraged to freely explore in-depth information about the beverage, share their discoveries, and, perhaps, one day try out boba tea themselves.

Market Research

To understand the existing informational boba tea websites, I researched 3 sites: Talk Boba, Bubble Teaology, and BubbleTeaHub. My investigation focused on evaluating the visual aesthetic, information organization, and content topics of each competitor.

From my analysis, I found that many boba informational websites primarily offer content related to recipes, blogs, and nearby boba shops. However, there is a noticeable absence of platforms discussing the historical context of boba or providing explanations about what boba tea is. Despite the information being easily searchable through search engines like Google, I believe centralizing this knowledge in one space is essential for individuals unfamiliar with boba who wish to learn more.

Moreover, my research revealed a gap in the inclusion of features building community engagement and sharing local events. This identified gap has motivated me to take the initiative in addressing these challenges through my design and website, aiming to create a comprehensive and inclusive resource for boba enthusiasts.

User Interview

With a clearer picture of my target audience and a thorough analysis of my competitors, I can design more targeted and relevant user interviews. In this phase, I conducted 10 one-on-one interviews, strategically posing questions crafted to learn their preferences, information-seeking behaviors, challenges, and motivations regarding the use of a website about boba tea.

02 | Define

User Personas

Based on the information gathered through user interviews, I crafted 3 user personas— Tiffany, Lucas, and Dave. These personas are representatives of the participants I talked with during the interviews and are considered the real-life audience that Boba Tea aims to attract. I develop detailed descriptions for each persona, outlining their backgrounds, motivations, and pain points that align with the information gathered during the interview. This process guides the optimization of the website's user experience to cater to the diverse needs of our target audience.

Site Map

I created a sitemap to prioritize content, ensuring a functional and beneficial interface. The main pages I wanted to highlight include About, History, Types of Boba, Recipes, Event, and Blog.

03 | Develop

Brand Identity

Before creating the visual designs for Boba Tea, I outlined a set of goals and values that the website aims to represent: quirky, playful, educational, informative, engaging, community, inclusive, and empowering.

Wireframe

Ensuring a harmonious transition of design and content from desktop to mobile versions of Boba Tea's website requires careful attention to detail. To maintain consistency across the device, I initially sketched out both versions on paper and later translated these concepts into Adobe XD to develop a medium-fidelity prototype.