YOOS
YOOS~Your own original smoothie~ is a protein smoothie online shop offering to customers their favorite flavor.
Their delivery service is committed to making it easy for nutritious
pre-made smoothies shipped straight to customers' doors. Their smoothie packs, frozen at the peak of freshness, are a delicious balance of organic fruits, vegetables, etc.
Project Overview
Responsibilities
Busy professionals and students do not have time to make their own nutritious smoothies.They want to order pre-made smoothies online, but don't want to spend the time to find what you want or to order online every time.
Project
Protein smoothies online shop
My role
UX designer designing an app for YOOS from conception to delivery
Project Duration
June 2022 to August 2022
Tools
Figma
Google slide
The Problem
Busy professionals and students do not have time to make their own nutritious smoothies.They want to order pre-made smoothies online, but don't want to spend the time to find what you want or to order online every time.
The Goal
Design an app for YOOS that users to easily find what they want and receive product at home.
Design Process
Understanding the Users
I conducted interview to create empathy maps, persona and user journey maps to understand the users I’m designing for and their needs.
A primary user group identified through research was working adult who are health-conscious to maintain their nutritional status, but are too busy to spend time and effort to prepare.
This user group confirmed initial assumptions about YOOS potential users, but research also revealed that time was not only factor limiting users from making smoothie on their own.
Other user problem include obligation, interest or challenges that make it difficult to get groceries to make smoothie or healthy meals.
User Research: Pain Points
1
Time
Working adult are too busy to spend time to make smoothie on their own.
2
Accessibility
Platform for ordering smoothie are not equipped with assistive technologies.
3
IA
A large variety of flavor options often takes a long time for users to find what they need.
User Persona:Alex
User Persona:Sandra
User Journey Map: Sandra
Market Research
Before I begin designing, I analyze the strengths and weaknesses of my competitors to explore ideas for my designs to learn about what has worked and not worked. In this project, we categorize competitors into two types: direct competitors and indirect competitors.
Direct competitors are companies that offer products similar to yours and focus on the same customer base.
Indirect competitors can have a similar set of offerings and a different audience, or a different set of offerings with the same audience.
Competitive audit
From my competitive analysis, I learned that:
Competitors’ strengths
-
Accessibility and live chat offerings
-
Text instructions or on-demand video on how to use
-
Provide subscription and one-time purchase
Competitors’ weaknesses
-
Lack of language options limits potential users
-
Filter features to narrow down item lists
From analyzing the competitors,
leads to the question...
How might we a design a system that allows users to sort out what they need based on their objectives?
How might we incorporate the user needs in a delightful interface and provide great assistance features?
Starting the design
I began by anticipating the needs of the user in their interaction with the product. A clear and simple way to outline this process is to create a user flow.
Then I sketched some ideation sketches of each screen of the app on paper and build paper wireframe. After that I transit from this paper wireframe to a digital wireframe to build a digital prototype.
User flow chart
.png)
Paper wireframes
Taking time to draft iterations of each screen of the app on paper ensured that the elements that made it to digital wireframes would be well-suited to address user pain points. For the home screen,I prioritized a quick and easy ordering process to help user save time.
As the initial design phase continued,I made sure to screen design on feedback and findings from the user research.
Digital wireframes
Low-fidelity prototype
Usability Study
After wireframes and lo-fidelity prototypes, I conducted usability test to figure out if users can complete tasks within the prototype of our YOOS app. Identify if there are any other difficulties/challenges before move to next step.
Study type:Unmoderated usability study
Location:Germany, remote(Participants will go through the usability study in their own homes)
Date: July 20th - 23rd
Length: 10~15 min
Participants are anyone who has ordered /made a smoothie before.
Two males, two females and one non-binary individual, aged 18-75.
Participants include people with
・1 user who isn’t fluent English
・1 user with severe fruit allergy
・1 user of assistive technologies
Affinity Mapping
.png)
Findings
Users want to select products before selecting a plan.
1
Users need a clear organization of the plan page.
3
2
Users need better cues for how to build their smoothie box.
Users need a more intuitive way to access the filter button.
4
Refining the design
Design system
Mockups
Early design allow user to open how it works page to read through but some user tend to skip to move next step and got stack. Because of that I added on-demand video and bring it to before home screen(which automatically play after open this app).
In addition, a usability study revealed that the design for choosing “plan” and “size” was confusing to users.
Dividing the page into 2 pages so that user can select size and plan separately, lead users clear flow.
The second usability study revealed that customer were concerned about typing correct information and there was no confirmation of registration after submitting information.
Eliminated password registration and create verification page with am verification email sent to the customer, confirming that the correct information had been registered before the password was set.
High-fidelity prototype
Accessibility Considerations
1
I made sure to meet WCAG’s AA or AAA level compliance by using color interface plugin A11y - Color Contrast Checker on figma.
2
Provided on-demand instruction video for people who have problem with reading instruction such as dyslexia.People who are deaf or hard of hearing can read the text presentation or can access the auditory information through captions.
3
Multiple language options give users more option and accessibility menu offer multiple option of accessibility suck as screen reader and text adjustion.
Going Forward
Project Takeaway
Impact
The app makes users think YOOS really thinks about how to meet their needs.
A quote from peer feedback:
“The interface looks good and modern, it is intuitive throughout the box building process till the checkout.”
What I learned
From working on this project, I learnt that each usability study dedicate a very great perspective on how user feel about using the app and what kind of response they get from the visual design and interface.
What are the next steps?
Conduct another round of usability studies to validate whether the pain points user experienced have been effectively addressed.
With additional time, I would like to build out the existing features, especially the payment section to design it to be more user-friendly and accessible.