My first step was conducting market research in order to gain a better understanding of the current bubble tea business, on-going trends, and important pain points. The following are some of the key insights I found through market research.

• The bubble tea market was valued at $2.4 billion in 2019 and is estimated to reach $4.3 billion by 2027.

• The U.S bubble tea market was a dominant region in 2019, accounting for more than one third of the global bubble tea market share.

• Fruit flavored bubble tea is the leading type in the flavor segment of bubble tea.

• Bubble tea shop success in the U.S rely heavily on the usage of social media and fusion food trends.

After finishing the interview process, I created an empathy map to synthesize the data collected from the interviews. I pulled out the following 3 insights to match 3 needs from the empathy map to help me have a better understanding on what goes on in the mind of an actual customer.

• Many customers are indecisive when it comes to choosing drinks at a bubble tea shop, therefore they need to know that the store’s recommendations will be a good choice

• Some customers enjoy the special offers provided with ordering drinks with mobile apps , therefore they need to know they will have benefited in someway from ordering drinks through apps

• Some customers have had bad experiences with the time waiting spent on buying drinks, therefore they need to know they wont have wasted unnecessary time when buying drinks

After creating three HMW questions, I executed a quick brainstorming activity in order to help me generate potential ideas for solutions. For this brainstorming activity, I wrote down as many ideas as I could think of within 2 minutes every round ( two rounds for each question ). Afterwards, I was able to generate a list of ideas that could be potential solutions.

(click here to view brainstorming document)

After having a better understanding of what the different goals are and how they overlap, I moved on to creating a site map document which helps give a clear idea how how the structure of the website would look on a high level.

With a clear idea of the structure and essential features required with in the website, I moved on to creating my first set of low-fidelity wireframes by sketching. While sketching out different ideas, I had to keep in mind the goals and frustrations that “Tiffany” had from my user persona.

After sketching out different ideas of the homepage, I combined ideas from each of them to create my first set of mid-fidelity wireframes. I created a homepage, menu page, and an about page. This allowed me to have a better idea of how the visual hierarchy, element sizing and spacing, and the flow would look before adding details.

It is very important for me to make sure I am designing in responsive during this modern time, because many users browse the web using their tablets and mobile devices. Therefore, I create two sets of responsive wireframes for the homepage and menu page to illustrate how it would look like on different platforms.

(click here to view responsive wireframes)

After creating a working prototype, I created a usability test plan and successfully found 5 participants who were willing to help me test things out. Each person was given the 3 tasks created from the previous stages. As my participants ran through the test, I made sure they spoke out each and every action they took in order for me to record down quality data.

(click here to see full test findings notes)

I was able to edit and update my mid-fidelity wireframes based on the usability test findings, and on top of that I made sure everything was a bit more modern-looking and clearer to understand.

After creating wireframes and updating them after running a usability test, I have a much better understanding of how the overall structure of the website should look like so I moved on to designing the brand’s logo. But before actually designing the logo, I created a mood board which includes images of different elements where I find inspiration from.

After having a better understand of how I want my website to look in terms of imagery, color, and typography, I started the logo designing process by listing out the brand attributes which are: friendly, modern, elegant yet approachable. I created a logo that is simple yet modern and strongly reflects the brands attributes. Then I created a brand style tile that includes the website’s color palette, typography, imagery, and other elements.

(click here to view logo sketches)

After identifying the brand’s style and elements, I moved on to designing high-fidelity wireframes for different pages. By making sure everything from images to element spacing and alignment was spot on and consistent, I was able to move on to the next stage.

After creating the high-fidelity wireframes, it is important for us to make sure things will function correctly. Therefore, in the last stage, I created a high-fidelity prototype with the wireframes created previously.

Knowing that Boba Addict is an actual store, it would only make sense for my next step to be conducting another round of usability test with the updated set of wireframes. By doing so, I would be able to uncover new insights and collect data regarding the updates. Furthermore, I believe it would be important to design a few more pages to make the whole website feel more finished.

As a big fan of bubble tea drinks, this project had been very interesting to me. From understanding more about the bubble tea industry to learning about user behaviors and experience with bubble tea stores, I felt like I was designing not just for users but also myself. A few highlights of this project include: 1. Understanding current bubble tea market trends 2. conducting user interviews to understand what users want 3. implementing design choices based on research