Kung Fu Tea App Redesign
UX/UI DESIGN, UX RESEARCH, USER-TESTING, PROTOTYPING, BRANDING
Featured on The Best Android and iOS App Designs by DesignRush ↗
BRIEF / PROMPT
Identify an existing mobile app with poor user experience (UX) and user interface (UI) design and redesign it to improve the overall user experience. This project will require researching and identifying an app with poor design, analyzing the user needs and pain points, creating a new design that addresses these issues, prototyping the redesigned UI, and creating the following deliverables:
MY WORK
In this project, I take on the task of redesigning the Kung Fu Tea mobile ordering app to improve the overall user experience. The current app has a poor user interface, confusing non-intuitive ordering process, poor workflows with unnecessary steps to achieve a simple goal, non-accessible UI, and lacks many useful features, which leads to a frustrating experience for users.
This project showcases my ability to take an existing product with poor design and improve it through research-backed design decisions, creating a user-centered and visually appealing end-result.
RESEARCH
The project begins with a thorough research and analysis of the current app and its users. I gather feedback from current users, conduct competitive analysis, and study industry best practices to understand the pain points and needs of the users. I map out a flow diagram of the original app and identify specific pain points and redundancies in the existing workflows.
Original Kung Fu Tea App Flow Diagram
Original Kung Fu Tea App Screens (Before Redesign)
PROBLEMS
The app does not make ordering a drink easy or intuitive. There are many unnecessary extra steps.
-
No way to search for a specific drink.
-
No way to add a “favorite” easily; the add a “My Order” feature is confusing.
-
What do the quantities mean when choosing toppings? Too subjective, maybe use add toppings, extra toppings, or number of scoops. There should be a maximum number of toppings.
-
Allows you to select multiple sugar levels but not order until you fix it.
-
Why do you have to press “view more toppings” to see them all?
-
Side menu has too many options and separate pages in one place.
-
The user-flow to sign in changed the second time I went into the app.
-
Without logging in you can see the menu but it only leads to a website with the menu instead of anything in the app.
-
No way to check nutritional information or ingredient list for drinks.
-
No way to filter drinks.
LOW FIDELITY WIREFRAMES
Based on the research, I created wireframes and prototypes of the new design, focusing on simplifying the ordering process and improving the overall user experience. I first redesigned the flow diagram and sketched wireframes to be more simplified and easier to navigate, with new features like being able to search and filter through drinks. I then created these wireframes in Figma digitally.
Redesigned Kung Fu Tea App Flow Diagram
Wireframe Sketches
Digital Wireframes + UI Specifications
FURTHER AREAS FOR IMPROVEMENT
After presenting the research, redesigned workflow, and wireframes, I was able to get further feedback for areas to improve on in my final UI design. The feedback received included...
-
The UI looks very bare bones and lacks branding and memorability. Can I use more than just the Kung Fu Tea logo colors?
-
The user may feel lost as the bottom navigation bar is only present on the home screen.
-
The review order and order placed screen still have yet to be made.
-
Some icons can be confusing (e.g. the QR code icon for the scan page).
-
The workflow and screens for choosing a pick up location still need to be worked on.
-
Should there be a delivery option in the app?
-
Can I access the shopping bag/cart at other pages too? (not just the main menu screen)
HIGH FIDELITY WIREFRAMES
Using the feedback and ideas I received from the low fidelity wireframes, I designed improved screens with modifications to improve the user experience. One of the biggest changes I made in my hi-fi's was incorporating the Kung Fu Tea branding and color palette, which also increased color contrast. I also kept some elements present through multiple screens so the app would be easier to navigate, such as keeping the bottom navigation bar and bag icon present even when the user is navigating through the different pages in the menu.