Frida's Food Truck - Website
Context
Completing the Google User Experience (UX) Design certificate, I created a case study for a fictional food truck, Frida's Food Truck from August - October 2023.
I had already made an app version and wanted to create a site that was responsive.
Much of the research for users is the same for the website as it is for the app.
The Challenge
Frida's Food Truck is a food truck that primarily serves working adults with busy schedules.
Project Goal
To create an interactive prototype of a website to allow for food delivery from a food truck.
Scope
End-to-end
Tools
Figma
Role
UX Designer
Team
I worked individually on this project from ideation to delivery.
Responsibilities
My role in this project was to ensure the completion of this app design from ideation to prototype.
In order to design the app, I:
-
Ideated designs for the app
-
Benchmarked and audited similar food truck apps
-
Created two personas for users of this app
-
Performed user testing
-
Designed wireframes for the app
-
Designed mockups for the app
-
Designed interactive prototypes for the app
The process was a very fun and enlightening experience. I gained experience using Figma.
Research Study Details
Key Steps
-
Benchmarking
-
Creating personas
-
Ideating with paper wireframes
-
Creating wireframes using Figma
-
Performing user testing
-
Creating mockups using Figma
-
Creating interactive prototypes using Figma
Target Audience
The target audience of this app was working adults with busy schedules who needed flexible ways to order food ahead of time.
Benchmarking
I took most of my benchmarking from the website versions of the apps during the first creation of the design for the app.
User Goal
I designed the app around a user's goal of getting a confirmation for an order that was scheduled ahead of time.
Personas
The personas I focused on were working adults with busy schedules. This primary user group need to order food for themselves or others.
Their pain points include:
-
Time - Working adults have busy schedules that require them to order food quickly
-
Flexibility - Due to the need to order food quickly, sometimes users make mistakes that need to be corrected, so they need the ability to edit their order
-
Accessibility - Other apps to order food do not always come with assistive technologies, such as translation features or screen-reader functions
Ideation
Most of the design comes from the design for the app, but I also wanted to make use of the larger space, though I had difficulty making in balancing out the vast negative space and content.
Digital Wireframes
When drafting the low fidelity digital wireframes, I focused on a very step-by-step process to match the needs of users. For instance, I have a cart icon for easy access to edit an order.
User Testing
I performed a user test with friends and family members.
Findings
-
Check out button - Users wanted a more visible and separate check-out button
-
E-payment option - Users wanted an e-pay option in the payment stage
-
Back button - Users wanted an icons for the back button instead of a button that used words
User Test Summary
The results showed that there needed to be more explicit buttons to implement actions in the food-ordering process, as well as more payment options for flexibility.
Mockups
For the mockups, I implemented the findings from the user testing. I made sure the checkout was always an option and made a more visible back button so users could change their order easily.
Conclusion
While designing the Frida’s Food Truck website, I learned that it is okay for designs and drafts to change, as long as the goal to meet user needs is being met.
Next Steps
My next steps would be to conduct another round of usability studies to confirm if users’ needs are being met and to conduct more user research to determine any new areas of need.