Project Overview
The Multiverse Theaters Snack App was one of the projects I worked on for my Google UX Design Certification course. I used a project randomizer web app and creating a food ordering app for a movie theater was the one that was selected.
This app allows users to order snacks at a movie theater from their mobile device, and have it either delivered to their seat, or they can go and pick it up at the counter.
The Problem
One of the biggest problems is that a viewer doesn’t want to miss part of their movie to go and get snacks. People that are physically handicapped may have an even more difficult time making it to get snacks without missing a big chunk of the movie.
The Goal
Come up with an app and accompanying website that easily allows people to give their stuff to somebody else in a quick and easy way. They can set up a safe meeting place using the integrated messaging system.
User Research
Summary
My research included checking out other movie theater apps that use a similar function to order snacks and at the same time adds the information that a movie theater would include in their apps, like the movies playing and showtimes. The primary function however is the ordering of snacks.
User Persona
Problem Statement
Josh is a handicapped movie buff who needs to order food to be delivered to his seat because he is in a wheelchair.
Journey Map
Storyboard Closeup/Big Picture
Designing the App
Paper Wireframes
As most apps are designed, I began by creating several iterations of the home screen for the app, including different layouts as well as widgets that would show things such as movies playing or past orders. These were done using paper as the medium for the wireframes.
Digital Wireframes
Once I had finished with the majority of the screens on paper, I converted them all to digital using Figma, where I directly made a low fidelity prototype. Only then was I able to begin my first user testing session to get feedback on the general user flow.
Usability Study #1 Findings
After performing the first user test and interviewing people, a few things came up with what people are asking for in an app where they can order snacks, including:
- Users want delivery options – Much like apps like Grubhub, we added the functionality for people to either pick up their food at the kiosk on the way to the theater, or they can have it delivered to their seat using the easy checkout process by entering their theater and seat numbers.
- Users don’t want to leave their seats – delivery was the obvious feature to add since I don’t think anybody wants to get up from their seat once the movie starts, as they are already paying enough to see the movie in the first place.
- Movie goers don’t want to wait in line – Lines to get tickets are a thing of the past, as all you need to do now is flash your phone or pickup your tickets at the self service kiosk, so waiting in line for food is just another negative experience we can take out of the loop.
Hi-Fi Prototypes
Having done my first usability study, it was time to start creating the high-fidelity prototype. The first rendition had a dark theme to it, and after a second usability study, I decided it was best to keep a lighter theme to make it easier to read as well as create a cleaner layout.
Light Theme
Dark Theme
Usability Study #2 Findings
After performing the first user test and interviewing people, a few things came up with what people are asking for in an app where they can order snacks, including:
- Checkout process is too long – Combining steps was a solution to improve the user experience when checking out their items.
- Remove Past Orders button in process – Instead of having the Past Orders button within the process, I removed it and replaced it with the Back button that I had forgotten. Past Orders is already in the top navbar anyway so it’s not necessary.
- Change color palette – Dark themes are my favorite type of interface setting, but after figuring out how difficult it could be to read colored text on black, I changed it to a light/white theme so that everything reads more clearly.
Accessibility Considerations
- The color scheme of the entire app has been changed from a dark to a light theme to improve readability by all users.
- Some steps have been combined to minimize time required to checkout.
- Theater seating map has been removed. User only needs to enter the number of their seat when picking delivery as their option of getting their snacks.
Takeaways
Impact:
The movie snack app will be a very useful tool for people that are handicapped, have children, or simply don’t want to miss part of the movie to go get more snacks.
What I learned:
This whole process has taught me a lot about what steps are involved in the research, reviews as well as how to use Figma to prototype better than when I started.