Case Study:
Case Study:
The Sub Shop App Design
The Sub Shop App Design
Embedded Files
Project Overview
Project Overview
The problem
The in-store lines can be long at certain times, swaying away potential customers.
The product
The Sub Shop is a local sandwich store located in Columbus, Ohio. The Sub Shop provides a wide range of sandwiches at a competitive price.
The goal
Design an app for The Sub Shop where users can place orders online to reduce the time it takes to wait in-line at the store. Users will be able to place orders and submit payment.
My role
UX designer designing an app for The Sub Shop.
Responsibilities
Conducting interviews, paper and digital wireframes, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.
Project duration
April 2022 to May 2022
Understanding the user
To understand what users need, I conducted interviews and create empathy maps. Through this user research, the primary user group are busy working adults that do not have time to cook and do not want to spend the majority of their time waiting in-store.
Based on the user research, the long lines is a factor for users to staying and placing an order. However, other user problems became apparent not only in-store but also with the app design. Including what was having an order history, saved payment and submitting payment
User pain points
Time
In-store lines are long to wait at certain times swaying away customers.
2. Ordering
A platform for placing order and submitting payment
3. History
Forgetting what was previously ordered.
Persona and problem statement
Jake is a career driven busy adult who needs quick and easy method of ordering and pickup food because they have no time to prepare a meal.
User journey map
Jake's user journey map shows it would be helpful for an app to be able to place orders and submit payment.
Starting the design
Starting the design
Paper wireframes
Initial design drafts of each screen show how I would address the user pain points. By making the home page quick to add items and an easy ordering process.
Digital wireframes
I added these elements on the home page so that users can quickly add items to the cart and access their profile page to view order history
A navigation bar gives the user more control on what they want to access anytime while on the app.
Usability Study Findings
I conducted two rounds of usability studies. The first round helped to design mockups from wireframes. The second round was used to design a high-fidelity prototype from the mockups
Round 1 findings
Users want to order quickly
Users preferred to order on the app
Some users had trouble entering payment information
Round 2 findings
No re-ordering feature
No save payment feature
Refining the design
Refining the design
Mockups
Initial design was sufficient but after usability studies, I added a reorder option to the Order History, edit and sign out option for multiple users.
I added an option to save payment method, to reduce ordering time for future orders. Also added a progress bar to help users visually see the steps to completing their order.
Accessibility considerations
Voice control
Provided access to users who live with motor impairments with voice control.
2. Icons
Provided large icons to make navigation throughout the app easier.
Color contrast
Used color contrast for buttons and large detailed images for ease of the app visually.
Refined designs
High-fidelity prototype
The high-fidelity prototype shows the user flow for placing an order and submitting payment.
To view The Sub Shop high-fidelity prototype
Going forward
Takeaways
Impact
Users of The Sub Shop app enjoyed using it and prefer it to ordering in-store.
One quote from peer feedback:
"Ordering on the app should always be this quick and easy"
What I learned
The importance of usability studies in designing an app. One study can really change the app's design but it is best for the user.
Next steps
1. Testing
To conduct another usability study to see if there are any pain points that were missed.
2. User Research
Conduct more studies to validate the design changes.
3. Peer feedback
Send design for peer feedback for farther improvement
Page updated
Google Sites
Report abuse