Snax - Snack Ordering App
The problem:
Have you ever been to a theatre and had trouble ordering snacks? It's a common problem that many of us have experienced. Whether you want to avoid the long lines at the concession stand or don't want to miss any of the movies, it can be frustrating when trying to order snacks at a theatre.
The goal:
Design a snack ordering app that will allow users to place group orders in advance, allowing them to save time by skipping the physical in-store order queue.
Project duration:
October 2022 to February 2023.
My Role:
Research and design
Responsibilities:
I conducted interviews, paper and digital wireframing, low and high-fidelity prototyping, usability studies, accounting for accessibility, and iterating on designs.
Understanding the user
-
User research
-
Personas
-
Problem statements
-
User journey maps
User research: summary
I conducted interviews and created empathy maps to understand the users I was
designing for and their needs. A primary user group identified through research
was working adults who like to order snacks in groups.
This user group confirmed initial assumptions about the users, but research
also revealed that time was not the only factor frustrating for the user when they ordered snacks. Other user problems included obligations, interests, or challenges that make it difficult to order snacks.
User research: pain points
1
Time
Working adults are too busy to spend time in queues
2
Accessibility
Platforms for ordering food are not equipped with assistive technologies
3
IA
Text-heavy menus in apps are often difficult to read and order from
Persona: Reena
Problem Statement:
Reena is a busy paramedic who wants to order snacks in advance because she doesn't have time and struggles in waiting in line at the movie theatres.
User journey map
Mapping Reena’s user journey revealed how helpful it would be for
users to have access to a dedicated snack-ordering app.
Starting the design
-
Paper wireframes
-
Digital wireframes
-
Low-fidelity prototype
-
Usability studies
Paper wireframes
.jpg)
Taking the time to draft iterations of each screen of the app on paper ensured that the elements that made it to digital wireframes would be well-suited to address user pain points. For the home screen, I prioritized a quick and easy ordering process to help users save time.
Digital wireframes
As the initial design phase continued, I made sure to base screen designs on feedback and findings from the user research.
This search button at the top of the home screen makes it fast and easy to search for cinema/theatre.
Navigation bar makes it quick to allow users to navigate through the app
Easy navigation was a key user need to address in the designs in addition to equipping the app to work with assistive technologies.
Easy access to items that's screen reader friendly.
Low-fidelity prototype
Using the completed set of digital wireframes, I created a low-fidelity prototype. The primary user flow I connected was building and ordering a snack, so the prototype could be used in a usability study.
View the SNAX
low-fidelity prototype
Usability study: findings
I conducted two rounds of usability studies. Findings from the first study helped guide the designs from wireframes to mockups. The second study used a high-fidelity prototype and revealed what aspects of the mockups needed refining.
Round 1 findings
-
Users want to order snacks quickly
-
Users want more payment options
-
Users want a simpler checkout page
Round 2 findings
-
User wanted a fail free user flow
-
Users want more payment options
Refining the design
-
Mockups
-
High-fidelity prototype
-
Accessability
Mockups
Early designs allowed for some customization,
but after the usability studies, I added additional information about the snacks such as if they met diet requirements such as vegan and halal and added ingredient list for people to check for any allergies.
Before usability studies
After usability studies
.png)
Mockups
The second usability study revealed that the app should make sure users know that they have to know to schedule a time for the order before adding items to basket. We decided to implement this by showing a popup screen when user add item to basket if they haven't schedule a time beforehand.
Before usability studies
After usability studies
.png)
Key mockups
High-fidelity prototype
The final high-fidelity prototype presented cleaner user flows for ordering a snack and checkout. It also met user needs for additional payment options.
View the SNAX
Accessibility considerations
1
Provided access
to users who are vision impaired through adding alt text to images for screen readers.
2
Used icons to
help make
navigation easier.
3
Used detailed
imagery for pizzas and toppings to
help all users
better understand
the designs.
Going forward
-
Takeaways
-
Next Steps
Takeaways
Impact:
The app makes users feel like SNAX really thinks about how to meet their needs.
One quote from peer feedback:
“The app made it so easy and fun to create a group order and providing different payment options that made ordering more efficient.”
What I learned:
While designing the SNAX app, I learned that the first ideas for the app were only the beginning of the process. Usability studies and peer feedback influenced each iteration of the app’s designs.
Next steps
1
Conduct another round of usability studies to validate whether the pain points users experienced have been effectively addressed.
2
Conduct more user research to determine any new areas of need.