Spanish Restaurant Website - Case Study
Designing a responsive payment website for a Spanish restaurant.
The Product
This responsive payment website aims to provide helpful, universal usage by customers. Accessibility is in mind throughout the design will assist with a smooth checkout process, deciding what food to eat and who to eat it with should cease being a concern.
Project Duration
August 2022 - October 2022
Target Audience
Young Adults (20 - 35) and Elderly (65+)
Overview
Problem
Spanish cuisine eaters often find themselves having trouble translating menu items. Checking out in large groups can also be a headache.
Goal
Design a responsive website that gives users more control and accessible options to complete their order
Role
UX designer handling all aspects from start to finish.
Responsibility
Conducting usability studies, creating paper and digital wireframes, research, prototyping, bringing in accessibility, and iterating on designs.
User Research Methodologies
Unmoderated usability studies
Creating user personas
Competitive audit
Accessibility statistics research
Affinity diagrams
User Pain Points
Acessibility
Language barriers and having to use an outside translation tool often turn people off from ordering what they might’ve really liked.
Time
It’s no secret that things can get messy when attempting to pay for food orders when you’re with a group of people.
Competition
European restaurants have the closest thing to competition when it comes to using this kind of methodology.
User Persona
Problem Statement
James is a single male who loves Spanish restaurants who needs more assistance when visiting an authentic Spanish restaurant because he isn't as confident selecting dishes when they are in another language.
User Journey Map
The user journey map for James shows that the website can include a cashless option of payments.
Paper Wireframes
Paper wireframes are always fundamental before creating the digital version. This copy helped a ton in the process.
Digital Wireframes
The item choices will be in preferred language, along with the price in plain sight.
Low Fidelity Prototype
The Low-fidelity prototype is a basic run through of what the final prototype is capable of doing. The main goal was make it to the checkout phase.
Usability Study
Users were extremely helpful with feedback, making it a smoother process for iterations.
Main Findings
Make the design more accessible for less tech-savvy people by making flow easier with better prompts and labels
Copy under icons is a safe route to take while continuing to improve iterations
Less tech-savvy participants seem to have a hard time with figma at start
Mockups: Before & After Usability Study
The early wireframes had the “order now” button on the hero image, but I chose to change that in the final stages.
The majority of mockups proved to be successful, so there weren’t many iterations for the overall design as you can see in this before and after.
Mobile vs Web
Mobile View
Web View
Accessibility Considerations
Giving the user the ability to change the language to their preference is a huge accessibility feature.
Color themes also pass the contrast checker.
Takeaway
Impact
This responsive payment website puts the power back into the user’s hands and gives them more confident when ordering at a Spanish restaurant. It takes the guessing out of the equation.
Quote from feedback
“It was perfect”
What I learned
Feedback is more vital than one may think and is the backbone to iterating to help make the users happier.
Next step
Check off list to make sure there are no more needed iterations
Double-check that sticker sheet is up-to-date
Next project