MovieSnack app
When tasked with creating a movie snack ordering app, I first interviewed movie patrons to see what problems this app could solve. Quickly I noticed a theme that patrons would sometimes miss the movie or previews waiting on lines ordering concessions.
-
The Problem
Moviegoers traditionally had to wait in long lines at the concession stand to get their snacks. Unfortunately, this often meant to buy snacks; patrons had to arrive at the theater extra early or risk missing some of the previews or, worse, some of the movie.
-
The Goal
My goal was to design a snack ordering app that allows moviegoers to easily order snacks and have them ready for pick-up when they arrive.
-
My Role: UX Designer
My responsibilities included user research, wire-framing, prototype, usability testing, iteration, and the creation of the high-fidelity prototype.
Main Users
For my first bit of research, I identified the primary users as working adult moviegoers pressed for time. Next, I interviewed four frequent moviegoers who fit these criteria. Through these interviews, I narrowed down that they want the ability to order snacks ahead of time, pick them up, and go straight to their seat. Finally, to gain empathy for the primary users, I created user personas to combine their pain points and put a face to who I'm designing for.
Persona 1
Persona 2
User Journey Map
I created an ideal user flow with what the app should accomplish and the desired user experience from the data I collected. It later developed into an experience map, which captured the user’s journey and emotions with each touchpoint they perform within the app.
The biggest takeaway’s from the user flow is that the app needs to have two main features.
The ability to schedule the order in advance.
A confirmation that the order will be ready at the selected time.
-
Close-up Storyboard
Next, I created a close-up storyboard to communicate the app's user experience I wanted to convey. The storyboard helped me see the flow in the app, where key features need to be, and what satisfaction looked like.
-
Competitive Analysis
A competitive analysis was created and was the perfect way to learn from competing apps in the space. I was able to get a sense of how other apps delivered their user experience. What features they lacked. And how they might have executed some of the features I know MovieSnacks needs. For example, the competing apps lack the ability to schedule your orders ahead of time, and they also lack real-time tracking or notification on the completion of your order. These features would be my app’s advantage.
-
User Flow
I created this flowchart by taking what I learned from the competitors and factoring in new features I intend to add. As a result, this chart served as a visual representation of the pages and actions the user would experience. In addition, it gave me clarity to the primary user navigation in the MovieSnack app.
Low-fidelity Prototyping
I created a lo-fi prototype with the purpose of usability testing with my research participants. The app's initial design involved horizontal navigation intending to help users focus on their snack category to get to their desired snacks quicker.
However, after conducting a usability study and creating an affinity diagram of the prototype, there were some navigational flaws. It became apparent that horizontal and vertical scrolling led to some confusion, and buttons for navigation would be a better choice. I redesigned the flow with this change in mind to make navigation more intuitive.
Another addition I wanted to make from the research was to add a "favorites" section where the users could reorder some of their favorite snack combinations with one click.
I started pulling user interface inspiration from popular food ordering apps to study how they guide users through these journeys.
Latest Designs
I redesigned the layout by taking the user feedback focusing on a more consistent navigation process. I moved away from any horizontal scrolling and made it purely vertical. These changes also helped me better allocate a section that lets users select their favorite orders and select a desired ready by time. The latest prototype addresses the key issues that arose during usability testing. The high-fidelity prototype can be viewed here.
Moving Forward
There is still a lot more to explore with MovieSnacks. What if there was a progress bar so people could see their orders being fulfilled in real-time. This feature would give the user a greater expectation about their order. What if a section for promotional snacks or bonus snacks would unlock with the ticket to certain blockbuster movies? These are just some of the questions I'd like to expand on as I continue to work on this project.