Yi Fang Mobile App
A mobile app design for Yi Fang. YiFang fruit tea is a popular tea shop. Customers are able to order and customize their drinks with the in-store kiosk However, the machine doesn't allow memorization, customers have to choose their preferences every time they order in-store with the kiosk machine. in addition, every time a new drink comes out, customers might feel stressed and won't try new items, because they don't know if they will like it or not. therefore, I created a mobile app for YiFang that allows customers to order ahead, check the calories of drinks, and with only one click order different drinks with their desired preferences.
Contributions
My Role
UI/UX Designer and researcher, designing a order system mobile app for Yi Fang, from conception to final prototype.
Project type
UX Design
Project duration
November - December 2022
Design Tools
Figma, Adobe XD, Photoshop, Illustrator
Project Type
Student project
Why
During the pandemic time, most bubble tea shops add contactless kiosks for people to order drinks, this helped people customize their drinks to a greater extent. However, kiosks won't be able to view different customer previews orders, and if a customer is in a rush, the only way to order ahead is through the delivery app, but most of them will increase their drink price in delivery apps. Which is not very friendly. This makes me wonder if I can design a mobile app for Yi Fang that allows customers to order ahead, check calories, and view their order history.
The problem
With the existing kiosks, users are not able to order ahead, check calories, or view their order history. In addition, there is no promotion feature in the system which is hard to get more attention from customers.
Solution
Design a mobile app for Yi Fang that allows users to order ahead and pick up, view their order history, check calories, and create a promotion feature to increase users' interest.
Research Process
In order to have a better understanding of what users want, their frustrations, and pain points, I conducted observation in the store, to observe how people order drinks through the kiosk. to have a better result, I also took some notes while I observe them to order.
Method
Observation
Participants
5
Duration
5-10 mins
Findings
1. Most of the participant feels good about their experience with the existing kiosk.
2. Some participants don't like to share their phone numbers to order.
3. After receiving the first message for an order number, although it says will send another message when their order is ready, none of the participants receive that second message.
4. Participant had a hard time finding calories.
Persona
After conducting the observation and synthesizing the data and notes the observation, then I was able to form a user persona with her needs and frustrations.
Design Process
Sitemap
in the design process, I begin with an information architecture sitemap with main features
Stekches
After I created the sitemap, I was able to know how many pages I have to design. Started with some sketches, and I was trying to find the best layout for different pages. Sketches also helped me to blow up more ideas when I was drawing them. I ended came up with two different styles of design for the customized drink pages. I listed both pros and cons for both designs, it helped me to have a clear understanding of which one works well more. I ended up choosing the v2 sketch as my design concept. These sketches also helped me to create and design my wireframe.
V1 Sketch
Pros:
-
Visually friendly, especially can help users who haven't seen the product and topping before, giving them a visual idea of what is it.
-
Allow users to have a visual idea of how much ice they want and what sugar level they want on their drinks.
Cons:
-
Too many steps might stress customers to order
-
Hard to add a description of the drink
-
Pictures are too small. some customers might hard to see what the drink looks like.
V2 Sketch
V2 Sketch
Pros:
-
Clean layout and design
-
The big picture and description will help users to have a better understanding of the product
-
scroll down allows users to click fewer buttons to avoid stress
Cons:
-
Compare to v1, v2 is less visually friendly than v2, only the drink has a picture.
-
Some users might not know they have to scroll down to choose their preferences.
Wireframe & v1 prototype
Based on my sketches, I was able to create the wireframes for main pages and my v1 prototype
V2 prototype
After finishing my wireframe and v1 prototype, I ask my classmates and instructor to do a usability test, below are some feedback I got from them:
feedback from instructor
1.Do you think favorites is in the right place? If your user comes to the store again after adding a favorite, do you think they should click 'orders' on the bottom and then look for 'favorites' at the top? Seems to me that it should be more easily accessible than that."
2.As far as Information Architecture, it’s confusing that cart on the bottom brings up another top menu that has cart.
Revision
based on feedback I got from instructor, I made some changes on my prototype
Favorite section
Add a favorite section to the main page, allowing users to find their favorite drink easier.
Hearts
Add hearts to order page and main page, allow users simply save their favorite drink anywhere
Name Change
Change the name from cart to orders. The name cart might confuse users, to avoid that, I changed the name from cart to orders where users can see their cart, previous orders and favorite drinks.
Add "Saved Preferences" Order page
Some users might have the same preference for different drinks, adding the saved preferences button allows users only click once to customize their desired drink
