Eatalia
PAYMENT APP
A concept app UX design process
The problem and the goal
Eatalia is a digital payment app that allow users to trade with the press of a button.
As much as tourists sometimes feel uncomfortable handing over their credit cards to unknown sellers, street vendors need to provide a good experience for their customers.
Eatalia aims to fix that by closing the gap between those two sides.
Generating the prompt
Applying UX tools and techniques taught by Google-Coursera online course, I created this concept app. I ran an online random task generator (Sharpen) that suggested: "Design a payment app for a street food vendor in Rome".
My role
UX researcher, designer and visual designer.
Responsibilities
Primary research, wireframing, prototyping, and visual design.
Duration
March - September 2021
Starting off • Understanding the user
User research
Personas
Problem statement
User journey maps
User research • Interview script & affinity map
The research included 4 people playing as tourists/buyers; and 4 people as food vendors/sellers.
Each group (as they empathized in their roles) provided insights about frustrations and goals.
The research was done by interviews, in which a set of 6 open-ended questions - allowing people to elaborate and move freely, while they provided insights.
Although originally focusing on the selling-buying experience, subjects often brought up interesting points of view and unexpected features requests.
Affinity map
Pain points
• “Vendor only accepts cash.”
The app will have the credit card reader functionality.
• “Unecessary complexity.”
It should be simple and easy to go from point A to point B.
• “Lack of security.”
When shady vendors take a peek behind the car for its safety number, or when there is no association with financial industry big names.
• “No online menu.”
Both buyer and seller want the app to have this feature.
Competitive audit
Research also included making a competitive analysis. Since Eatalia is a payment app, prominent similar products already exist: Apple Pay, Google Wallet and Samsung Pay.
I evaluated features important from user surveys and identified which ones Eatalia could do better.
Meet the users • Personas
Anne Sikorski, the buyer
Paolo Galvani, the vendor
Problem statement
“Anne Sikorski is an executive who likes to travel and try new street food who needs a more safe and convenient way to pay for her food because she wants to feel secure about the payment, which should be easy and fast.”
“Paolo Galvani is a street food vendor in Rome who needs a more smart and flexible way to get paid by his patrons because he wants to offer a better buying experience for his customers.”
Buyer and seller user journey maps
Big picture storyboard
Closeup storyboard
Starting the design
Paper wireframes
Digital wireframes
Low-fidelity prototype
Usability studies
Paper wireframes • Validating geolocation
Eatalia is conceptually very simple. Still, it must provide security at front.
This sequence of ideas try to pinpoint the exact location of the user - in order to make sure they are paying the correct street food vendor.
Orders review process
Right before paying, the customer gets to see what was ordered and put on the tab by the vendor.
This list started way too detailed and got more and more streamlined until it reached the final format: photos, total amount, and a [PAY] button.
Digital wireframes • Consistency
While making the digital wireframes, I noticed the screens in need of more consistency.
So element sizes, placements for buttons, images and text were streamlined and made constant all over.
A better information flow
User points toward QR code
Confirm download
Confirm their location
Confirm what they ate
Choose payment option
Confirm with fingerprint again
Payment success message
Low fidelity prototype • User flow
This ideal user flow shows what happens from the moment you point the camera to the food truck QR code.
Usability study • Parameters
Type: unmoderated with prompts
Participants: 5
Location: Remote
Length: from 3 to 6 minutes each
Usability study • Findings
Users want better understanding when presented with the ordered items.
Most users found the payment process smooth and easy; most spoke in a positive tone.
Users want a way to return to "Orders" and add new food items before commiting to pay.
Refining the design
Entering the high-fidelity mockup and prototype phase, I was able to flesh out what the final product would be if it went into production. As a way to keep consistency, I made a sticker sheet with components, fonts, colors, and graphic elements that I referenced.
And incorporating the users feedback, the app eventually evolved this way:
Mockup evolution
A streamlined flow:
Download and confirmation done in a single step
Chance to go back and buy more food before confirming the payment
Messages more clear with better phrasing
Consistent use of color and element sizes
Selected payment option clearer
Improvements for a next iteration
Offer a better Favorites Food management process
A more streamlined interaction between final tab and payment screens
Better navigation options between Profile and Orders
Conclusion • Learnings
I got to experiment with Figma, a rewarding process that seemed to me as a combination of Photoshop and Illustrator - tools that I'm more familiar with.
Some evident aspects appear when we design following all the steps.
For example, the need to "back out of the payment process to shop some more" is so prevalent in any digital experience that it didn't occur to me including it in Eatalia. Yet, once pointed out by further investigation, it seemed obvious the lack of this feature.
Going head to head with Apple Pay and Samsung wouldn't be feasable nor practical, but as a means to learn UX processes and thinking, designing Eatalia was a great opportunity to step further into the UX universe.
Let's connect.
Looking for a digital designer with solid graphics background, strong sense of ownership, and always curious to learn more?
Let's see if we can work together!
