→ Quick service beverage company
→ Aug 2018
→ UX Researcher: Kyle Soriano
→ UX Designer: Kyle Soriano
→ UI Designer: Kyle Soriano
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.
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.
Research
→ Secondary Research
→ Competitive Analysis
Define
→ Persona
→ Experience Map
→ Features Roadmap
→ Site Map
Design
→ Sketches
→ Lofi Wireframes
→ Hifi Mockups
→ Design System
Test
→ Prototype
→ Results
Project End
→ Final Mockups
→ Learnings
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”.
→ Good: Beautiful imagery
→ Good: Quick ordering
→ Bad: No custom favorites
→ Good: Organized menu
→ Bad: Cluttered homepage
→ Bad: Can only use gift card
→ Bad: Wordy and hard to read
→ Bad: Can’t search for drinks
→ Bad: Unappealing homepage
Create a useful homepage to order drinks quickly by showing their favorite and previous orders
Create a menu that allows users to find drinks faster
Allow users to customize their favorite drinks (not just from previous orders)
Include additional payment methods (not just gift cards)
Show only relevant information in an easy-to-read, digestible way
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.
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.
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.
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.
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.
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.
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.
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.
I created an interactive prototype using Invision.
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.
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.
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.
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.
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.
Connect with the owners of Boba Guys and see if they can implement something like this for their business.
Create the iOS version of this app.
