Boba Guys

→ Quick service beverage company
→ Aug 2018

→ UX Researcher: Kyle Soriano
→ UX Designer: Kyle Soriano
→ UI Designer: Kyle Soriano

Overview

Boba Guys is a San Francisco born, quick-service beverage company, started in 2011 in by Andrew Chau and Bin Chen that serves uniquely flavored tea and coffee paired with toppings that originated in Southeast Asia.

Boba Guys does not have an app like some established beverage restaurants do, and can gain a huge competitive advantage over other boba businesses with an app.

As someone who loves ordering drinks from this shop, I was able to combine my love of boba with my love for design to create a potential mobile app for Boba Guys.Boba Guys has become so popular that customers are frustrated with waiting up to 45 minutes to receive their boba drinks.

Task

Develop a mobile app for customers to order drinks quickly so that they don’t have to wait in long lines.

Boba Guys also benefits from this app because they are able to process more orders and in turn generate more revenue through the app.

Process

1

Research

→ Secondary Research
→ Competitive Analysis

2

Define

→ Persona
→ Experience Map
→ Features Roadmap
→ Site Map

3

Design

→ Sketches
→ Lofi Wireframes
→ Hifi Mockups
→ Design System

4

Test

→ Prototype
→ Results

5

Project End

→ Final Mockups
→ Learnings

1

Research

Secondary Research

You would think it would be quick since it's only tea they are serving, but it took at least 45 minutes of a wait.

- Yelp Reviewer A
Yeah I like the design of the shop and it's pretty hip. But I think it's not worth 45 min of wait kind of good.

- Yelp Reviewer B
After a 45 minute [wait], I was expecting my mind to be blown.


- Yelp Reviewer C

As someone who frequents Boba Guys weekly (sometimes twice a week), I am very familiar with the long lines that run out the door, and how long it takes to get a drink. However, I was curious to find out what other customers thought about the wait on Yelp, finding 624 reviews mentioning “Long Line”.

Competitive Analysis

Phil's Coffee

Good: Beautiful imagery
Good: Quick ordering
Bad: No custom favorites

Starbucks

Good: Organized menu
Bad: Cluttered homepage
Bad: Can only use gift card

Kung Fu Tea

Bad: Wordy and hard to read
Bad: Can’t search for drinks
Bad: Unappealing homepage

What can I do better?

1

Create a useful homepage to order drinks quickly by showing their favorite and previous orders

2

Create a menu that allows users to find drinks faster

3

Allow users to customize their favorite drinks (not just from previous orders)

4

Include additional payment methods (not just gift cards)

5

Show only relevant information in an easy-to-read, digestible way

2

Define

Persona

Based on information I gathered my secondary research and competitive analysis, I created a persona named Taka, who loves Boba Guys, but hates waiting in lines. He hopes that Boba Guys creates an app like Starbucks and Philz Coffee to order his boba ahead of time for easy pickup.

Experience Map

I created an experience map of the journey a customer goes through when ordering a drink ahead of time through the Starbucks app. My experience dropped significantly at checkout because:

I didn’t remember my password for payment, and I had to go outside the app and reset my password, which took a lot of time to do. I had to sign back in after all of that, when I’m just trying to order in a hurry.

I couldn’t just pay for the drink by itself. I had to reload my gift card with $25 first to purchase a drink, which was a lot more than what I paid for my drink.

Based on my experience with Starbucks’ app, I also made it my goal to make the checkout process much more easier and seamless with Boba Guys.

Features Roadmap

Based on my experience map, secondary research, and competitive analysis, I created a features roadmap to prioritize what features I would need to design for the Boba Guys app.

Site Map

From the features roadmap, I created Boba Guys’ site map to organize the features in different sections of the mobile app, which was also used as the information architecture for the app.

3

Design

Sketches

From the site map, I sketched out my initial ideas with pen and paper. The above snapshot is my initial sketches for the user flow of ordering a drink: from choosing a drink to payment.

Lofi Wireframes

I turned my rough sketches into low-fidelity wireframes and showed a few friends to see if the designs made sense before going into high-fidelity wireframes. The above snapshot is a continuation of the sketched user flow of ordering a drink.

Hifi Mockups

Combining low-fidelity wireframes with my UI kit, I created high-fidelity wireframes for each user flow: sign up, order a drink, add a favorite, and rewards. The above snapshot includes 8 selected screens from the user flow of ordering a drink.

Design System

I incorporated the same colors and typefaces that they use on their website, and created UI elements that were simple, minimal, and boxy to match their website as well.

4

Test

1st Prototype

I created an interactive prototype using Invision.

Interviews

I created an interactive proI interviewed 4 people who were frequent boba drinkers to test out my prototype, and received both positive feedback and areas of opportunities on the Boba Guys app.totype using Invision.

Positives

  • Onbrand with website: Minimal and Clean
  • Up to par with Starbucks App
  • Like the favorites to quickly order drinks
  • Love images of each drink because they set expectations of what they look like

Opportunties

  • Sign Up
    “Don’t want to add credit card or payment info so early on. Include a skip button.”
  • Order a drink
    “I have to scroll down to view all options. Can you make the image smaller? Also there’s too many drops and clicks still.”
  • Favorites
    “Is this a homepage? It looks like I’m in the middle of ordering. What about an order in progress?”
  • Rewards
    “It doesn’t look like they’re being rewarded. It says stars, but there aren’t any stars.”
5

Project End

Final Iterations

Sign up

Order a drink

Add a favorite

Rewards

Learnings

Organization is key

There are plenty of options on the Boba Guys menu, and to be able to organize all the information in a clear and sequential order was a huge undertaking. I went through several iterations before my final prototype, and thought of ways I wouldn’t have imagined with the help of my mentor and testers.

Small screens = Struggle

I stuck with the standard 360 x 640 Android screen, which was significantly different from the iPhone and desktop projects that I previously did. Playing with different typefaces, sizes, and layouts was fun, and felt like I was able to accomplish this well for the Boba Guys app.

Less clicks the better

Think about how I can still show the necessary amount of information that users need to know, but show the information in a way that has users click less.

Next Steps

1

Recruit 2 more participants: 1 that’s a huge Boba Guys fan and 1 that’s unfamiliar with Boba Guys but would be interested in downloading the app. I would love to see how else I can make the Boba Guys app better from a frequent and a new user standpoint.

2

Connect with the owners of Boba Guys and see if they can implement something like this for their business.

3

Create the iOS version of this app.