UX/UI DESIGN

BeachSide SnackShop mobile app

Order food online and track your delivery in real-time for a simple and efficient experience.

ROLE

UX/UI Designer

UX Researcher

TEam

Rollin solo!

timeline

April - December 2023

tools

Figma

01. overview

The context

Design a food delivery tracking app for BeachSide SnackShop, a local oceanside restaurant.

I undertook a project to enhance the customer’s experience by designing a food delivery tracking app for a local oceanside restaurant named BeachSide SnackShop.

the problem

Busy adults need a quick and efficient way to order and track online food orders.

I discovered that busy adults prioritize spending time on aspects of their lives that are important to them, such as family, work, and hobbies, and are often determined to find a quick and efficient way to acquire healthy meals through online ordering and delivery.

the solution

The BeachSide SnackShop mobile app offers users a fast and efficient online food ordering experience with real-time delivery tracking.

Its objective is to empower busy adults to reclaim their free time by enabling them to skip in-store lines and eliminate the hassle of preparing meals themselves.

Jump to the solution!

02. empathize & define

The starting point

Who is the target audience?

To acquire the most accurate insights, I decided to target adults, ages 18 years or older, of any gender, who are working professionals, college students, retirees, or busy parents, all individuals who are more likely to use a food delivery app.

What do I want to learn from the users?

Understand user’s needs and frustrations when using a delivery tracking app, as well as their process and behaviors with tasks related to my product so that I can create the most effective mobile app.

Who is the target audience?

Conduct a competitive audit and 1-on-1 interviews to gather insights, challenges, and pain-points for our potential users.

Research summary

After conducting competitive analysis and 1-on-1 interviews with potential users, we gathered helpful insights.

Uber eats

Doordash

In examining Uber Eats and DoorDash, two major competitors in the realm of online food ordering and real-time delivery tracking, I observed that their interfaces can become overwhelming due to the multitude of additional services they provide. For first-time users, it can be challenging to pinpoint exactly what they are looking for, whether it’s a specific restaurant or menu item.

pain point #1

Users value spending time on aspects of their lives that are important to them, like family and work

pain point #2

Users don't want to waste time using confusing and overwhelming interfaces

pain point #3

Users want a quick and easy way to order and track food online

The emerging problem

Online food ordering systems are confusing and overwhelming.

Busy adults often find themselves wasting time navigating through overwhelming and confusing online food ordering systems, diverting their focus from aspects of life that hold greater importance to them.

Synthesis

After understanding the challenges that users were facing with existing apps, as well as their own personal life experiences, we asked:

How can we design an intuitive mobile app for BeachSide SnackShop that provides a seamless online ordering system and accurate real-time tracking?

03. design & test

initial ideation

A short glimpse of my paper and digital wireframes

Usability Study

Going back to the users

After conducting low-fidelity prototype testing, I found that:

  1. Users need a more intuitive way to add items to their cart.‍
  2. Users need more convenient options to contact their delivery driver.
  3. Users need a more intuitive check-out and order confirmation process.

I made improvements to the low-fidelity design before moving forward with any hi-fidelity mockups.‍

  1. Increased the size of the plus button icons so they were more easily identifiable
  2. Created an additional screen after the checkout process that confirmed the user’s order
  3. Included a “call” and “message” button so users could contact their driver directly through the app

Before

after

People were finding it difficult to add items to their cart

  • 3 out of 5 participants tried clicking on the pictures to add items to the cart
  • 3 out of 5 participants saw use for having an additional pop-up when adding items to cart

“I was not able to add anything to my cart. I wasn’t sure because nothing added to my cart when I clicked the pictures.” - Amarilys

People want to know that their order went through after checking out.

  • 3 out of 5 participants were asking for an order confirmation

“How am I supposed to know that they got my order after I check out?” - Emily

Before

after

Before

after

People want to be able to contact their delivery driver.

  • 3 out of 5 participants were unable to contact the delivery driver.
  • 4 out of 5 participants expressed a desire to contact the delivery driver directly from the tracking page.

“I don’t know how to contact my delivery driver, what am I supposed to do? Would i have to call them from my own phone? I don’t want to do all that.” - Jasmine

Usability Study #2

Initial Mockups vs Final Mockups

After completing the first iteration of high-fidelity mockups, I facilitated another round of user testing. I discovered that...

  1. Design elements were way too crowded
  2. There was inconsistency with spacing, button and icon sizes, and placement of design elements
  3. The color palette and typography were distracting
  4. Certain page layouts were confusing and crowded

I decided to make some changes to improve the overall experience...

Please swipe :)

Before

After

Before

After

Before

After

Before

After

Before

After

Before

After

Before

After

Before

After

  1. Consistent sizing and placement of design elements using auto layout
  2. Choose a cohesive color palette that offers a sense of approachability
  3. Simplify typography with clean typeface choices

04. the solution

Beachside snackshop

With this mobile app, users can trust that they’ll have a seamless online food ordering experience.

The simplified ordering options and real-time delivery tracking will allow users to order at any time during their day, empowering them to reclaim their free time.

  • Real-time tracking and easy driver contacting allows users to feel confident that their order will arrive on time.
  • An intuitive layout and design provides users with an easy and straightforward way to place their orders.
  • Users can reclaim their free time by directing their attention away from prepping home-cooked meals.

Please swipe :)

Wishes

Accessibility considerations and refining the UI

  • Prepare designs to meet WCAG guidelines
  • Consider different accessibility features: different language options and how the design can be optimized for screen readers
  • Conduct a third usability test to pinpoint any features that may be missing or existing features that could be improved upon

LEarnings

Screens are scrollable and consistency in design elements is key

When I designed my first high-fidelity mockup, I was unfamiliar with auto layout. After experimenting with it, I learned how helpful it was in creating consistent and well spaced out layouts. I also realized that I can design screens that are scrollable, meaning there was no need for me to cram every element into a fixed size screen.

Say hi!