Embedded Files
Project overview
Project overview
The product:
The product:
Hi, I’m Shunli, I will take you through my entire process of designing interfaces for the delivery app! Lets you buy your favorite foods at home. We target busy workers and moms who don't have time to prepare meals or need a faster way to order and give customers the opportunity to save time and money.
Project duration:
Project duration:
January 2022 to August 2022
My role:
My role:
User Experience Designer responsible for the app design from concept to delivery that I created as my first work as a UX Designer for the UX Design Professional Certificate from Google.
Responsibilities:
Responsibilities:
My main responsibilities were conducting interviews, developing paper and digital wireframes, low and high-fidelity prototypes, conducting usability studies, accounting for accessibility, and iterating on designs.
The problem:
The problem:
Busy workers and students are lacking time to prepare meals or need a faster way to order or register them in-restaurant.
The goal:
The goal:
Our goal is designed to allow users to save time and money, quickly and easily by placing an order.
Design thinking process
Design thinking process
User research
Personas
Problem statements
User journey maps
Research — Understanding the user
Research — Understanding the user
I conducted several interviews and created an empathy map to understand the users I designed for and their needs. The identified primary user groups are busy moms and working adults who just want to save some time, and money and have a simple and straightforward overall experience.
Preliminary assumptions about potential customers were confirmed, that some customers found these products difficult to use, and some products did not provide enough benefits to use regularly.
pain points
pain points
Time: Busy moms and young people who don't have time to prepare meals at home during the workday.
Easy to use: The ordering platform isn’t easy to use, and the overall design is inconsistent.
Registration process: The sign-up process can be a huge pain point in the overall experience, and if customers have a hard time the complete signup, they are likely to go to a more clear competitor.
Accessibility: The product cost pain points and checkout issues can lead to lower sales.
Persona: JILL
Persona: JILL
Problem statement:
Jill is a busy mom with three kinds. She wants her family to eat organic food, but she doesn't have time to buy groceries herself to ensure quality. She hopes to get more orders through the app in order for meals for her family.
Persona: Lucas
Persona: Lucas
Problem statement:
Lucas is a university student who needs a fast and easy way to collect and order meals for pick up in-restaurant because Lucas wants to save time, and money and get free rewards.
User journey map
User journey map
Mapping Jill's user journey reveals how useful it would be for users to have an app that reduces the time-consuming and straightforward experience.
Competitive audit
Competitive audit
An audit of a few competitor’s products provided direction on gaps and opportunities to address with our app.
Competitive audit Link
Ideation
Ideation
For this project, I focus on user needs, context, and why the product is useful to users, and on the product itself and how it works.
Starting the design
Starting the design
Paper wireframes
Digital wireframes
Low-fidelity prototype
Usability studies
Paper wireframes
Paper wireframes
Since pen and paper are the only necessary tools for creating paper wireframes and allow for low-cost, quick iterations, create multiple wireframes in less time. We are also considered low commitment because all we need is a pen and paper.
Digital wireframes
Digital wireframes
Homepage
Easy to display for orders. Simple navigation and simple elements for the main task.
The home page provides elements designed to solve the user's main task.
A key user requirement is to have an organized structure and an easy way to navigate the application.
Digital wireframes
Digital wireframes
I'm totally new to Figma. But now I found it really helpful to just use Figma and I feel like I'm finally getting the hang of it with Figma, and I make sure that each screen design is based on feedback and findings from user research.
The user can easily create an account.
It’s possible to create an account using social media as well.
Low-fidelity prototype
Low-fidelity prototype
The low-fidelity prototype connects a user flow for registering a meal with a restaurant, and a user flows for ordering a meal for pickup or delivery, enabling usability studies with users.
low-fidelity prototype Link
Usability study: findings
Usability study: findings
I conducted two rounds of usability studies. One study was with the lo-fi prototype and another was later already with a high-fidelity prototype. Findings from the first study helped guide the design from wireframes to mockups. The second study used a high-fidelity prototype and revealed what elements of the mockups needed refining.
Round 1 findings
Round 1 findings
The sign-up process is confusing for most users.
Most users can’t confirm the successful completion of a task.
Most users don't know how to edit their addresses.
Round 2 findings
Round 2 findings
Want a faster way of going through the checkout process?
Want a simple way of customizing their meals?
Poor color contrast.
Refining the design
Refining the design
Mockups
High-fidelity prototype
Accessibility
Mockups
Mockups
The early design made it difficult for most users to find the signup process right away, but after usability research I decided to add the option to create an account before the process started. I also added the profile icon to place it in the navigation bar.
Mockups
Mockups
One of the findings after a second usability study using a high-fidelity prototype was the concern about the security of user payment data. During the checkout process, I include a reassuring copy to ensure users feel safe at checkout and add new payment methods to their accounts.
High-fidelity prototype
High-fidelity prototype
The final high-fidelity prototype presented a straightforward user flow with a clear and simple design meeting users’ expectations with in-app order and reward system.
high-fidelity prototype Link
Accessibility considerations
Accessibility considerations
Used detailed imagery for pizzas and popular to help all users better understand the designs.
Images, colors, and recognizable icons were strategically used to direct users to the appropriate actions.
High contrasting colors were used to make it easy to differentiate between elements.
Going forward
Going forward
Takeaways
Next steps
Takeaways
Takeaways
Impact:
The app looks mature and ready to be in the hands of the users. The design feels very clear and is surely user-focused.
What I learned:
What I learned:
As a beginner in UX, not only is everything a challenge, but I understand and learned that about giving and receiving feedback on my designs. This can help me find ways to improve my work. Good feedback helps to come up with new questions or ideas that I might not have thought about before.
Next steps
Next steps
Do additional research to see if there are any pain points that need to be addressed along the way.
Conduct another round of usability studies to determine any new areas of need.
I’ll test many interactions and animation options until I find one that suits me.
Thank you
Thank you
Thank you for your time reviewing my work!
Page updated
Google Sites
Report abuse