Cinema Bites
How I designed a mobile app that lets movie goers order snacks ahead of time and see real-time stock availability
Long concession lines and uncertainty about food availability often frustrate moviegoers, leading to missed scenes and lost revenue for theaters. Cinema Bites addresses this by updating users with live inventory trackers.
Role & Timeline
Solo Product Designer
3 weeks
March 2025
Methods
User Research / User Journey Mapping / Competitive Analysis / Design Audit / Visual design / Prototyping / Testing
The Problem
Theaters risk losing revenue when customers give up on buying snacks due to long waits or out-of-stock surprises. How might we design an experience that reduces wait times and gives users confidence in their food choices before the film starts?
The Outcome
The final solution combined real-time inventory with a simple ordering system, helping users save time while giving theaters a chance to increase sales as well as the following:
Improved visibility of food availability, reducing user uncertainty and creating a smoother, more enjoyable theater experience.
Created a solution that supports theaters in boosting concession sales by increasing user confidence and efficiency in ordering.
Simplified the concession ordering process, reducing friction and helping users skip long lines at theaters.
Pain Points and Assumed Needs
Through research, it became clear that existing theater apps fail to fully address customer frustrations. Long lines and the lure of cheaper alternatives outside the theater make it easy for patrons to skip in-theater purchases. Understanding these gaps helped guide the design toward solutions that keep customers engaged and encourage them to confidently buy snacks without stress.
Long lines
Long lines discourage people from buying snacks and hurt the movie experience
High Cost
High prices push users to sneak in outside food instead of buying
Shortage
Poor communication about sold-out items frustrates customers, especially at peak times
No
uniqueness
With the same options available outside the theater for less, many users skip the menu entirely
Persona
Demographic
30
B.A in English
English teacher
Boston, MA
Married with 2 Children
Meet Nicole Bayler.
Pain Points
Waiting in long lines
with children can cause frustration
Isn't informed of out of stock items until reaching the counter
Goals
Skip long lines
Save money
Arrive at seats ASAP
Journey Map
To better understand user needs, I created a persona named Nicole. As a busy mother, her attention is primarily on her children, so a smooth and predictable snack-ordering experience is essential. She wants to know that both she and her children can get the items they want without surprises. By providing real-time updates on availability, Nicole can make informed choices and feel confident that her visit to the theater will be stress-free.
Competitive Analysis
I analyzed two direct competitors, AMC and Cinemark, to see what works well and where opportunities lie. Both apps excel in aesthetics but fall short in accessibility and clear communication of item availability. They also share similar color palettes, making them easy to confuse. These insights highlighted a chance for Cinema Bites to stand out through clarity, accessibility, and a unique visual identity.
AMC
Strengths
Clear branding and consistency
Create account feature
Membership tiers
Unique dine in experience
Weaknesses
Not expanding its language options
Not remembering users’ preferred orders
No screen reader support
Not offering audio versions of its menu
Cinemark
Strengths
Clear branding and consistency
21+ menu
membership tiers
seat side delivery
Weaknesses
Not expanding its language options
Small text
No screen reader support
Not offering audio versions of its menu
Starting the Design
With insights in hand, I began sketching wireframes on paper. These initial drawings explored how to structure key pages, including the menu, cart, and theater locator. Multiple ideas were tested, but the final selections prioritized organization and a natural flow inspired by familiar apps. These sketches provided a foundation for a user experience that felt intuitive from the start.
Out of these designs, stars were placed next to each feature that demonstrated the best elements to take from.
Digital Wireframes
Next, I translated the strongest paper sketches into digital wireframes using Figma. This step allowed me to see the full user flow and refine the placement of each element. Guided by natural left-to-right interaction patterns, I aimed to create an intuitive experience that communicates information clearly and reliably, while maintaining a layout users would find familiar.
Large order button to reinforce user flow
Deals are displayed to ensure further interest
Play button is displayed for audible information
Unique items such as popcorn buckets are on display
In stock notification is available ensuring clear communication
Cart menu is available for finished purchases
1st Rendition
With digital wireframes complete, I turned to visual design. My goal was to capture the excitement of going to the movies while creating a calm, enjoyable user experience. I experimented with colors and branding to give Cinema Bites a clear identity that distinguished it from competitors. Early iterations taught me that aesthetics alone do not guarantee usability or accessibility, a lesson I applied to refine the first full rendition of the app.
The large Order button from the digital wireframes makes its debut, again ensuring a clean and clear user flow.
I decided to give the user numerous ways to choose the location of their theater, offering flexibility
“In stock” status updates are placed next to each item with a distinct color palette/design. This ensures clarity and reinforces communication
Why This Design?
Looking at AMC and Cinemark, I noticed their visual styles were so similar that their apps could easily be mistaken for one another. I wanted Cinema Bites to feel familiar yet clearly distinct. Using a gradient background paired with a bold orange accent, I created a visual identity that conveys both excitement and reliability. This design ensures users can navigate the app confidently while immediately recognizing it as its own unique experience.
Look at both competitors, and see how visually they could be mistaken for each other if not explicitly stated otherwise. This was an element I meant to avoid within my own app.
Testing
With the first rendition complete, it was time to see how real users would interact with the app. To gather meaningful feedback, participants needed to navigate the main user flow and explore key features. But attracting users to test a prototype can be a challenge. The solution? An incentive. Just like real-world companies, offering something in return helped encourage participants to take the time to engage with the design and provide honest, valuable insights. This step was essential for understanding what worked, what didn’t, and where improvements were needed.
The Solution to Finding Users
To encourage participation in the usability study, I decided to offer incentives. Working as a Service Manager at Chipotle gave me access to gift cards, which I could use as rewards. Since the store was conveniently located next to my college campus, it became the perfect opportunity to connect with potential users.
I gathered five $10 gift cards and approached students around campus, sometimes in class and sometimes while walking between buildings, explaining the project and the reward for participating. The response was overwhelming, with more students interested than I could include. The remaining challenge was selecting the right participants to ensure meaningful and representative feedback.
Initiating the Usability Study
With the ideal participants selected, the next step was to design and conduct the usability study. I chose an unmoderated approach to give participants flexibility while completing the tasks. The study focused on understanding how efficiently users could navigate the full app experience and identifying any challenges they encountered along the way.
Key questions guided the research, including how much participants relied on assistive technology, whether they could modify or edit their orders with ease, and what additional features could enhance the overall user flow.
Details of the Study
The following chart below presents all the crucial information that went into organizing and conducting the usability study.
Attributes
Details
Study type
Unmoderated
Participants
5 participants who watch movies at least once a week
Between the ages of 18-67
Participants that range from gender to abilities including:
A user with a visual impairment
A user with an auditory impairment
A user who is not fluent in English
Length/Location
Each session will see a time of around 10 min based on prompts
United states, remote (each participant will complete the study within their home)
Tools
Figma Prototype + Zoom / Google Forms
Goals
How easily and quickly can users order their food on the app and confirm?
What difficulties or inconveniences did they experience while ordering?
Were they able to rely on assistive technology to get through the user flow effectively?
After the Study
Once all participants submitted their feedback, it was time to organize and act on the insights. Many users highlighted issues such as the inability to access their order after confirmation and confusion when selecting a theater.
Using FigmaJam, I created an affinity diagram to identify common themes and pain points. One critical insight stood out: the app had focused heavily on food ordering, but movie selection and ticketing were being overlooked. Improving the snack ordering experience would be ineffective without ensuring the core functions of the app, like selecting movies and theaters, were seamless and accessible. This finding guided the next round of design improvements.
How could we improve the food ordering sections if we didnt have the core parts of the app in place?
Once common themes were identified, I re-organized the pain points into clear, actionable insights. This process allowed me to see exactly what users struggled with and what needed improvement. From these key takeaways, I was able to plan the next steps in addressing the issues and refining the app experience, ensuring that each change directly responded to user needs.
Key insights
Key takeaways
Re-checking information
Users were worried about retaining important information such as cost and time, after the initial confirmation page was gone. There was no way to re check orders users had already placed.
Users expressed concern about losing access to essential information like cost and showtime after placing an order. This highlighted the need for a dedicated order history or confirmation section for future reference.
Theater selection unclear
Users were confused on which method to use in order to select/find the theater they wanted to attend. Some user’s thought they had to make use of all methods, while others preferred one particular method over the others.
Participants were unsure which method to use when choosing a theater. The presence of multiple options without clear guidance led to uncertainty, revealing a need for more intuitive selection cues or default preferences.
Saved theaters availability
Some User’s noted that they would like to have a “saved theaters” option
Several users wished for the ability to save frequently visited theaters. This would streamline the selection process and improve personalization for repeat users.
Color Palette
One of the users noted that the color palette was quite strong, in particular the gradient purple and the color red, when selecting seats.
Feedback indicated that the color palette, particularly the red and gradient purple used in the seat selection view, was visually overwhelming. A more subtle, accessible palette was needed to improve visual comfort.
2nd Iteration
With the usability study complete, it was time to revisit the design. Key improvements were needed for movie selection and the color palette to create a more polished experience.
The second iteration marked a shift toward a truly user-centered approach, moving beyond the basic functionality of the first version. While the original focused on smooth navigation, it lacked visual refinement.
This updated version introduced a sleek, modern interface with slimmer layouts, softer shapes, and a more thoughtful structure. New features, such as a homepage language toggle, enhanced accessibility, making the app more intuitive and inclusive for all users.
"Order" button still highlighted but does not dominate the screen. This creates less clutter
Updated food selection screen with softer color palette and less aggressive "in stock" notification
New "take me to food" button allows users to just order food without the hassle of choosing a film/seat
Rounded buttons make a return with a softer color approach
With a refined color palette and a clearer visual hierarchy, the second iteration is more than just a redesign; it is a reimagining of the app experience. Every element feels intentional, creating a polished interface that is easier on the eyes and aligns with modern mobile design standards. This careful attention to detail ensures that users can navigate the app comfortably while enjoying a visually engaging and cohesive experience.
Lets Take a Closer Look
With a 2nd design complete, lets see what exact changes were made and why.
See the difference?
Post Re-design/ Next Steps
After completing the second iteration of the Cinema Bites app, the goal was to conduct another usability study to gather further feedback and continue refining the design
Unfortunately, due to limited resources for incentives and scheduling constraints, a second study was not possible at this time. In the future, with additional resources and time, further testing and redesigns would become a regular part of improving the app. With enough user feedback, the app would eventually be ready to launch and provide a polished, user-centered experience to moviegoers.
Reflection
As someone new to UX design, this project was a pivotal learning experience. I developed a deeper appreciation for the balance between visual identity and usability. While I began with assumptions, I learned to adopt a user-centered mindset, relying on feedback, iteration, and testing to guide every decision.
Through multiple redesigns and usability studies, I became more comfortable with ambiguity and learned to explore the reasoning behind each design choice. I also discovered how essential accessibility, clarity, and emotional tone are in creating a meaningful user experience.