top of page
Overview
Yi Fang is a Taiwanese tea shop that specializes in fruit tea. Customers are able to customize their drinks in store, however, personalization is limited and the contactless ordering system might stress customers who are ordering in store. Customers have to remember their orders if they want to order something they ordered previously. I created a mobile app for Yi Fang that allows customers to have a more personalized and stress-free experience when ordering tea.
Challenge
Create an improved experience for ordering tea that caterers towards customization and personalization.
My Role
UX Designer & Researcher
The Research
To begin my research, I conducted several user tests to determine what the users’ pain points were of the current YiFang experience. I wanted to understand how the experience might be lacking. For the user tests, I had users go through the contactless ordering system. I then took notes during the test and also interviewed each participant afterwards. Here are the results.
The Results
1. Overall all users said that it was a good experience, and there was not much confusion
​
2. There were a couple users that had trouble looking for an item they wanted on the menu
​
3. Because Yi Fang used a contactless ordering system, customers had to create their orders once they reached the front of the line, this might create stress for the customer to hurry when there are people waiting in line behind them
​​
4. Users had to customize their drinks from scratch for each order, there was no way for users to order something they knew they wanted
The Problem
1. It is difficult for customers to personalize their experience when ordering the drinks they enjoy
​
2. Some items aren't represented accurately on the menu, some items are lacking information
The Solution
1. Create a mobile app with features that allow for personalization and customization
​
2. The app will allow customers to save their own custom drinks and order previously ordered drinks
3. Users will also be able to see information about each item before they order
The Persona
After gathering information from my research, I created a persona to represent some types of users that might want to come to Yi Fang. This persona will help me develop features that will be in the app.
Empathy Map
Then I created an empathy map based on my persona to go deeper into what Lilly might be feeling. This empathy map will help me to recognize the problems that users might be facing.
Features & Site Map
Once I had finished my research and gathering information, I began to start working on the app. First, I created a list of features that were a “must-have” for the app. These features would help to solve pain points that I had previously found during my research.
Features
· Favorites Tab
Allow users to store their favorites so they can order again quickly without having to set their customizations each
time they order
· Item Information
Ingredients and allergen information to ensure that customers know what they are getting
· Order History
Also allows users to reorder a drink they have previously ordered with all the customizations already done
· Rewards Tab
Helps users keep track of their rewards easily and automatically applies them to their purchases
Then I created a site map incorporating all the features that the app would have. This site map lays out the informational architecture of the app and will help me design the layout of each screen.
User Flows
These user flows are based on the core features of the app. They will help me to create a user friendly path or navigation for the users when they are looking to complete a task. These steps will help me in giving the app simplicity for the users when I create my wireframes. The first user flow shows the path a user would take when they want to place an order. The second user flow shows the path a user would take when they want to create a new favorite.
User Flow Key
User 1
User 2
Low-Fidelity Wireframes
Next I began creating my low-fi wireframes. I used the site map I made earlier to create the structure and navigation of the app. The main thing that I wanted to highlight in my wireframes was the ease of navigation and how easy it should be for customers to place their orders. I also wanted to incorporate all the features that I had listed above. The process should be very straightforward for customers to use all the features included in the app. I created my designs
in Adobe Illustrator.
High-Fidelity Prototype
Now for my high-fi design. I chose to use a simple, minimalistic style with a color code representing each of the different sections of the app. This would help the user with navigation as all the pages of one section will be the same color. For example, all the screens of the menu will be purple. This will help users not get lost and stay on track while they are ordering their tea. I created my high-fidelity designs in Adobe Illustrator and then moved my designs to Adobe XD to prototype.
Revisions
After I completed my high-fidelity prototype, I received feedback from my project supervisor. Using the feedback they gave me I was able to make revisions to give my prototype a cleaner look, a bit better functionality, and a few other quality of life changes.
Before
After
I changed a lot of the overall style to give it a more sleek, modern, and premium look, while keeping the same concept. The before design used too much color, not enough white space, and had very large text that caused the design to feel clunky. This can be seen most significantly in the footer navigation. I changed the icons and buttons to be cleaner by making the icons a little smaller and giving more space around the icons. Similarly, by reducing the size of the text, I was able to give
the elements of my design more breathing room. This would give my app a more premium feel rather than clunky.
Changed text to "Select"
Moved "Add to Cart" next to "More Info" horizontally
The "Add to cart" button was previously in a very awkward and hard to reach area because it was so small and in the top left corner of the box. I changed the text to say "Select" so that it could fit next to the "More Info" button. Having the two buttons next two each other horizontally makes it easier for users to reach.
Moved "Return to Menu" to
the bottom of screen
A lot of the buttons were in hard to reach areas, so I moved them towards the bottom of the screen for ease of access making it easier for users to tap them at the bottom.
Rearranged buttons and made them larger
Removed checkboxes
from selection indicator
I changed the style of the item customization so that the new design would give a more premium feel. The check mark indicating selection seemed clunky and out of place. The new design would also allow more breathing room for white space that also helps to give that premium feel.
Since I had used a color coded style to show the different sections of the app, it was a bit strange that the Orders and Settings both used an orange color palette. I changed the color of the Settings menu to grey to keep each section unique for ease of navigation.
Final Prototype
Reflection
Style
I learned a lot about design style and visual design while working on this project. I think that it has really helped me with my visual design concepts. It was really helpful looking at my designs before and after because I could really tell that I had made huge improvements to the overall visual feel of the app after I made adjustments.
Research
Going into my research, I wasn’t actually too sure what to expect and the results ended up showing me that the system at Yi Fang was actually already pretty good. There weren’t many complaints during the user tests and most users were very positive. However, I’ve learned that there is always room for improvement. Even when things are looking pretty good and everything is working, there
is always something that can be changed or improved. In most cases it will be something that users won’t have really thought about. The best design solutions solve problems that users
don’t even know they have.
Design Process
I believe that I was pretty successful with this project. This project has for sure helped me to improve my design skills. I think that it was good practice going through the design process to create this app. Although it was all processes that I have gone through before, it is important that I keep practicing to keep my mind sharp and improve as a designer. This project I worked on alone and it was definitely a challenge. I am more used to working in a team setting and having to keep track of all the pieces of my own design definitely kept me busy. I think that this project has helped me stay organized because if I didn’t stay organized, I would not have been as successful as I was.
bottom of page