top of page
PROJECT TIMELINE
June 2024 - July 2024
.png)
MY ROLE
-
User Research
-
Affinity Diagram
-
Information Architecture
-
User Flow
-
Wireframing
-
Prototyping
-
Visual Design
-
Usability Testing
Autumn Grill - UI/UX Case Study
A nutrition sandwich application
TOOLS
-
Figma
-
Maze​
-
Google Forms
1. Project Overview
i. Background
A nutrition sandwich application that aims to provide healthy, high-quality lunches to 20 to 30-year-olds who have busy schedules. By ordering food through the app, users can schedule when orders arrive in the future and save time making protein-packed meals for work-related activities.
This project was created for the Google UX Design certificate program.
ii. Problem
The results of the user research conducted...
In-depth research had been conducted throughout the design process in order for the user interface to accurately address users' pain points.
Research uncovers that many individuals find it difficult to multitask between making nutritious meals for work or other types of activities. It has also been shown that most users find it challenging to place orders with healthy restaurant applications and locate specific features to fulfill their needs.
What is the most important factor when ordering from healthy restaurants?
80% food quality
60% vegan/vegetarian options
20% customized orders
How busy is your schedule when it comes to making food at home?
60% very busy
40% kind of busy
20% a little busy
On a scale of 1 to 5, how difficult is it to juggle having to cook food at home while completing tasks for your schedule?
1
(0%)
2
(20%)
3
(20%)
4
(60%)
5
(0%)
On a scale of 1 to 5, how easy is it for you to make orders through restaurant apps?
1
(20%)
2
(40%)
3
(40%)
4
(0%)
5
(0%)
On a scale of 1 to 5, how expensive is it for you to order from a healthy restaurant?
1
(20%)
2
(0%)
3
(20%)
4
(60%)
5
(20%)
iii. Solution
No time to cook? No problem. Serve 'em up with Autumn Grill!
Autumn Grill focuses on delivering healthy food for individuals who want lunches at the workplace, ensuring their schedules are less occupied and they have more time for more important matters. It also allows users to customize their orders, where they can build a sandwich, purchase a meal, or both.
2. Design Process
i. Addressing Pain Points
A deep analysis of the research was required to better understand the problems users face and specifically indicate how these issues become a detriment to their lifestyle. Moreover, the information given will be utilized in designing a superior user experience that simplifies the order process and makes it easy for users to locate certain features compared to other healthy food applications.
After thorough examination of the research results, the user pain points inform the following:
Can be preoccupied with work and not have time to make a healthy lunch.
Needs to adjust schedule constantly when working or cooking.
Difficulties in making affordable and nutritious food for others.
Unable to make purchases in a simple manner through restaurant apps.
ii. User Personas
To capture the essence of how users will utilize the application, two user personas were created that relate to ordering healthy food in potential situations.
iii. User Journey Map
The journey map showcases the steps users would take to order healthy food with a restaurant app. Since they would not be fully satisfied with the end result of their order process, the application would have the opportunity to incorporate a more usable and useful experience when purchasing meals.
iv. User Flow
A blueprint would be required for designing the order screens, how they will function, and where they will take the user. The application would possess a unique feature where users can schedule their orders in the future to save themselves the arduous time and effort of cooking high-protein food.
v. Wireframe Sketches
Before creating the digital wireframes, the conceptual paper sketches would need to ensure the application has a functional and simple user interface to traverse through in order to provide a superb experience for customers.
Five screen layouts for each page had been illustrated to determine the best design choices for the application.
Homepage Sketches
I created conceptual sketches for the homepage, which displays the functionality and navigation of the sandwich application. The designs have a layout where users can traverse certain pages quickly.
Build Sandwich Sketches
These wireframes showcase how users can build their own sandwiches. They can select various ingredients to put on their sandwich and can customize their order to their liking within minutes.
Scheduled Orders Sketches
A page where users can see their order history. After placing an order, the user can choose to either view the status of their orders or cancel one if they change their mind.
vi. Digital Wireframes
The digital wireframes would contain design elements that would correspond with the final version of the application.
3. Prototyping
i. Low-fidelity prototyping
Each screen would need to be connected so that a low-fidelity prototype could be created for the usability tests.
ii. Usability Test 1
A first usability test was conducted to gain feedback that revolved around the application's interactivity and usability.
Task: Make an order through the app
Results
​
After performing the first and second usability tests, each with five participants, I was able to understand user insights and how they affect the navigation and usability of the sandwich application.
The research findings for the first usability study:
First usability test results...
33.3% Direct Success
Most users were unable to make an order through the app with ease.
66% Misclick rate
More than half of the participants had not clicked on the right buttons.
28s Avg. duration
Total seconds to complete the task. In this case, it took a long time to place an order.
User feedback
"it was not easy. i found it confusing to use and i couldnt figure out how to continue after the “build your sandwich” screen so i ended the task"
"i think some screens are confusing and the use of the wireframes ended up being confusing to figure out what is clickable and what isnt."
"It was difficult to cancel the order because there was not much context to it, as to how to move forward in the correct direction and finally canmcel the order."
iii. Style guide
Several colors for the brand identity have been chosen that convey a feeling of serenity and integrity since they communicate a calm yet effective user interface design for many customers.
Buttons
Color Scheme
Montserrat 22
Montserrat 18
Montserrat Semi Bold 18
Montserrat Medium 16
Montserrat 14
Montserrat 12
Typography
Interactive Elements
iv. High fidelity-prototype
Taking the feedback into consideration and thoroughly refining the user interface, I redesigned the pages and created mockups of the final version of the application.
.png)
.png)
.png)
v. Accessability considerations
Additional changes to the user interface would provide accessibility options for those who have visual impairments. These include a color contrast for the iconography and a dark theme for those who want to reduce eye strain.
vi. Usability Test 2
Another usability study had been performed to comprehend how users would traverse the user interface and utilize specific features to achieve the desired result.
Task: Make an order through the app
Results
​
The research findings for the second usability study:
Second usability test results...
66.7% Direct Success
Most users managed to place and schedule an order through the application.
32.3% Misclick rate
More than half of the participants clicked on the right buttons.
15s Avg. duration
Total seconds to complete the task. The duration of time has improved since last time.
User feedback
"it was easy to make an order since the tabs for orders were in plain sight and easy to find."
"it was easy to find on the bottom of the page. The menu items had some nutritional information below each item as well."
"I think the app was fine."
4. Key Takeaways
My designs were able to give users a simple yet effective way to place an order for nutritious foods while tackling a problem area where they have difficulty making orders through restaurant apps. Throughout this project, I was able to gain extensive knowledge on how to create a high-quality user experience utilizing many tools and demonstrate the construction of a logical and usable design of a user interface.
UX Case Study
Vitto.ai
bottom of page