Payment App
Designing a payment app for a Spanish restaurant.
The Product
This payment app aims to have universal usage across every Spanish restaurant globally. By giving customers helpful accessibility options and 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 food enthusiasts desire a more efficient and helpful way to pay for their food at restaurants. This is especially the case with large groups.
Goal
Design a payment app 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
Often times, the language barrier prevents people from ordering a specific dish that they may be interested in but would not know.
Time
Restaurant goers who eat with large groups have complaints that paying for their food gets complicated and adds unnecessary time to their visit.
Competition
People find that there aren’t many, if at all, payment apps for Spanish restaurants that provide needed assistance.
User Persona
Problem Statement
Jessica is working mom and girlfriend who loves eating out at Spanish restaurants but needs them to have better payment systems and accessibility options for their menus.
User Journey Map
The user journey map for Jessica showed that a payment app can alleviate splitting the bill headaches and that she enjoys reading reviews on menu items before purchasing.
Paper Wireframes
The paper wireframes helped bring to life the low-fi prototypes. Without these paper wireframes, it would’ve been tougher to craft a digital wireframe from memory.
Digital Wireframes
Users can make better decisions on what they wish to order based on reviews from past customers who’ve had the same dish.
My initial design and thought process included a large “Pay” button (on every page) so users would be able to checkout at any point of their journey.
Low Fidelity Prototype
The Low-fidelity prototype saw users select their accessibility options before being able to select which foods they wanted to add to their order. The last page showed them their order was a success. Link to Prototype
Usability Study
Two rounds of usability studies helped me make the correct and needed iterations on my high-fi design and mockups. Users clearly outlined where they ran into issues.
Main Findings
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 - 1st Iteration
In the early designs, there was a huge option for users to select their favorite menu items from past visits. After studies, that button got removed for a cleaner aesthetic.
Mockups: Before & After Usability Study - 2nd Iteration
After another round of usability studies, it was clear the user wanted to have more control, so there were more buttons with a color theme that helps guide users where to press.
High Fidelity Prototypes
Accessibility Considerations
Users will be able to select their language preference at the start of their user journey that will translate
Icons with words were paired together to give users more guidance. Color themes also pass the contrast checker.
Takeaway
Impact
This app gives users more control over the ordering process compared to standing in line and ordering from a live person or waiting at the table for your waiter to take your order. It also gives large groups an easier outing.
Quote from feedback
“Nothing was confusing, it was solid, it was clean.”
What I learned:
I learned the importance of getting feedback from users through usability testing. The feedback gives you just what you need to make the iterations that’ll make the experience more enjoyable for all users.
Next step
Conduct another usability study with different users to see if all the iterations are worthy based on their feedback.
Refine sticker sheet and improve the aesthetics that aren’t as refined as they could be.
Next project