Creating a seamless experience for movie lovers
MoviePass is a service that allows movie lovers to view as many movies as they want each month, booking showtimes on a mobile app. However, there are some hiccups in the mobile experience, requiring some refinement in the interaction.
I worked with one other designer to redesign the interaction and visual aesthetics of the app. We both worked together on the research and analysis sections but approached the design portion differently.
UX/UI Designer, Visual Designer
Partner Project, 48 hours
Sketch, Illustrator, Marvel, Principle, Pencil & Paper
How might we create a seamless interaction from booking a showtime to watching the movie
Clearer Check-In Process
Users will be able to easily check-in to the movie they wish to see. Once checked in, they can manage their booking on the new bookings tab.
New Bookings Tab
Users will be able to view, edit, cancel their current bookings. They will be notified when the allotted 30 minutes to book is over.
Users will be able to navigate the app via the native iOS tab bar. We redesigned the information architecture so only relevant and useful information is presented.
Default search will be to user's current location. Users will also be able to switch between List and Map view to find theaters.
Understanding the user
The most common tasks done on the app are:
- finding a theater near you
- finding a movie to watch
- booking a showtime
We asked 5 MoviePass users to conduct these tasks (and a few others) on the current app. Afterwards, we conducted a feedback interview session to get their thoughts. Some of the responses we got were:
"It's so hard to cancel my booking or edit it. I don't know where to go after I check in."
"Even though I'm already at the theater, it's hard to find the listing in the app."
"When I'm in line for the counter, I get anxious when I can't find the showtime to check in to because there are always people behind me."
The current app
We identified areas for improvement by drawing out the current user flow. This was from our own analysis as well as our interviews with users.
Based on our interviews and analysis, we created 2 personas used throughout our designs, Zack and Amy. While their frustrations with the app are different, Zack and Amy have a similar goal: to watch a movie using MoviePass.
What should be changed?
Based on user feedback and the weaknesses we identified in the current app, I drew out the ideal user flow someone like Zack or Amy would go through to watch a movie.
Zack feels frustrated when he has to make changes to a previous booking. In our proposed flow, he can easily cancel his previous booking to make a new one.
Amy feels confused as to how to locate a theater. In our redesign, the app displays the theaters closest to the user's location.
A big user pain point was with the app's navigation. We redesigned the information architecture so users could navigate it better.
To start designing screens, we created low fidelity wireframes for each major functionality in our new design.
Getting user feedback
We conducted 5 user feedback sessions based on our low-fidelity wireframes. A prototype was created in Marvel and used for these sessions. Users were given 3 tasks to complete:
- Find "Plaza Theatre" and look for the next showing of "Kingsman: The Golden Circle."
- Reserve a ticket for "Kingsman: The Golden Circle."
- Cancel your booking.
Users then participated in an interview session where they were asked their thoughts about using the app. Based on their feedback, we made the necessary adjustments to the design.
Easy check-in process
Because check-in is the top action done with MoviePass, I wanted to focus on this process. The new redesigned interaction is simple and done within one modal to limit the number of screens users have to go through. Once checked-in, a badge is added to the "Bookings" tab to indicate that the user has completed the process.
Clear navigation bar
Cleaning up the navigation bar makes it easier for the user to find relevant information on the app.
Book a showtime
Users can book a movie in two ways: searching by theater first or searching by movie first.
Theaters tab contains a list of theaters sorted by distance from the user's current location. We also combined the map feature to this tab so users can easily switch between a list view and map view.
Movies tab contains a list of all the movies available sorted in alphabetical order. Users generally only search movie first if they already know the title of the film.
We created the Bookings tab so that users are able to easily view and edit their bookings. Users will also be presented with a list of movies they have purchased using their MoviePass account.
Anything related to the user's account will be found here. Through testing, we found that there are both users who search by movies first and users who search by theaters first. To accomodate for both types of user, we added the ability to set the default view shown when the app opens.
To maintain consistency, the MoviePass red was used as the main color, while using black and white to create a sense of cleanliness and ease.
To create a cohesive aesthetic, I redesigned the icons for the tab bar to clearly communicate its meaning.
Fun splash screen for when the user logs in. I used flat icon design to differentiate from the rest of the app.
I made extra icons for branding purposes using variations of the red used in the app.
Throughout the process, we got feedback from users by putting screens into Marvel and having them click through to make sure the flow made sense. Here is a clickable prototype!
This was a fun project as we both are movie lovers. We learned how to use formative testing in order to drive our designs, getting consistent feedback from users. Because we are also users of MoviePass, we had to be careful to not let our bias affect our designs. To alleviate this, we continuously asked for feedback from other users when designing.
I mentioned this previously in my BeneSwappe project, but I have to say storyboarding each screen of an animation is extremely helpful.