CINESNACK
UX Case Study
The goal
Design a snack ordering app for the movie theater to make the ordering process easier and faster.
My responsibilities
Project duration
Project overview
The problem
People who go to the movie theater spend too much time standing in line to order snacks and it is not a good use for their time.
The product
Cinesnack is a snack ordering app for a movie theater in Greece. It offers various and delicious snacks to choose from and the ability to the customer to either pick up or get delivered their order on their movie theater seat. Cinesnack targets users who go often to the movie theater and spend too much time standing in line to order.
My role
UX designer designing an app for Cinesnack from conception to delivery
Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs
September 2021 - January 2022
Understanding the user
I conducted interviews and created empathy maps to understand the users I am designing for and their needs. A primary user group identified through research was young people who go quite often to the movie theater and always wait in line for too long to order snacks. However, research revealed that the queue was not the only thing that frustrated the users. Other users problems were the carrying of the snacks, the too crowded place and the limited options in menu.
User pain points
1
Queue
User stands too much time in line to order
2
Carrying
There is no an easy way for the user to carry their order
3
Crowded
The place gets usually very crowded
4
Lack of options
The menu options are very limited
Persona and problem statement
John P. is a student who needs a fast and easy way to order and pick up snacks from the movie theater because he spends too much time standing in line to order and is not a good use for John’s time.
User journey map
Mapping John’s user journey revealed how helpful it would be for users to have a snack ordering app for movie theater.
Starting the design
Storyboards
Scenario: Use Cinesnack to order snacks quickly and easily
Big picture
John worries he won’t be on time for the movie because the snack ordering line is too long
John decides to use the snack ordering app
John uses the app to order
John is relieved that he has ordered and he spends time with his friends until the movie begins
John and his friends get their order on the movie theater seats before the movie begins
John and his friends watch the movie and enjoy their favorite snacks
Close up
John opens up the app
John is welcomed. John chooses the ‘browse menu’ option
John chooses snack category
John chooses which snacks to order
John chooses whether he will pick up the order from a box office or get the order on the movie theater seat
John completes the checkout process
Paper wireframes
Taking 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 the options of ordering and the saved orders to help user save time.
Stars were used to mark the elements of each sketch that would be used in the initial digital wireframes.
Digital wireframes
As the initial phase continued, I made sure to base screen designs on feedback and findings from the user research.
I created a low-fidelity prototype which you can view here.
The 'favorite' option saves user's time
This button provides an easy access to the user’s favorite order
The 'delivery' option was a key user needs to address in the designs.
This button provides an easy option for user to get delivered their order.
User 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
1. The sign in button needs to be obvious to the users
2. Users need a way to see what they are ordering during the process
3. The checkout process has unnecessary steps
Round 2 findings
1. Users prefer actual photos of what they are ordering instead of icons
2. Users need a shopping icon to see their current order
3. Users need a way to choose size of snacks and customize their order
Refining the design
Mockups
In early designs users had difficulty to sign in. After the usability study, I made the sign in process more obvious and easier to the users.
Users felt frustrated with the checkout flow. According to users there were unnecessary steps. To streamline the flow I consolidated the ‘current’ and the ‘pick up-delivery option’ option to one ‘Checkout’ screen.
Before usability studies
After usability studies
Before usability studies
After usability studies
During the second usability study users would prefer actual photos of the products and a way to customize their order. So, I replaced the icons with real photos and add the option of customization.
Before usability study 2
After usability study 2
Accessibility considerations
1. WCAG AA Color contrast
Used colors that have a contrast ration of at least 4.5:1
2. Icons
Used icons to help make navigation easier
3. Images
Used product images to make ordering understandable
Refined designs
High-fidelity prototype
The high-fidelity prototype presented cleaner user flows for ordering snacks and checkout. It also met user needs for a delivery option and customization.
View the Cinesnack
Going forward
Takeaways
Impact
The app makes users feel like Cinesnack app really thinks about how to meet their needs.
What I learned
While designing the Cinesnack app, I learned that the first ideas for the app are only the beginning of the process. Usability studies and peer feedback influences each iteration of the app’s design.
Next steps
1. Testing
Conduct another round of usability studies to validate whether the pain points users experienced have been effectively addressed.
2. User research
Conduct more user research to determine any areas of need.