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

High fidelity prototype • A better flow

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 UX visual designer with a solid graphic design background, strong sense of ownership, and always curious to learn more?

Let's see if we can work together!