THE PROBLEM
Many moviegoers are seeking a simplified and stress-free concessions ordering process. Language barriers, dietary requirements, and allergies can often make ordering food at the movie theatre a hassle.
THE GOAL
Make Movie Concessions Easy
I wanted to design an app to streamline this process. Thus, the idea for CineSnack was born! Allowing users to skip the line and catering to those with specific language and dietary needs were core focuses. CineSnack provides a convenient and inclusive experience for all cinema enthusiasts.
INTRODUCING
MY ROLE
Since this is my project for the Google UX Design Certificate, I undertook every role in this project; I was the lead UX Designer, UX Researcher, etc.
My responsibilities encompassed the full spectrum of the standard UX process, including user research, wireframing, prototyping, user testing, visual design, accessibility considerations, iterative design, and documentation.
THE PROCESS
I embraced the user-centric design process that I learnt from the Google UX Design Certificate. Throughout the project, I improved my understanding of the process and made this method my own, progressing from ideation and user research to wireframing, user flow mapping, and low-fidelity prototypes. These stages allowed me to refine my ideas, test layouts, and challenge my assumptions. The iterative process, guided by continuous improvements from user input and other factors, culminated in creating my final high-fidelity prototype.
IDEATE
Crafting the Perfect Concessions App Experience
Beginning with the ideate stage, I had to develop ideas for my project. I thought about how to make the most unique concessions-ordering app with features that would actually help users and differentiate itself from other apps like it. I aimed for a solution geared towards inclusivity, especially for individuals facing barriers that make ordering concessions in person challenging or undesirable. The emphasis was on creating an accessible option that would stand out in the market.
USER RESEARCH
Assumptions and Realisations…
I interviewed friends and family to understand the user base for my design. While I initially had assumptions about user opinions on food-ordering apps, food freshness, and potential disturbances in theatre deliveries, I overlooked the importance of addressing users with dietary needs and various language backgrounds. Additionally, I interviewed an older age demographic that enjoys movie theaters but may not be as familiar with mobile applications, aiming to create an easily accessible app for them.
Ultimately, I identified two primary user groups: users with dietary needs and users whose first language is not English.
I also identified specific user pain points:
Time ⏱
People don’t want to wait in long lines and potentially miss their movie.
Price 💵
People want orders to be cheaper or at least more upfront about fees
Communication 🗣
People want to be able to communicate what they want and need clearly
Quality 🍔
People want fresh food and varied options on the menu
Based on my findings, I created two personas to help ground my research and provide examples of specific target users for the product.
Let’s Check the Competition
Conducting a competitive audit was crucial to gaining insights into my product and its users. The goal was to compare movie-theatre and snack-ordering apps to evaluate the best practices for ordering concessions. I assessed key competitors, including AMC Theatres, Regal Theatres, Alamo Drafthouse Cinemas, and Uber Eats. The analysis revealed a spectrum of strengths and weaknesses:
Strengths
AMC:
Consistent and aesthetic branding
Order concessions ahead
Deals and offers
Regal Theaters:
Order concessions ahead
Deals and offers
Alamo:
Curated movie lists both old and new
Can make an account
Uber Eats:
Consistent branding and fun icons
Membership
Weaknesses
AMC:
Some user flow issues, such as “MacGuffins Bar” section
Regal Theatres:
Visual issues such as difficult-to-read font, cluttered screen, and unclear icons
Alamo:
Users cannot see/purchase concessions in-app
Users must be logged in to purchase
Uber Eats:
Cluttered home screen
Inconsistent imagery for different restaurants
I think the other movie theatre applications in the competitive audit fail to capitalise on the importance of good concessions at theatres. They need to focus on creating an updated menu with images, fun copy, and an easy way to see dietary and allergen info. Competitors also lack accessibility as I do not see a way for users to change the language in-app easily.
We have the opportunity to make an application that truly focuses on its menu and concessions.
WIREFRAME
Sketching Perfection
I next sketched paper wireframes to establish clarity and structure in my app's prospective design; I rapidly created as many ideas as possible and narrowed them down to try and create the most effective design. The low-fidelity approach facilitated a focus on core features and interactions, fostering creativity and flexibility throughout the design process.
USER FLOW MAP
Mapping Movie Magic
Visualising and understanding the entire user experience from start to finish involved mapping out every touchpoint, interaction, and decision, from opening the app to placing an order. The map specifically focused on changing the language in the process of ordering. This user flow map emerged as a pivotal reference, offering valuable insights into user needs, emotions, pain points, and opportunities for improvement throughout the design process.
LOW-FIDELITY PROTOTPYE
Designing Digital
Whilst creating the digital wireframes for my low-fidelity prototype, I focused on combining the best aspects of my sketches. I wanted to focus on the core functionality of the app and its buttons and placement of images and texts.
Incorporating placeholder text like "Lorem ipsum" for item descriptions and using blocks for images, lines for titles, and basic iconography for buttons streamlined my focus, and this approach allowed me to concentrate exclusively on the page layout so that I could observe user interactions during research to assess the intuitiveness of the item placements.
The low-fidelity prototype linked the core user journey of language switching, cart item addition, and order placement. This prototype was to be used in a usability study with users.
USABILITY STUDY
Learning from Our Users
To optimize the user experience, I conducted two usability studies on November 16-17 and December 3-4. These studies centered around core tasks like language change, item selection, dietary information review, ordering, and in-app navigation.
The primary goal was pinpointing potential user difficulties in these tasks, prioritizing the app's accessibility and user-friendliness. The initial round utilized the low-fidelity prototype to assess how users navigate the app, followed by the second round with a high-fidelity prototype to observe a realistic user experience and get detailed feedback on visual elements.
Throughout the study, participants completed unmoderated tasks and provided feedback. I did this so that the user experience reflected how they would use an app in the real world.
I gathered specific insights from direct quotes and by observing body language and behaviour.
Round 1 Findings:
Users want clear cues to change the language
1
Users want to add saved payment methods
2
Users want a well-organised menu
3
HIGH-FIDELITY PROTOTYPE
Creating the Vision
Following this usability study and based on my low-fidelity prototype, I created a high-fidelity prototype, incorporating actual text, content, images, and iconography into the application.
USABILITY STUDY II
Cinema-goers want Simplicity
For the second usability study, my primary research goal was to figure out what specific difficulties users encounter when they try to complete the core tasks of the application: changing the language, item selection, reviewing dietary info, ordering, and in-app navigation. The key performance indicators I used to measure success were ‘Time on Task’, ‘Conversion Rates’, and a ‘System Usability Scale’. From this usability study, I gathered further specific insights:
Round 2 Findings:
Locations need to be organised by distance
1
Users need a simpler checkout process
2
ITERATE
Adjusting the Design to Suit My Users
Now was the time to refine and iterate upon my designs based on user feedback.
This is a constant process, but there are a few specific steps I took following feedback and insights from my usability study. For example, the study revealed confusion with the checkout process. Users were confused by the “Checkout as Guest” button and were clicking that instead of “Place Order” even though they were completing the prototype as a user who was already logged in.
Participants also expressed frustration at the lack of ability to edit their saved payment methods and add new payment methods. I changed the phrasing of the button from “Checkout as Guest” to “New Payment Method” to make it clearer for users. I also removed the “Phone Number” text box as it felt unnecessary on this screen and added a toggle button to allow users to save their new payment method. I also adjusted the layout of the screen.
After Usability Study II
Before Usability Study II
The second usability study also revealed frustrations with how the theatre locations were organised. Users didn’t understand whether they were ordered by distance or some other factor. I fixed this by labeling the distance in miles with an icon and including markers on the map.
Before Usability Study II
After Usability Study II
Final High-Fi Prototype with Interactions
ACCESSIBILITY CONSIDERATIONS
Easy Bites: Making Concessions Accessible
Whilst creating my high-fidelity prototype, I had to take into account whether or not my designs were accessible. I did this in numerous ways and listed two examples below.
I selected a colour palette consisting of #FFFDFA, #262626, and #F46036, ensuring a contrast ratio of 14.9:1 and 3.15:1 between text and background to adhere to WCAG 2.0 Guidelines, reaching an overall AAA score (with AA in specific areas).
1
I incorporated universally recognisable icons for menu, home, and cart functions in the app interface, ensuring a seamless and intuitive navigation experience for all users regardless of linguistic background or prior familiarity with apps like mine.
2
FINAL TAKEAWAYS
My designs and prototype received a great reception from participants in my usability study. Using a System Usability Scale revealed the majority had a good experience, found it easy to use, and would continue to use the application. Numerous friends and family stated that they would use my application regularly!
I learned how to bring my wireframes and ideas to life. Iterating my designs based on user feedback and improving what I have. I also learned to think critically about my own work and to be able to create a user-centred product.
NEXT STEPS
In the future, I would like to improve my digital prototype by using variables in Figma so that users can experiment with adding any number or type of product to their cart. This increased interactivity would help users understand the mock application better to give more informative feedback.
I would improve this specific project by implementing the ability for frequent users to earn points. I had initially drawn up this in my original sketches, but the focus on language and dietary needs took precedence.
I would also like to wireframe and prototype the profile section of the app fully. Creating a login/sign-up page would also give users a better sense of how the real application would function.
Mock image by ijeab
Mock image from rawpixel.com