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

I found that in my travels to Europe, the concept for this already in-use, which makes me confident that it can work on a wider scale.

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

Page updated

Google Sites

Report abuse