Role: UX/UI Design, UX Research
Tools: Figma, Miro, Loom
Reel Deal Cinema
Project
Reel Deal Cinema is a movie theater app. For this project, I focused on making it easy to order snacks and food before the movie. A central feature is for the user to skip the line at the concession stand and have their food delivered to their seat or picked up at the concession stand.
Challenges
Moviegoers hate waiting in line for snacks. This is especially frustrating when they're already late for the movie. Movie theaters often lack healthy snack options and nutritional information, making it difficult for consumers to make informed decisions about what to eat.
Research
In this project, I used a goal-directed design approach to help me reach my design goals. I found qualitative research methods to be the most helpful, including interviews, a competitor analysis, and persona hypothesis construction. I started by asking myself some initial key questions, such as:
Do moviegoers buy snacks when at the movies?
What are the features that would be most valuable to moviegoers?
What are the pain points that users experience?
I then conducted interviews with potential users to learn more about their needs and goals. I also analyzed competitor products to see what features they offered and how they were designed. Finally, I created persona hypotheses to represent different types of users and their goals.
The qualitative research methods helped me to gain a deeper understanding of the users and their needs. This information was essential for designing a product that would be user-friendly and meet the users' needs.
Competitors Analysis
I conducted a competitive audit of the in-app purchasing experience for new users of AMC Theatres, CineMark, and Fandango. I found that the main difference between the two main competitors is that AMC allows users to order food in advance of purchasing a movie ticket. This is a unique feature that could address concerns I have heard from users about the possibility of splitting the cost of going to the movies. Some other opportunities I discover that the app could capitalize on are adding a low-carb category and carb details to all the food items, keeping a simple food ordering user flow, and having easy access to reorder food items. Not all the competitors were capitalizing on these features that would be added value to the Reel Deal Cinema app.
Direct
Indirect
Personas
Javier
Age: 59
Occupation: HVAC Business Owner
Javier likes going to the movies multiple times a week and spending time with his grandchildren. He doesn’t like waiting in line to order snacks. He finds it difficult to read small text and dislikes the lack of images. Javier has dyslexia, which makes it difficult to read text quickly and process information in fast-paced settings.
Stef
Age: 23
Occupation: Student
Stef goes to college full-time where she is getting a bachelor’s in Computer Science. She gets anxious when she finds a long line at the concession stand and fears losing the beginning of the movie. She is a health-conscious vegetarian who watches closely what she eats. She wants to have health product information to make an informed decision.
User Flow
I created a user flow diagram to understand how a user would interact with the app to purchase a food item. The diagram showed the steps involved in the process, from opening the app to completing the purchase. This helped me to identify any potential problems with the user experience and make changes to the app accordingly.
User Journey
Javier’s Goal: Go to the movie theater with grandkids and buy snacks
Stef’s Goal: A fast and easy way to order snack for her and her date
Sketches
Wireframe
I began the design process by sketching out paper wireframes. Once I had a basic understanding of the flow, I created digital wireframes to allow for more detailed refinement. I reviewed the digital wireframes to identify any missing elements, unnecessary elements, or areas that needed improvement. Once I was satisfied with the digital wireframes, I turned them into a prototype and conducted a usability study to gather feedback from real users.
Usability Study: Insights
During the usability study, users had trouble identifying the delivery and pick-up options.
Participants loved the idea of ordering snacks and having them delivered to their seats.
Users love the idea of having food delivered to their seats but not after the movie had started.
Affinity Diagram
Design Iterations
I conducted a lo-fi prototype usability study that helped me guide the designs from wireframes to mockups. The study involved a small group of users who were asked to complete a series of tasks using the lo-fi prototype. I observed their interactions and took notes on their feedback. This feedback helped me identify areas where the design could be improved. I then conducted multiple iterations to refine user flow and accessibility. The final design was much more user-friendly than the original lo-fi prototype.
Addressing Challenges:
Streamlining delivery and pick-up options
After the first usability study, it was clear that the delivery/pick-up button and section were confusing and didn’t need to be an additional click. The option to have the order delivered or picked up was moved to be on the same screen as Order Review and it was clearly labeled with two buttons and a title.
To address the concerns of disturbances of food delivery during the movie, the app doesn’t allow the user to place orders after showtime, and it doesn’t let users select a delivery time more than 10 minutes after showtime.
Addressing Challenges:
Easy access to favorited items
During interviews and conversations, users indicated wanting a way to quickly access favorited items that could be added to their cart, similar to the functionality of the Order Again section. After some iteration, a My Favorites section was added to replace the My Favorites button.
Design Kit
I wanted to create a dark color scheme for the app that would evoke the feeling of being in a dark movie theater. I wanted the overall color scheme to be muted and desaturated, with a focus on dark maroon. I also wanted to add some fun highlights as accent colors, such as bright peach, pink, and yellows. These accent colors would provide a contrast to the dark background and help to make the app more visually appealing.
Takeaways
Using a responsive research methodology allowed me to address real-life challenges through dynamic feedback loops. This was my first time conducting a usability study, I can see the value in doing so in all future projects. Interacting with real users enhances the design and functionality of the final product.
I learned that business goals are important, but they are not the only thing that matters. Users are the ones who will ultimately use the product, so it is important to design with their needs in mind. There is a balance to be struck between business goals and user needs. A product that ignores either one will be unlikely to succeed. In this project, I learned to work in an iterative process and create user-centric, real-time design solutions that were data-driven and conscientious.