top of page
Google UX Project: Autumn Grill
UX/UI Case Study
Role
UX/UI Design
User Research
Prototyping
Tools
Google Forms
Figma
Maze
Timeline
June 2024 - July 2024
Usability Testing
Overview
Problem
Many individuals find it difficult to multitask between making nutritious meals for work or other types of activities. Additionally, most users find it challenging to place orders with healthy restaurant applications and locate specific features to fulfill their needs. This can negatively affect schedules, forcing users consume an unnecessary huge portion of time cooking healthy meals.
Solution
Autumn Grill is 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.
User Research - Survey
Number of users: 5
*not statistically representative
Number of questions: 11
Design Process
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:
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.
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. These encapsulate the main demographic of target users and how their goals align with the utilization of the application's features.
To obtain a better understanding of where and when the pain points occur, 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.
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.
Wireframes
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. Each page had been created to determine the best design choices for seamlessly ordering food.
Homepage Sketches
Build Sandwich Sketches
Scheduled Orders Sketches
Menu Sketches
Homepage screen contains various interactive components
Depicts when the newest and oldest orders were made for the user
Users can customize a regular schedule for when their food arrives
Prototyping
Low-fidelity Prototype
To determine the effectivity of the functionality and usability aspects when navigating the application and using distinct features embedded into the interface, a low-fidelity prototype had been implemented for the first usability test. It would serve as an opportunity to locate potential issues early on to capture an excellent user experience.
Usability Test #1 Results
Task: Make an order through the app
Number of participants: 8
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.
It was not easy. I found it confusing to use and I couldn't 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 isn't."
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 cancel the order."
Design System
Buttons
Montserrat 22
Montserrat 18
Montserrat Semi Bold 18
Montserrat Medium 16
Montserrat 14
Montserrat 12
Typography
Input Fields
Cloud Burst
#1e2b5c
Red Wood
#5b1a16
Carousel Pink
#f8e1df
Lunar Green
#444630
Yellowish Tan
#fff490
Color Palette
High-fidelity Prototype
The initial usability test provided much insight regarding the enhancements made to the user interface in order to output a straightforward and intuitive experience. All feedback had been deeply considered when applying a new design layout for placing an order and retrieving crucial information that would enhance how users digest content.
Option for light and dark theme for a more accessible experience
High color contrast for those who have visual impairments
Usability Test #2 Results
Task: Make an order through the app
Number of participants: 4
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.
It was easy to make an order since the tabs for orders were in plain sight and easy to find."
I think the app was fine."
It was easy to find on the bottom of the page. The menu items had some nutritional information below each item as well."
Next Steps
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.
The knowledge and skills that have been learned from the project will be applied to future endeavors and allow me to have a keener sense when producing exceptional human-centered designs, leaving a lasting impact on many who desire simple methodologies for accomplishing tasks.
bottom of page