ChaTea Hawai’i

CHALLENGE: To create a responsive website for ChaTea, a local boba store, in order to excite and draw in customers to their shop and help their business grow.

 

Project Type

Rebranding

Individual Project

Deliverables

Secondary Market Research

Lo-Fi & High-Fi Prototyping

Information Architecture

Logo ReDesign

Tools

Figma

Adobe Illustrator & Photoshop

iPad

Duration

4 weeks

Design Thinking Framework

EMPATHIZE

Market Research & Competitive Audit

I conducted secondary research of the global, consumer, and local level bubble tea market in order to obtain a better understanding of what attracts customers to both product and ultimate decision making when choosing a bubble tea store to go to. I ended up with a set of goals I wanted to achieve from this research to guide my design process:

  • Discover pain points that people encounter online and offline

  • Understand the market trends of the Boba Tea shop industry

  • Identify ChaTea’s target market

  • Identify ChaTea’s competitors and evaluate strengths and weaknesses

Some outstanding statistics from market trends:

  • Health consciousness and increase in adoption of healthy beverages such as green tea, black tea, oolong tea, and white tea among consumers drive the market growth. (Allied Market Research)

  • Teenagers and people in their 20s consistently account for the highest consumer percentage of bubble teas (Gen Z’ers)

  • Excess sugar content in these drinks leading to health issues and trend of coffee consumption are expected to restrict the market growth, consumers are turning their attention towards organic blend/reduced sugar/sugar free segment which is anticipated to account for over 26% of the market share.

  • 75% of consumers admit to making judgements on a company’s credibility based on the company’s website design

From these outstanding statistics, especially the ones based off of preferences pertaining to how a customer would choose their boba shop depending on their online presence and options they offer, I wanted to see how other companies addressed these issues. So I did a competitive analysis:

Takeaway - Highlighted areas are the qualities of each of the companies strengths that I felt were important to think about when addressing market trends.. However, I felt I needed to pin point exactly what made each of these shops attractive in order to address the needs of the correct target audience.

 

Primary Research - Interviews & Empathy Mapping

I felt like I had a general understanding of the qualities important to an online platform for a boba shop, however, I felt that it was also necessary to understand the needs of customers themselves, so I conducted interviews.

To better understand potential users, I interviewed groups aged 15-27 years old in order to get a better understanding of the market consistent with the research I conducted prior. These are some of the questions I asked:

  • How often do you visit bubble tea stores?

  • How do you normally find local businesses to shop at?

  • What qualities of the physical store do you like to look out for in bubble tea places?

  • What qualities of the drinks do you look out for in bubble tea places?

  • How do you choose which bubble tea store to shop at?

  • What was the last bubble tea shop you visited and what was your experience like there?

Based off of the participants interviews and surveys that I did regarding the motivations and frustrations of customers going to boba shops, I was able to get a feel of ChaTea’s targeted customer base. With this info I was able to create an empathy chart in order to nail the specific pain points and goals of the customers.

 

Persona Development

With the information gathered from the says, feels, thinking and doing of the customers from the empathy map, I was able to pull the information together and to create a persona, Jen who will be a representation of ChaTea’s customer base with their goals, needs, motivations and frustrations when choosing to visit a boba shop. With this info we can conclude that many of ChaTea’s customers prefer shops that they are able to hang out with their friends in, a shop that is clean, provides good customer service and plenty of options for Jen.

How might we create a responsive web experience that allows users like Jen to see photos, information about a variety of drink options, and recommend ChaTea to her friends?

 

DEFINE & IDEATE

Brainstorm & Mind Mapping

I then used a brainstorming mind mapping chart in order to come up with potential solutions to a break down of the How might we statement, and picked the solutions that came up more than once.

 

Strategizing - Product Roadmap

I created a list of prioritized features that I wanted to implement to get a better understanding of how to structure the website.

 

Information Architecture

I kept in mind the important must-haves and turned it into a IA map for the menu of the site.

User Task Flow

 

DESIGN SOLUTIONS & PROTOTYPING

Lo-Fi Paper Wireframes & Digital Wireframes

I am using a mobile first design process via Figma and paper.


 

Logo Redesign Process

I had initially designed the preexisting logo for the business back in my sophmore year of college, however, growing as a graphic designer has made me realize that there are many flaws with my initial design. The major flaw being legibility issues. I wanted to fix this issue, while designing a logo that would more accurately represent the vibe of the company, and encompass what ChaTea’s goals are as a business.

INITIAL LOGO

The Kanji was really important to keep in the iterations because the business is Taiwanese owned, and they wanted to combine traditional culture with modernity and comfort.

The green swirl brush effect symbolizes tradition, I decided ultimately to go with a serif font because serif fonts give off a more traditional, friendly look rather than a sans-serif, modern, sleek and cold.

FINAL ITERATION

 

Hi-Fi Prototypes

 
 

Reflection & Next Steps

  • Usability Testing

    Due to the nature of this project & personal circumstances I was unable to have access to usability testing, so in my next phases, I would like to create prototypes in order to confirm my user flow chart.

    Then with that information, I would be able to make changes to the high fidelity prototype in order to make the website more suitable for launch.

  • Feature Implementation

    Due to the timeline of this project, I was only able to focus on priority features, if given more time, I would like to explore other options that I’ve mentioned in the product roadmap to appeal to customers.

    ACCESSIBLITY (A11y)

    I would also like to explore the option of implementing accessibility features on the website such as UserWay in order to make the site more equitable.