Taichi Bubble Tea 

Role: UX Designer | Duration: 4 Months | Tools: Figma, Figjam
‍‍
Team: Leann Kuchler, Gayatri Shetty, Katie Quian, Ramisa Maliyat


Overview : Taichi Bubble Tea is a popular food chain that has a large student population. Its trendy food  options (ramen, bubble tea, donuts, etc.) have all proven to attract a large customer base. Given the limited  usability of the Taichi app and customer complaints, we have taken on the challenge of doing a redesign.  We aim to create an app that optimizes the process of ordering, gaining customer rewards and simplifying  general usability of the app. Through this, we hope to prevent users from leaning into competitor apps and  achieving an overall connectedness with Taichi. 
‍

Goals : Gain customer feedback to produce a visually appealing, intuitive app that has a consistent brand  identity; effectively create visual displays to improve ordering, promoting products and building overall  customer connectedness with the company. 
‍

Strategy : User research, qualitative analysis, competitor analysis, visual mapping
‍

Empathizing with our Users

Original Design of the App

Stakeholder Map + Empathy Map


Our focus was to make note of mainly customer and employee pain points when working with the app. As they are the most directly involved with the product, we aimed to simplify their communication with one another.

After thoroughly inspecting the original app, we found it helpful to create an empathy map so we could have some familiarity with the pain points of the users. Through creating this we were able to make note of the unintuitive buttons/flows, lack of visual appeal, inconsistent text and poor UI.

Research

Given the large student customer base, surveys were distributed throughout colleges in the Rochester, NY area (ex. University of Rochester, RIT). This was done to gain some preliminary knowledge on the general interactions with Taichi and how much potential users interacted with the app.  

With this general overview in mind, interviews were conducted to observe how users interact with the app. Contextual inquiries  were used and provide detailed insights into the pain points of the users. This allowed for us to highlight specific design choices down the line.

Competitor Analysis

Since an overwhelming number of our users opted for Grubhub, I highlighted the unique features, advantages and disadvantages of the company.

Problems

How might we convey Taichi’s brand identity through cohesive and appealing design?
‍

How might we improve navigation and user comprehension of instructions?

Ideation

Through the construction of user flows and our interview answers we were able to make use of affinity mapping to organize the shared pain points of users. We were able to gain more insight into the specific aspects of the app that users paid attention to. This led us to keeping in mind aspects of navigation, UI, account information, branding and smaller miscellaneous features.

User Persona

Informational Architecture

After being acquainted without our users and their pain points, an informational architecture diagram was created to provide a visual organization of the app. This included updates to the app that addressed struggles of users, included important aspects of competitor apps and promoted Taichi's brand. Some highlighted additions included a reward system, updated order flow, product promotions and a log of transactions.

Prototypes

Low Fidelity

We developed some low fidelity iterations of the app using our information architectural diagram as a checklist. This essentially led to us going for a far more clear and simplified organization of the content. I was mainly in charge of user settings and the profile page. We made it our goal to provide proper spacing and made sure the visual cues (boxes, drop downs, arrows) were easy to comprehend.

Color Palette + Typography + Component Library

In addition to building a visual layout, we started making decisions on the color scheme and typography of the app to maintain consistency. These decisions aided in building a component library that would be distributed through each page for the high fidelity iteration of our design. We tried to maintain some of the promotional aspects of the prior app as that was how the restaurant registered them at the time. 

High Fidelity

One of the big ideas that we learned from our research is that reward brings motivation. This led us to implementing a point reward design in the homepage with points of progression. By maintaining this as the center of the page, we remind the users of why they should use the app. We also placed the order again section right below as users are more inclined to purchase the same items. Additionally, the location is at the very top so users can easily be directed to adjust the store location, which was an issue that kept coming up with the original app. Along with all this, we made sure to simplify the navigation bar with larger symbols in order to have a cleaner look and create less distraction.

The original menu page was quite text heavy and unappealing to the users. We decided to reduce as much text as we could and place more emphasis on the pictures. Placing the products side by side categorized by the type of product allowed us to highlight the food items much better. This consistent side by side is more visually digestible. Along with this, the search bar and top navigation categories simplified the process of locating items and being able to search without much visual cognitive load.

Reflections

Since this project was done within a student club, there were more restrictions in terms of availability and deadlines. I would emphasize developing a delivery system and conducting A/B testing on different versions of the app design. Through this project, I learned the challenges that come with collaborating, creating a tactful research plan and specifying user needs. Some things I would do differently is personalize more of Taichi's products and update the app with their recent merch. In addition, I've learned about the power of feedback and having a consistent discussion with users and designers. One of the keys to having a successful design involves lots of feedback, revaluating plans of execution and being considerate of multiple research routes.