By Juan Rosas

UX / UI Case Study 2023

Project overview

The product:
A local restaurant directory app that aims to provide
users with a convenient way to discover, explore and
order from a wide range of restaurants in their area.

Project duration:
March 2023 - June 2023
Project overview

The problem: The goal:

Customers find it challenging ordering from The goal of the project is to help customers
local restaurants in a convenient and reliable find restaurants quickly and accurately order
manner. and pay, to get their food As fast as possible.
Project overview

My role: Responsibilities:
I’m a generalist UX designers playing all the My responsibilities include user research,
roles from UX Researcher, Interaction Design, wireframing, prototyping, writing, and visual
Visual Design, UX Writing, etc. design.
 ● User research
Understanding ● Personas

the user ● Problem statements

● User journey maps
User research: summary

The user research conducted for GitMeal targets customers that have some experience with
ordering food (Ubereats, Grubhub, etc..) and browsing for restaurants on apps such as Yelp and
TripAdvisor. This group consists of both men and women in their mid twenties to mid thirties with
lower to middle class income. The assumptions I’m making is that taking orders and processing
payments causes delays for customers and causes a bottleneck for the staff. The research I
conducted is to interview 5 takeout food consumers and ask them about their experience with the
order process including the user interface.
User research: pain points

1 2 3 4
Long Wait Times Incorrect Order No online presence No Food Details

Restaurants have long The staff must write down The food stands Online Menus don’t
lines, because the staff various food orders even sometimes are not even usually provide enough
must take orders, collect during busy times which found on the internet food details for customers
payments, and cook. The may result in customers making it hard to order to order confidently. The
designs moving forward receiving wrong orders. ahead or to simply get design moving forward
must alleviate the short The design moving forward directions or more must provide more
staff and long wait times must reduce order information. The design pictures, ease of use, and
by automating many of mistakes with the help of moving forward must general descriptions of the
the tasks. technology. focus on bringing more food items.
visibility to restaurants.
Persona: Joanda Guile

Problem statement:
Joanda is a busy store owner
who needs an app to find and
order food from restaurants in
advanced, because she doesn't
have the time to deal with long
wait times or incorrect orders.
Joanda Journey Map Goal: Order takeout food fast as possible.

ACTION Go To Restaurant Visit Restaurant Place an order Wait for order Pickup Order

Tasks Tasks Tasks Tasks Tasks

A. Find directions A. Arrive at A. Get in line A. Stand by the A. Notify staff that
to restaurant. restaurant. B. Place Order waiting area you’re picking up
B. Commute to B. Locate takeout C. Make Payment B. Wait to be called the order
TASK LIST restaurant. menu. B. Show receipt or
C. Arrive at be acknowledged
restaurant. C. Pick up order
and exit restaurant.

● Hopeful ● Rushed ● Impatient ● Aggravated ● Excited

FEELING ● Anxious ● Confused ● Nervous ● Alert ● Relieved
ADJECTIVE

Better way to find A more convenient A better way to A way to send an A way to show
directions and way to find a place an order alert when the proof of purchase
IMPROVEMENT more information current takeout without the added food is ready by via phone app or
OPPORTUNITIES about restaurant. menu stress and text or call. text without the
confusion need to explain.
 ● Paper wireframes
Starting ● Digital wireframes

the design ● Low-fidelity prototype

● Usability studies
Paper wireframes

These are 5 variations of

the home screen for
GitMeal. Initially a
home/search page with
featured restaurants. The
bottom right image was the
version I settled for the
lo-fidelity digital screen.
Digital wireframes

Tapping the
The main homepage was made search bar
opens the
with a search bar near the top, search page Insert first wireframe
example that
a scrollable featured list, and demonstrates design Restaurant list
on the main
thinking aligned with home page
restaurants from previous user research features a
horizontal
orders near the bottom. This scroll that
reveal more
gives the user three restaurant Tapping on restaurants.
these card
options to order from. takes you to
menu page of
restaurant
Digital wireframes

The main restaurants page Banner image

of restaurant
for each restaurant is Insert first wireframe
example that Continue button
Total Items
focused on showing menu and Cost
demonstrates design navigates you to
thinking aligned with the payment page
updates here
items to optimize the user research
Take-Out experience.
Add/remove menu
items by tapping
the add button.
Digital wireframes

After the payment

information page, the Insert first wireframe
example that
following screen is to demonstrates design
thinking aligned with
schedule a time for pick up user research
along with the pickup The pickup
Dropdown to
address for
choose your pick up
address to avoid confusion. your takeout
time

The schedule button

confirms the above
information.
Low-fidelity prototype

This is a Low-Fidelity Prototype

where the user selects a restaurant
from the home feed or search page.
The users then picks a menu item
and completes the order process.
Link to low-fidelity prototype
Usability study: findings
The conducted usability studies aimed to evaluate the user experience of the GitMeal app,
focusing on usability, functionality, and user satisfaction. Round 1 focused on initial study and
Round 2 validates the effectiveness of the implemented changes, tests the improved user
experience.

Round 1 findings Round 2 findings

1 Limited restaurant on home feed 1 Too many scrolling card options

2 Confusing add to cart option 2 Not enough information about menu

3 Hard to schedule a pick up time 3 Schedule time option is easy to ignore

 Mockups
Refining
●
● High-fidelity prototype
the design ● Accessibility
Mockups
Before usability study After usability study

After conducting a usability test,

I made all the cards horizontally
scrollable. I added an order
button and bookmarks buttons
for each card, as well as a main
footer bar at the bottom.
Mockups
Before usability study After usability study

The restaurant page was

simplified for accessibility. Pickup
address can be easily changed
with a tap, a prominent "View
Cart" button at the bottom, and a
back arrow button for returning
to the previous page. Each menu
item now has its own page.
Mockups
Before usability study After usability study

The Order Confirmed Page,

which includes a schedule button
to confirm pickup information,
has been conveniently integrated
into the Add To Cart Page,
eliminating the need for an extra
step once the order is placed.
Mockups - Order Process
Mockups - Checkout Process
High-fidelity Prototype Link to Hi-Fi Prototype

The high-fidelity prototypes allow users to easily navigate through various screens, including
account, search, home, saved, and orders. The home feed showcases restaurants with
horizontal scrollable cards, providing a visually appealing experience. The take-out order
process flows seamlessly from restaurant selection to order completion.
Accessibility considerations
1 2
Clear and concise menu Using appropriate color
descriptions with a simple combinations and ensuring
way to add or remove sufficient contrast between
ingredients or add special text and background to
instructions to assist users enhance readability,
with specific dietary needs accommodating users with
or restrictions. visual impairments or color
blindness.
3
Designing the app to be
accessible and adaptable
across different devices and
screen sizes, facilitating
usage for users with mobility
impairments or those who
rely on assistive
technologies for device
interaction.
 ● Takeaways
Going forward ● Next steps
Takeaways
Impact:
GitMeal has the potential to simplify restaurant
discovery, promote trust in local businesses, and
contribute to the growth of the food industry.
One quote from the feedback:
“Love how fast I can place the order! I can see this
app competing with UberEats and Yelp”
What I learned:
The key to building great apps lies in
empathizing with your users. By ensuring easy
and familiar navigation, aesthetically pleasing
color contrast and details, and a layout that
gently guides users to the next step, you can
create designs that are accessible and avoid
overcomplicating the process.
Next steps

1 2 3

I would focus on Refined the app's design, Research into

conducting another user improving user interface development options,
tests and gather feedback elements, addressing possibly getting together
to validate the usability usability issues, and a team or finding a
and effectiveness of the optimizing features based no-code option to build a
GitMeal app. on the insights gained. minimum viable version.
Let’s connect!

Thank you for taking your time to review my GitMeal App. If you would like to contact me for a job
(contract or full-time), collaboration or just to say “Hello!” you can get in touch with the information
provided below:

Email: techrosas@gmail.com
LinkedIn: https://linkedin.com/in/juanrosaspro