Overview

I conducted interviews and created empathy maps to understand the users I’m designing for and their needs. A primary user group identified through research included working professionals who like the convenience of ordering their food ahead of time and tracking their order’s progress.

This user group confirmed initial assumptions about the Sammie’s customers, but research also revealed that it is very important to users that there is a way to choose specialty items, as well as customize their sandwich order.

The product: A sandwich ordering website for users to order for pickup and delivery.

Project duration: March - April 2022
Revised in 2025

 

My role: UX designer designing an app for the Sammie’s website from conception to delivery.

My responsibilities: Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, iterating on designs, and responsive web design.

 
 

Research

Pain Points identified among users

Crowded Interface

An interface that is crowded with text, images and other design elements makes it harder to navigate through the website. Sammie’s website will focus on visuals to make the user flow simple and less overwhelming.

order tracking capabilities

Many user’s who order their food online prefer to see what the progress of their order is. From the moment the kitchen receives a customer’s order to when the delivery driver has picked it up from the restaurant is on their way, Sammie’s Website will have those viewing capabilities.

Inaccessible Color/font

Colors that are too light and fonts that are too hard to read. Sammie’s Website will meet accessible design guidelines to ensure everyone can use the website.

 

User Persona

Sarah, 40

Library Media Center Director, Multiple Master’s Degrees
Chicagoland Area

“Time is limited and valuable, so when ordering food for my family it is important to track it on it’s way to my house”

Sarah is a Library Media Center Director at a K-5 school. When she is at home spending time with her family, she likes to have meals for her husband and two kids be as streamlined and efficient as possible. So when she orders food online, it is important that she is able to see how long delivery will take, track the order’s trip to her house as well as possibly schedule the delivery to arrive at a time that is most convenient for her schedule.

 
 

Sitemap

Creating a sitemap helped me jump start the design process and organize how the Sammie’s website would be structured.

 
 

User Journey Map

Mapping Sarah’s user journey revealed how helpful it would be for users to have access to order progress details.

 
 
 

User Flows

Creating user flows helped me determine the best way to guide users through the app.

 

Wireframes

Home Page

The goal is to have a full overview of what is offered on the site and have it easy for the user to choose where they would like to navigate to next.

Order Page

For the Order page, the goal is to help the users get as much information as possible without needing to click to other pages.

 

Desktop Wireframes

Home Page

About Page

Menu Page

Menu Item

Locations Page - Empty State

Locations Page - Filled State

 

Mobile Wireframes

Home Page

Locations Page - Empty State

About Page

Locations Page - Filled State

Menu Page

Locations Page - Drawer Expanded

Menu Item Page

 

Low Fidelity Prototype

Interact with the low-fidelity prototype to experience the ordering process.

 

Usability Study Findings

I conducted monitored usability studies with five people between the ages of 25 and 65. Each person had a different background in experience with ordering food online and provided a variety of insights to help improve Sammie’s Sandwich Website.

Round 1 Findings

  1. Cart page needs to be easier to navigate to

  2. The first page should be the Home Page, not a login page

Round 2 Findings

  1. Colors need to be more accessible

  2. Add a feature to the cart icon that tells you how many items you have in your cart

 

Mockups

Desktop

Home Page

Menu Page

Locations Page - Empty State

Order Confirmation Page

Menu Item Page

Locations Page

before Iterations & usability study

 

Here is a snapshot of the website/app before usability testing and further iterations.

These screens highlight how my skills as a UX Designer have evolved over the past two years of professional experience.

Feel free to click on the link below to take a closer look.

 
 

Track order page before usability study:

Track order page after usability study:

 

Hi-fidelity Prototypes

Desktop Prototype

Interact with the hi-fidelity prototype to experience the app. Updates to the prototype are in progress.

 

MOBILE prototype

 

ACCESSIBILITY CONSIDERATIONS

The colors of the buttons were updated to be a darker orange to meet accessibility requirements.

Order overview page was simplified and condensed all onto one page to make the checkout process more efficient and less steps.

 

Takeaways

Impact

The website makes users feel like Sammie’s really strives to meet their needs. 

What I learned

While designing Sammie’s Sandwich Website, I learned that the first ideas of the app are just the beginning of the design process. Usability studies and peer feedback kept improving the app during each iteration.

 

Next Steps

Conduct another round of usability studies to validate whether the pain points users experienced have been effectively addressed.

Conduct more user research to determine any new areas of need.

 

Let’s Connect!

Thank you for your time reviewing my work on the Sammie’s Sandwich Website! If you have any questions regarding myself or my work, please feel free to reach out!