Dragos Coman | Frankie's Project

Frankie’s

Crispy Crust it’s a must!

Market Research

Competitive Analysis

User Survey

Personas

Flow Diagram

Wireframes

Hi-fi Prototype

Usability Study

Accessibility Check

Role

UX Designer,

UX Researcher

Category

Food & Drink,

Shopping

When

Nov 2021 -

Dec 2021

I’ve created this app to assist Frankie’s customers in placing orders, making payments, and arranging for convenient pickup times. This will streamline the ordering process, eliminating the need for customers to wait in long queues.

User survey

I conducted a brief survey on Facebook among individuals who regularly utilize food delivery apps equipped with a tracking system.

40%

Price

Delivery time

20%

Reviews

15%

Information about the product and its images

10%

Customization

10%

Other

What is the primary factor you consider when deciding to place an order through a food delivery app?"

65 participants

I’ve downloaded and analyzed three apps, two of which are direct competitors, and one is indirect. I’ve conducted a comparative analysis of the ordering experience in each competitor's app for both new and returning users. Additionally,
I juxtaposed negative comments from App Store to discern the primary challenges users encounter and aspects they find unfavorable while using these apps.

Competitive analysis

The app boasts a simple, modern, and clean design. The ordering process is seamless, complemented by numerous filters and product categories.

Fabio Pizza

The navigation is unintuitive and takes time to get used to. The menu icons don’t have labels

The interface has too many colors which can lead to confusion and a sense of overload.

The application experiences performance issues such as slow operation and occasional freezing, indicating suboptimal optimization. The ordering process lacks smoothness, as users are unable to view products until logged in, potentially causing frustration and inconvenience.

Pizza Hut Delivery

It offers filters for food allergens and provides detailed nutrition declarations for products.

Products are clearly labeled as "hot" or "veggie," facilitating dietary preferences.

THE DRAWBACKS

THE POSITIVES

THE DRAWBACKS

THE POSITIVES

Business of Apps in their “Food Delivery App Revenue and Usage Statistics “article stated the global market for delivery apps will increase to $120 billion by the end of 2021, reaching $300 billion by 2027

$300B

$200B

$120B

2021

2022

2024

2026

2023

2025

2027

While I was searching for resources on the topic of food delivery apps and the functioning of the food delivery business,
I came across a couple of articles that assisted me in formulating approaches to ordering food online.

Anne Freer from Business of Apps states in her article "Food delivery app installs rose 34% compared to 2019" that demand for contactless ordering is still increasing, “as consumers who ordered food via apps out of necessity throughout the pandemic continue to do so.”

Market Research

According to the article "Grocery and food
delivery apps" by eMarketer, food delivery apps were among “the three fastest-growing
categories in 2020;”

A report from payment publication PYMNTS and restaurant tech provider Paytronix notes that “usage of both curbside and in-store are now nearly equal with the drive-thru” and that the “vast majority of takeout orders in 2020 (89%) were placed online.”

Home > Projects > Frankie's

Project summary

Throughout the project, I successfully conducted market research evaluations, executed a rapid user survey, developed a series of low-fidelity wireframes, transformed them into high-fidelity UI designs, integrated them into a prototype, and conducted a mini usability study. This journey was demanding and time-consuming, yet incredibly insightful. I acquired invaluable knowledge and skills along the way; however, I remain committed to continuous improvement. There is ample room for growth,
and I am eager to further expand my expertise.

Accessibility check

The app has been evaluated for contrast to match at least AA standards. Every frame was checked with contrast checker tools, such as the Figma plugin “A11y - Color Contrast Checker” and then by hand with the “Contrast Checker” by WebAIM.

Contrast Ratio

7:15:1

12:75:1

12:1:1

Thinly Sliced Carrots

+ $0,15

Fresh Basil

+ $0,15

Thai Red Curry Sauce

Sesame Seeds

Jalapeños

+ $0,15

Bell Peppers

Mozarella

Red Onion

+ $0,15

Ham

Marinated Chicken

Pinnapple Chunks

Choose your ingredients

Cheese Burst

Gurmand style

Thick

American style

Thin

Italian style

Choose your crust

Pizza Exotic Fusion 40cm

aprox. 520gr.

$9,78

Pizza Exotic Fusion 30cm

aprox. 450gr.

$8,23

Pizza Exotic Fusion 25cm

aprox. 380gr.

$7,89

Choose your size

Quantity

How hungry are you?

Pineapple Chunks, Marinated Chicken, Ham, Thai Red Curry Sauce, Mozzarella, Bell Peppers, Sesame Seeds

Exotic Fusion

$7,89

from

Add to Bag

Prototype validation

Study results

Prototype update concept

After creating the prototype, I conducted tests with 14 users. I developed a comprehensive research plan, outlining research goals, key questions, KPIs, methodology, participant information, and a task script. Primarily, I aimed to ensure a smooth ordering process, leading to successful purchases, and to ensure users understand when and how products can be picked up. Testing was conducted in-person using Figma's prototype mirror share app.

Tasks included adding single and multiple items to the cart, adjusting quantities, proceeding to checkout, and completing orders. Users were encouraged to verbalize their thoughts and express any confusion or frustration.

89% of participants were able to complete orders using both delivery and pick-up. 11% of the users were frustrated about the lack of paying with Meal Tickets so they abandoned the payment process. In future iterations I intend to include this feature.

Because of time constraints, I wasn’t able to run a second usability study on the updated prototype. However, I have updated the prototype by adding the possibility to pay with Meal Tickets.

Following the usability study, participants were asked to complete a brief System Usability Scale questionnaire.

Insights from participants were organized using an affinity diagram to identify natural relationships among ideas.

Finally, a usability study presentation was prepared to showcase insights and recommendations.

High-fidelity Prototype

I integrated my hi-fi designs into a clickable prototype using Figma, incorporating both custom and built-in animations. This will enable me to conduct initial user testing with the first group of users. Here's a live preview of the prototype.

High Fidelity UI Design

After finalizing the initial flow and preparing the wireframes, I began developing key screens for the app. Selecting an appropriate typeface and color palette were paramount. To ensure consistency, I established a simple UI Style Guide. For color selection, I opted for the HSL color model to precisely define tints and shadows of the primary colors. Additionally, I created a typography scale to maintain hierarchical consistency across the project.

Typeface

Colors

Lato

Regular, Medium, Bold

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

Secondary

Neutrals 2

Neutrals 1

Primary

Wireframes and initial insights

Getting feedback

After establishing the flow diagram, I began sketching low-fidelity wireframes of the primary user flow using pen and paper. However, due to space limitations, I opted to showcase only a couple of the digital low-fidelity wireframes I created.

After designing the low-fidelity wireframes, I developed a prototype for testing with a small group of users. I created a research plan outlining our goals, the questions to be asked, key performance indicators (KPIs), methodology, participant information, and a scripted set of tasks.

Following the data collection phase, I constructed an affinity diagram to identify patterns in participant behavior and frustrations encountered while navigating the prototype.

Subsequently, I prepared a usability study presentation to summarize the study, present key insights, and provide recommendations.

Social Network Buttons

Quick access to

most popular categories

Checkout and Pay

Buttons

Flow diagram

To outline all the necessary functionality, I created a simple flow diagram of the main tasks the user can do. One of the flows is shown below. Fall state flows were also created, but are not shown due to space constraints.

Main user flow

Registration

Home

Profile

Order type

History

Find shops

Start order

Product list

Filter

Product details

Profile view

Add to cart

Order history

Checkout

Product recommendation

Cart Details

Payment details

Placed order

Order details

Cancel order

Personas

I’ve created two personas to aid me in delving into the requirements of a broader user base and crafting my app with particular target users in focus

Goals

Achieve mastery in baking homemade pizza

Expand culinary repertoire by learning new recipes

Share enthusiasm for favorite online pizza recipes with others

Pain points

Lack of initial interest or willingness from others to try my homemade pizza

Feeling constrained by limited opportunities for discussing hobbies due to people's busy schedules.

Difficulty finding individuals willing to engage in conversations about their passion for baked pizza recipes.

Occupation

Project Manager

Location

Bucharest, RO

About David

David is a dedicated project manager overseeing a dynamic team, known for his strong family values and passion for culinary experimentation. Despite his occasional baking mishaps, he wholeheartedly embraces the kitchen as a creative outlet.

In his free time, David frequents the neighborhood pizzeria, eager to discover and purchase novel pies to inspire his home cooking endeavors. His adventurous spirit drives him to constantly seek out new flavors and techniques.

However, the bustling atmosphere of the local pizzeria leaves little room for leisurely interactions. David often finds himself longing for meaningful exchanges with fellow enthusiasts to discuss his latest culinary discoveries and seek feedback on his favorite pizza joint's offerings.

David Sinulescu

Age

Family

Married. 2 children

Goals

Prioritize her lifestyle and health, ensuring she gets enough sleep.

Avoid constant rushing and instead, prepare for the next day in advance.

Arrange for orders to be ready for pickup before her classes.

Pain points

I wish there were more than 24 hours in a day to get everything done.

It's frustrating when I encounter limitations in what I can do online; I want seamless access to everything I need.

I want to ensure I can consistently make it to my classes without any obstacles.

Occupation

Student

Location

Bucharest, RO

About Eva

Eva is a diligent and goal-oriented student, often burning the midnight oil to ensure her academic success. Due to her demanding schedule, she finds herself with little time in the mornings to prepare a meal. Instead, she relies on quick and convenient options to fuel her day.

One of Eva's go-to choices is a local pizzeria near her apartment, known for its mouthwatering and freshly made pies. However, the morning rush often results in
long queues, causing her to occasionally miss her bus while waiting to place her order.

Being mindful of her dietary preferences, Eva follows a vegan and gluten-free diet.
She makes sure to communicate these requirements when ordering to ensure her
meal aligns with her lifestyle choices.

Eva

Iacob

Age

Family

Single / No kids

User survey

40%

Price

Delivery time

20%

Reviews

15%

Information about the product and its images

10%

Customization

10%

Other

What is the primary factor you consider when deciding to place an order through a food delivery app?"

65 participants

I conducted a brief survey on Facebook among individuals who regularly utilize food delivery apps equipped with a tracking system.

I’ve downloaded and analyzed three apps, two of which are direct competitors, and one is indirect. I’ve conducted a comparative analysis of the ordering experience in each competitor's app for both new and returning users. Additionally, I juxtaposed negative comments from App Store to discern the primary challenges users encounter and aspects they find unfavorable while using these apps.

Competitive analysis

Unknown error when trying to save an address cannot save a card payment, cannot edit an existing saved address

Andrew

App displays incorrect pricing for products when offers available, causing masive confusion...

Sandra

Keeps saying incorrect form but does not show

why, I am disapointed!

Vanessa

It offers filters for food allergens and provides detailed nutrition

declarations for products.

Products are clearly labeled as "hot" or "veggie," facilitating
dietary preferences.

THE POSITIVES

The application experiences performance issues such as slow
operation and occasional freezing, indicating suboptimal

optimization.

The ordering process lacks smoothness, as users are unable to view

products until logged in, potentially causing frustration

and inconvenience.

THE DRAWBACKS

The app boasts a simple, modern, and clean design.

The ordering process is seamless, complemented by
numerous filters and product categories.

THE POSITIVES

The navigation is unintuitive and takes time to get used to.

The menu icons don’t have labels

The interface has too many colors which can lead to confusion
and a sense of overload.

THE DRAWBACKS

$300B

$200B

$120B

2021

2022

2023

2024

2025

2026

2027

While I was searching for resources on the topic of food delivery apps and the functioning of the food delivery business, I came across a couple of articles that assisted me in formulating approaches to ordering food online.

Market Research

According to the article "Grocery and food delivery apps" by eMarketer, food delivery apps were among “the 3 fastest-growing categories in 2020;”

Role

UX Designer,

UX Researcher

The problem

In the midst of today’s fast-paced environment, many individuals find it challenging to make time to cook at home or even to dine out at a restaurant. The challenge was to find a solution for these individuals to conveniently order and receive food on their own terms."

The Solution

Frankie's is a mobile app designed to assist customers in placing orders, making payments, and scheduling convenient pickup times. This will streamline the ordering process, eliminating the need for customers to wait in long queues., enhancing their overall experience.