Figma, Adobe Illustrator
App Redesign 2022
Redesigning Taichi's mobile checkout user flow.
Taichi Bubble Tea is a Rochester originated cafe that sells boba, ramen, sushi, and merch. My challenge was to redesign their app while keeping the same original features.
PROBLEM
Analyzing the problem of the current Taichi app: This includes looking at reviews and examining how this app does or does not hurt the company.
Why does disproportionate sized buttons and text need fixing? Where is the problem? The app works perfectly fine and functions as is. That is a good question. We could ask the users.
The users seem to not have a great user experience. Could this be reflected on the way the app looks and functions? It is both. The large and small disproportionately sized elements of this design confuses users because these are elements not familiar, therefore unintuitive, comparing these to the experiences in mobile checkout designs. It is inconsistent.
Sure, someone could definitely use this app. But would they want to put in the effort to think about what they are supposed to tap next?
Would they put in effort to read text that is relatively the same shade as the background?
People as simple-minded as us do not need added confusion to an already stressful day. Wouldn't you be a bit hangry if the app is not doing as you expect it to? Making this experience easier to digest leaves a customer satisfied with their food order, and no afterthoughts about difficulties throughout.
GOAL
So, my goal is to make an app that is simple and pretty because Taichi's aesthetic is to bring in customers to share their experience, and a pretty design is a part of their experience.
I want to consider a user's time, patience, emotion, and thoughts throughout the process. A user's thoughts should only be, "Hmm, what do I get?" not, "Wait, how do I do this?". This is where I want to emphasize the product, with the design and aesthetic to be an afterthought, to not leave a big impression on the user.
DESIGN PROCESS
User Flow
To navigate the problem and bring it to a solution, I go through iterations on the basis of making a simple user flow to focus on, sketches to follow, wireframes that outline the solution, to the final solution.
The basic structure of where my design will go narrows down to the most general user flow. I take into account what the user must do in order to get to the next screen and next action. This must be obvious and apparent to the user throughout the time entire time.
DESIGN PROCESS
Sketches
Neatly on graph paper, my sketches were to navigate my ideas for the interface, and physically create an outline that will help me to not forget what comes next and including elements I might forget. Labelling each screen helps me understand what content needs to go on it.
DESIGN PROCESS
What will these look like on a digital device? Here, we come to wireframes.
Working on a clean surface, using a grid and 4px/8px system shows the general area where elements will end up going to.
FINAL SOLUTION
We're done now. Or are we? Well, let me explain.
Welcome to the homepage! This is the landing page you first see when booting up the app. The big dark green button let's you know you can start ordering by pressing it.
That afterthought information at the second half of the screen tells me what Taichi is promoting, and they definitely want to sell their stuff. It's right in front of you when you walk in.
Why do I need to choose my location before I actually order? Well, certain locations may or may not have ingredients or the food you want in stock. It is tailored to the location with their updated menu.
The locations are split into different categories, giving the user some freedom to choose where they want to go for their food and drink. They can also favorite their favorite location for quicker access.
They already have nice photos, why not use that to their advantage? These ones really make me want to buy food there. That's why I emphasized the pictures because it put's their food within the restaurant environment, but make it stock photo and professional.
This communicates to the user that Taichi has put care into their products, and their products are good enough to be professionally photographed.
From horizontal scroll to vertical scroll menu customization. This user picked the strawberry milk tea because they really love strawberries. And milk. The screen scrolls down to display more customization options, as well as this big add to cart button that tells you you can purchase selected item.
The differentiation between the horizontal and vertical scroll let's the user know that they are in a different circumstance which is customizing their item.
After adding to cart and ready to check out, the user is then shown information regarding pricing, quantity, taxes, and added customization. There is also the option to still change locations just in case the user has decided to order from somewhere else.
It is time to check out. Delivery details and delivery options are shown during this stage in a pop up. This shows the location the user is ordering from still visible in the background, reminding the user that it is indeed the location it will be coming from.
CONCLUSION
How does this solve the problem?
Through branding, layout, and visual hierarchy, Taichi's goal is to build customer trust through their app. This helps out their business by adding a feature unique to them, as well as catered towards their customer experience. We can solve these issues above by addressing them, creating a unique space for the Taichi experience, and solving them by pinpointing a flawed system that discourages usage of the product.
I used elements of an elegant design, asymmetrical patterning and leaves that represent what their branding is about. That color green will be associated with Taichi's colors, soft edges lessen the impact of their photographs. This all was added to give Taichi a new look that was not muddled with desaturated colors that do not match their interior.
WHAT DID I LEARN?
A design is never finished. That's why we always have design jobs. It isn't innovation, it's recreating the same familiar principles and making them distinctively their own.
THE WHY
Creating a new checkout process for Taichi that adheres to their branding and professionalism will bring in customers through trust, connection, and reliability. Creating an app that promotes Taichi's products and leaves an unnoteworthy experience will leave the customer to not ponder over design frustrations.
Though simple, this project was to help me understand and execute a well thought out design process to create a solution that can cater to Taichi's consumers.
Key Takeaways
Since this was my first UI project, I was unable to get the most out of it, like limited peer feedback and user research. My goal is to work with a team of people to create something with the input of other people's feedback.
Iteration, and keeping iterations are an important part of the design process that shows my thinking. A mistake I made during this project was deleting my past iterations.
Corina Lougie
corina.lougie@gmail.com
