Cinema Bites
Role
Timeline
Team
Product Designer
March 2025 | 2 week sprint
Me/Product designer
Moviegoers often face long concession lines, lack visibility into real-time menu availability, and are frustrated by overpriced food options. These pain points lead to missed scenes, poor customer experiences, and a lack of control over snack purchases during their theater visit.
Name
Demographic
Goals:
Pain points:
Nicole Bayler
30
BA in English
Boston MA
Married with 1 child
English teacher
Skip long lines
Not spend too much money
Get to seats as quickly as possible
Waiting in long lines with children can cause frustration
Isn’t aware of “out of stock items until reaching the counter
Personas
“Movies are one of the best forms of visual art. Students can learn so much from studying film”
Prompt
Create a movie theater food ordering app
Assumed user needs and pain points
Long lines
Long lines discourage users from buying snacks and make a movie watching experience poor.
High Cost
High costs deters a lot of users leading to them sneaking outside food in.
Shortage
Ineffective communication when items are out of stock, especially during peak hours
No Uniqueness
With virtually the same options outside of the theater available, and for less costs, users found themselves not even looking at the menu
Journey map
Top Competitors
AMC Theater app
Cinemark app
AMC
Cinemark
Competitive analysis
What’s the competition like?
Strengths
Clear branding and consistency
Create account feature
Membership tiers available
Unique dine in experience
Simple and streamlined design
Unique menu options like alcohol for those 21+
Membership tiers available
Seat side delivery places an emphasis on watching the film
Weaknesses
Not expanding its language options
Not remembering users’ preferred orders
No screen reader support
Not offering audio versions of its menu
Not expanding its language options
Limited membership option
No screen reader support
Small text for those hard of seeing
Where can we win?
Gaps/ opportunities
Provide quick and easy way to reorder past orders
Allow for different language options
Allow for compatibility with screen readers and translators
Live update for food/snacks ensures user know which items are in stock vs which aren't
Within my process I wanted to ensure a clear and streamlined user flow. I also wanted to mitigate the paint points discussed earlier. I made sure to include a large “get started” button to ensure the user could begin their experience very clearly and easily.
Starting the design
Paper wireframes
Large “ORDER” button is immediately visible to user
Deals are displayed via the home screen
Play button for screen reader compatibility
Unique movie theater emphasized via the ordering screen
“In stock” notification visible
Digital Wireframes
Placing the “ORDER” button front and center for user. Getting straight to the point.
Giving the user numerous ways of accessing their preferred theater. Flexibility!
“In stock” status updates next to each item. This ensures you are able to see what is still available and what is not. Money saver!
1st Rendition
Why This Design?
A key goal in designing the first iteration was to create an app that felt familiar to users yet visually distinct. While competitors like Cinemark and AMC rely heavily on red, I aimed to avoid that overlap by choosing a bold, cinematic color direction that gave my app a unique identity and presence.
59003D
471A60
393573
In the first version of my movie theater app, I aimed to create a unique yet familiar atmosphere through color. The background featured a soft gradient I called “movie theater,” blending light purple and violet to mimic the ambient lighting of a real theater.
FF4800
Orange was used as a bold accent to draw attention and create a warm, familiar feel—similar to Fandango’s approach. This palette helped the app stand out visually while still feeling intuitive and cinematic.
14
I chose rounded buttons to create a softer, more approachable feel. Square buttons felt too rigid and aggressive for an app meant to evoke comfort and entertainment. The rounded edges helped align the interface with a more relaxed, user-friendly tone.
Look Familiar?
The goal of this moderated usability study was to evaluate how easily users could navigate the Cinema Bites app to order snacks and view stock availability in real-time.
Testing Users
Overview
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?
Key insights
Key takeaways
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.
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.
Several users wished for the ability to save frequently visited theaters. This would streamline the selection process and improve personalization for repeat users.
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.
Re-checking confirmation
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.
Theater selection unclear
Some User’s noted that they would like to have a “saved theaters” option
Saved theaters
One of the users noted that the color palette was quite strong, in particular the gradient purple and the color red, when selecting seats.
Color palette
"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
Final Design
Lets take a closer look
Language option now available from the home screen. No more digging around!
Home bar updated to allow users to see their previous/present orders. My Theaters has also been added after feedback from users
"Order Again" option available for users based on the last items they bought. Faster Checkout!
Under language option the screen reader can be selected for audio assistance.
The second iteration of the app marks a shift into a more user-centered era, moving beyond the basic, functional design of the first version. While the original focused on establishing a smooth user flow, it lacked visual refinement and felt primitive in its UI.
This updated version introduces a sleek, modern interface with slimmer layouts, softer shapes, and a more thoughtful structure. Features like the homepage language toggle improve accessibility, making the app more inclusive and intuitive for all users.
With a refined color palette and cleaner visual hierarchy, the second iteration is not just a redesign — it’s a reimagining. Every element now feels intentional, creating a polished experience that’s easier on the eyes and aligned with modern mobile design standards.
29CCA7
A fresh and vibrant accent color used to draw attention to key actions and highlights, offering a modern and calming alternative to the traditional red and orange tones seen in competitor apps.
1D2625
A dark, grounding background shade chosen for its eye-friendly, low-light comfort — ideal for immersive browsing and helping the brighter elements stand out without harsh contrast.
2A3833
A muted secondary tone used for surfaces and content blocks, balancing the interface with a natural, relaxed feel that reinforces the app’s calming and cinematic atmosphere.
See the difference?
What I learned
Reflection
As someone new to UX design, this project was a pivotal learning experience. I gained a deep appreciation for the balance between visual identity and usability. While I started with assumptions, I learned to shift toward a user-centered mindset — relying on feedback, iteration, and testing to guide my decisions.
Through multiple redesigns and testing phases, I became more comfortable with ambiguity and learned how to navigate the "why" behind every design choice. I also discovered how crucial accessibility, clarity, and emotional tone are to the user experience.
Moving forward, I plan to apply the foundations I’ve built through this project to more complex design challenges. By understanding how to structure user flows early, incorporate feedback effectively, and design with both scalability and clarity in mind, I’m better equipped to streamline future projects. This experience has taught me how thoughtful planning and user-centered iteration can save time, reduce rework, and lead to more cohesive, impactful design outcomes.
Next Steps
Like what you see? Lets talk!
Cinema Bites
Moviegoers often face long concession lines, lack visibility into real-time menu availability, and are frustrated by overpriced food options. These pain points lead to missed scenes, poor customer experiences, and a lack of control over snack purchases during their theater visit.
Role
Product Designer
Team
Me/Product designer
Timeline
March 2025 | 2 week sprint
Prompt
Create a movie theater food ordering app
Assumed user needs and pain points
Long lines
Long lines discourage users from buying snacks and make a movie watching experience poor.
High Cost
High costs deters a lot of users leading to them sneaking outside food in.
No Uniqueness
With virtually the same options outside of the theater available, and for less costs, users found themselves not even looking at the menu
Shortage
Ineffective communication when items are out of stock, especially during peak hours
Personas
“Movies are one of the best forms of visual art. Students can learn so much from studying film”
Name
Demographic
Goals:
Pain points:
Nicole Bayler
30
BA in English
Boston MA
Married with 1 child
English teacher
Skip long lines
Not spend too much money
Get to seats as quickly as possible
Waiting in long lines with children can cause frustration
Isn’t aware of “out of stock items until reaching the counter
Journey map
Competitive analysis
What’s the competition like?
Top Competitors
AMC Theater app
Cinemark app
AMC
Cinemark
Strengths
Clear branding and consistency
Create account feature
Membership tiers available
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
Strengths
Simple and streamlined design
Unique menu options like alcohol for those 21+
Membership tiers available
Seat side delivery places an emphasis on watching the film
Weaknesses
Not expanding its language options
Limited membership option
No screen reader support
Small text for those hard of seeing
Where can we win?
Gaps/ opportunities
Provide quick and easy way to reorder past orders
Allow for different language options
Allow for compatibility with screen readers and translators
Live update for food/snacks ensures user know which items are in stock vs which aren't
Starting the design
Paper wireframes
Within my process I wanted to ensure a clear and streamlined user flow. I also wanted to mitigate the paint points discussed earlier. I made sure to include a large “get started” button to ensure the user could begin their experience very clearly and easily.
Digital Wireframes
Placing the “ORDER” button front and center for user. Getting straight to the point.
“In stock” status updates next to each item. This ensures you are able to see what is still available and what is not. Money saver!
Giving the user numerous ways of accessing their preferred theater. Flexibility!
1st Rendition
59003D
471A60
393573
In the first version of my movie theater app, I aimed to create a unique yet familiar atmosphere through color. The background featured a soft gradient I called “movie theater,” blending light purple and violet to mimic the ambient lighting of a real theater.
FF4800
Orange was used as a bold accent to draw attention and create a warm, familiar feel—similar to Fandango’s approach. This palette helped the app stand out visually while still feeling intuitive and cinematic.
14
I chose rounded buttons to create a softer, more approachable feel. Square buttons felt too rigid and aggressive for an app meant to evoke comfort and entertainment. The rounded edges helped align the interface with a more relaxed, user-friendly tone.
Why This Design?
A key goal in designing the first iteration was to create an app that felt familiar to users yet visually distinct. While competitors like Cinemark and AMC rely heavily on red, I aimed to avoid that overlap by choosing a bold, cinematic color direction that gave my app a unique identity and presence.
Look Familiar?
Testing Users
Overview
The goal of this moderated usability study was to evaluate how easily users could navigate the Cinema Bites app to order snacks and view stock availability in real-time.
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?
Key insights
Key takeaways
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.
Re-checking confirmation
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.
Theater selection unclear
One of the users noted that the color palette was quite strong, in particular the gradient purple and the color red, when selecting seats.
Color palette
Some User’s noted that they would like to have a “saved theaters” option
Saved theaters
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.
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.
Several users wished for the ability to save frequently visited theaters. This would streamline the selection process and improve personalization for repeat users.
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.
Final Design
"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
Lets take a closer look
Language option now available from the home screen. No more digging around!
Home bar updated to allow users to see their previous/present orders. My Theaters has also been added after feedback from users
"Order Again" option available for users based on the last items they bought. Faster Checkout!
Under language option the screen reader can be selected for audio assistance.
29CCA7
A fresh and vibrant accent color used to draw attention to key actions and highlights, offering a modern and calming alternative to the traditional red and orange tones seen in competitor apps.
1D2625
A dark, grounding background shade chosen for its eye-friendly, low-light comfort — ideal for immersive browsing and helping the brighter elements stand out without harsh contrast.
2A3833
A muted secondary tone used for surfaces and content blocks, balancing the interface with a natural, relaxed feel that reinforces the app’s calming and cinematic atmosphere.
See the difference?
What I learned
Reflection
As someone new to UX design, this project was a pivotal learning experience. I gained a deep appreciation for the balance between visual identity and usability. While I started with assumptions, I learned to shift toward a user-centered mindset — relying on feedback, iteration, and testing to guide my decisions.
Through multiple redesigns and testing phases, I became more comfortable with ambiguity and learned how to navigate the "why" behind every design choice. I also discovered how crucial accessibility, clarity, and emotional tone are to the user experience.
Next Steps
Moving forward, I plan to apply the foundations I’ve built through this project to more complex design challenges. By understanding how to structure user flows early, incorporate feedback effectively, and design with both scalability and clarity in mind, I’m better equipped to streamline future projects. This experience has taught me how thoughtful planning and user-centered iteration can save time, reduce rework, and lead to more cohesive, impactful design outcomes.
The second iteration of the app marks a shift into a more user-centered era, moving beyond the basic, functional design of the first version. While the original focused on establishing a smooth user flow, it lacked visual refinement and felt primitive in its UI.
This updated version introduces a sleek, modern interface with slimmer layouts, softer shapes, and a more thoughtful structure. Features like the homepage language toggle improve accessibility, making the app more inclusive and intuitive for all users.
With a refined color palette and cleaner visual hierarchy, the second iteration is not just a redesign — it’s a reimagining. Every element now feels intentional, creating a polished experience that’s easier on the eyes and aligned with modern mobile design standards.