Context
Great snacks, great theater… what’s stopping sales?
Moovy is a movie theater located in Toronto, Canada, known for its great selection of snacks that keep audiences coming back. However, despite the quality of their concessions, Moovy has been struggling to generate consistent sales. For this project, I set out to explore what might be preventing Moovy from reaching its sales potential and to design solutions that could increase snack revenue.
Challenge
Moovy, a movie theater located in Toronto, Canada was experiencing a decline in snack sales. How might we help them increase sales while making the ordering process more enjoyable for moviegoers?
A mobile app was designed that allows moviegoers to group-order snacks by scanning a QR code on their movie seat so that guests can quickly place orders and have snacks delivered directly to them.
Solution
My Role
As the sole designer on this project, I was responsible for driving the end-to-end design process. My work included conducting user research to uncover pain points, leading usability testing to validate design decisions, and creating wireframes, high-fidelity UI designs, and interactive prototypes.
User Research
Interviewing 10 moviegoers to uncover frustrations in their snack-buying experience
From interviews with 10 moviegoers, I identified recurring pain points in the snack-buying experience. These insights revealed clear opportunity areas that can be addressed in the app to create a smoother and more enjoyable experience for users.
Ideation
Initial Snack Ordering Explorations
Based on research insights around long lines and rushed purchases, I created low-fidelity wireframes to explore how a mobile app could streamline concession ordering.
Based on research insights around long lines and rushed purchases, I created low-fidelity wireframes to explore how a mobile app could streamline concession ordering.
Usability Testing
Conducted Usability Testing with 10 users
The goal was to observe how real users interacted with the first draft of the UI and gather feedback on clarity, ease of navigation, and overall experience.
After analyzing user insights and identifying points of confusion, I refined the layout and developed a higher-fidelity design to improve clarity and usability.
Accessibility Consideration
Color Contrast Ratios
The design ensures strong contrast ratios to support users with low vision. The background color and text maintain a contrast ratio of 16.28:1, while buttons with white text achieve a contrast ratio of 10.37:1. Both meet and exceed the WCAG standards, enhancing readability and accessibility.
Screen Reader Optimization
Since theaters are dim environments, it can be difficult for people with low vision to see clearly. Alt text was added to menu items so screen readers can announce them, and labels were made more descriptive. Instead of using a general label like "button," a more descriptive label like "checkout button“ will be used.
Error Prevention
Users can rescan the QR code if they entered the wrong group order. Additionally, they can go back and edit their preferences without having to restart the entire order.