Case Study: Designing a snack ordering app for a movie theatre
In this case study, I will be sharing my detailed experience of designing an app for ordering snacks ahead of a movie or to be delivered to users.
Overview
Movies are a top choice for relaxation and entertainment. Movies affect many of us powerfully because the combined impact of images, music, dialogue, lighting, sound, and special effects can elicit deep feelings and help us reflect on our lives. Cinemas give us this experience in the most awesome way possible by providing HD screen quality, premium sounds, and SNACKS! Even when watching movies on our TVs and Laptops at home, movie snacks make the movie viewing experience more enjoyable.
The queues to get snacks at concession lines are stressful and with the current pandemic going on, it is also very hard to practice social distancing when lots of people are gathering at a particular point. These long lines have even caused some people to miss part of their movie or they have to start the movie without snacks and return to get their snacks. These are all big-time mood killers.
Imagine having to miss the iconic opening scene in Dark Knight because you were still stuck on the snack line.
My design process
I utilize the design thinking framework because it provides a way to create solutions that address real user problems, are functional, and also affordable. It is also nonlinear so it provides great flexibility for me as a designer.
EMPATHIZE PHASE
How can I claim to create a user-centered product if I don’t know what the users want? I carried extensive foundational research before even thinking of designing anything to answer questions like; what should I build? what are the user problems? and how can I solve them?
I did some secondary research to get information on what products are out there solving similar problems I want to solve. This was a sort of competitive auditing to check out the competition so I can learn from and also improve on that product. Everyone loves to go to the movies, from teens to parents going with their kids. Working with a large demographic on such a tight budget was very tough too.
Primary Research — User Interviews
Empathy is a key part of UX research because it helps us designers understand someone else’s feelings or thoughts and it helps me get rid of cognitive BIAS in my research. I started my research with a screener survey shared through my social media accounts to help me identify potential participants that meet the requirements of my study.
After identifying and recruiting interview participants, I carried out user interviews remotely through the help of online calls and documented the results of my interview here. Some common problems identified include snacks taking too long to prepare and snacks finishing too fast. I prioritized qualitative research for this project, unlike my last case study where I had more quantitative research. The reason for this is because I did not have a product (MVP even) at this point and I needed to know what users wanted and why?
Empathy Map
After evaluating the results from my user interview, I was able to mentally sort my users into two different user groups and so I designed an aggregated empathy map to visually represent everything I have learned about these user groups.
With these empathy maps, I was able to understand the goals and characteristics of these groups and create identities that represent the needs of a larger group of users. These are my…………………………….
User Personas
Say hi to Chisom, a data analyst, and a mother. While she loves her job, she also loves to spend time with her family. She plans weekly family movie nights and getting snacks is usually a hassle for Chisom.
CHISOM STORY: As a mother who’s always tired due to work, I want to be able to order snacks to be delivered or picked up so that I can host family movie nights without the stress of making snacks for my child and husband.
Benjamin, on the other hand, has no major obligations to anyone but himself lol. He just wants to watch all the movies coming through the MCU Universe this year and with the MCU runtimes getting longer and longer, lots of snacks are a must.
BENJAMIN’S STORY: As a student who is mostly broke and likes to eat, I want to get freebies and discounts on snacks so that I can get more value for my money
Who can you relate to better? I oddly enough can relate to Chisom. Hold on, I’m not married or a father YET! but I still have movie nights and hangouts with friends and yes snacks are very important for these hangouts.
User Journey Maps
These are illustrations I made to show what Chisom and Ben go through to achieve their goals. It also helps me as a designer to reduce BIAS and highlight new pain points.
DEFINE AND IDEATE PHASE
In the Define phase gathered all the information gotten from the Empathize phase to define the problems I’m trying to solve and kickstart the ideation process. The major part of this phase is defining my problem statement. Using the “5 Ws and H” method, I came up with problem statements from Ben and Chisom’s POV.
“Chisom is a working mother who needs access to snack ordering facilities so that she can plan Family movie nights from her workplace as she has no time to go the store or make the snacks herself.”
“Benjamin is a computer science student who would love to order a variety of snacks ahead of his movie from home while getting discounts/freebies so he can get more value for his money.”
Now that I have established our problem statements, I can kick off the ideate phase. In this phase, I decided to brainstorm and generate ideas, then go on to narrow these ideas down to feasible, viable, and desirable solutions.
I then determined the value proposition for my product as this is the reason users would be willing to use my product as opposed to other products out there. Like the Von Restorff effects (isolation effect) states:
“when multiple homogeneous stimuli are presented, the stimulus that differs from the rest is more likely to be remembered”
This just means that when multiple, similar objects are present, the one that differs from the rest is most likely to be remembered.
PROTOTYPE AND TEST PHASE
This is what we’ve all been waiting for, isn’t it? lol. But, just before we get into the prototypes, we need to have a user flow to show the steps users take to achieve certain goals with the product.
User Flow Diagrams
LO-FI Prototype
I created a lo-fi prototype to test out with users before going on to create the Hi-fi prototype. This is because, unlike my last case study which was the redesign of WhatsApp, this is an entirely new product and the brand identity hasn’t been set yet. I wanted to focus on function rather than aesthetics at this point. You can access the prototype to get a feel of it.
Usability Studies
I carried out usability studies on 3 participants to locate pain points in the app and while the participants found it easy to navigate the prototype, areas needing improvement were noticed. For example, one of the users asked how he would know if the snack has been added to the bag without always checking?
I fixed that in the HI-FI prototype by including a small box that pops up to notify the user of the successful addition.
HI-FI Prototype — View Prototype
I created the app in dark mode only because users would also use the product in the Theatre auditorium and people whipping out phones with bright screens is distracting to other movie watchers. But in dark mode, it would be much more bearable to other movie watchers.
I chose the OPEN SANS font because it was modern, legible, and minimal. With also a high contrast ratio for accessibility reasons.
The Onboarding
First, the onboarding process which gives the users a quick rundown of the product. Users also have the option to skip and get to shopping as fast as possible.
The home page
The design is simple and purely intuitive so users can perform the tasks they need to do quickly. I also took a page from the Dodo pizza app in categorizing the snacks so users can find what they are looking for easily. There is also the option of searching for the desired snack and adding it to the bag. There is a reward for users to complete their first order as seen on the home page and this is a psychological move to motivate users to order something. Adding the snacks to the tray is also very simple and straightforward. Users can edit the ingredients and number of that particular snack in the tray.
The Snack Bag
This is the star here, OBVIOUSLY!!! LOL. Users can add as many snacks as they want and go to the snack bag to either edit their order or move ahead with payment. Users also have the option of calling to complete their order or even order from scratch for those who are non-tech savvy.
Users also have three options when checking out depending on whether they are ordering ahead of the movie, ordering to be delivered at home, or ordering from the Cinema auditorium. The “call to order” feature is not available to those who want to order from the auditorium though to prevent disturbances to other movie watchers.
Orders and Profile Page
Orders can be viewed and tracked from the orders page which can be accessed from the home page at the top right-hand corner of the screen. The profile page is very simple and straightforward to avoid distractions. Default delivery details can be set here to avoid repetition in inputting the details.
In Conclusion,
I have really grown as a designer and researcher in the last few months and this project has been key to that. This is the first complete product I have originally designed from scratch and it was a very exciting journey. The tight budget really helped me think resourcefully and use what I have instead lol. Time to jump into the next one.
Thank you for your time.
View my portfolio of works at: https://www.behance.net/akinolaakinpelu
