MoviePass Redesign

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.


Redesign

The App

Role

UX/UI Designer, Visual Designer

Details

Partner Project, 48 hours

Tools used

Sketch, Illustrator, Marvel, Principle, Pencil & Paper

Problem

How might we create a seamless interaction from booking a showtime to watching the movie

Users

MoviePass Subscribers

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.

Improved Navigation

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.

Improved Search

Default search will be to user's current location. Users will also be able to switch between List and Map view to find theaters.

High-Level Process


Understanding the user

Research

The most common tasks done on the app are:

  1. finding a theater near you
  2. finding a movie to watch
  3. 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.


Creating Personas

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.

Process

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:

  1. Find "Plaza Theatre" and look for the next showing of "Kingsman: The Golden Circle."
  2. Reserve a ticket for "Kingsman: The Golden Circle."
  3. 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.

High-Fidelity Designs

Interaction

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.


Before: Theaters, Movies, Map, Profile, MoviePass Cards, Loyalty Programs, E-tickets, Invite Friends, History, Help


After: Theaters, Movies, Bookings, Account



Book a showtime

Users can book a movie in two ways: searching by theater first or searching by movie first.


Theater First


Movie First

Theaters Tab

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.


Theaters sorted by distance from user's location


Each switch between list and map views


Live filtering by "e-ticket" or "select seating"


See all available movies by theater

Movies Tab

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.


Movies listed in alphabetical order


See all available theaters by movie

Bookings Tab

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.


Current booking with time remaining to book


When ticket is purchased, screen will change to show this


Ability to cancel


e-Tickets can be found here

Accounts Tab

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.


Users can manage their account settings




Details about subscription information




Users can set what tab to show first



Visuals

Color

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.


Icons

To create a cohesive aesthetic, I redesigned the icons for the tab bar to clearly communicate its meaning.

Theaters

Movies

Bookings

Account

Splash/Log-In Screen

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.

Interactive Prototype

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!



Interface Design

Thoughts

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.

Note: this is a redesign concept done by 2 HCI students. We do not own the logos/images/movie posters used in the wireframes and mockups as these were only placed there to demonstrate a concept.