ANDY JIN
thumbnail_mp.png

MoviePass

 

MoviePass

A UX Case Study

 

Partner Project

 

48 hours

 
 

Background:  MoviePass is a movie subscription service.  By paying a flat monthly fee, users receive a prepaid debit card that they can use to watch any movie at participating theaters, up to one movie per day.  A mobile app is used to search for movies/theaters and check in to specific showtime, which activates the card for a ticket purchase.

Problem:  How can we improve the user’s experience with the app?

Solution:  I worked with one other designer to redesign the information architecture, interactions, and visual aesthetics.  The redesigned app streamlines the movie searching and booking process, and improves secondary features such as managing account settings.

 
Note:  We are two designers (and wannabe movie buffs) who did this case study in September 2017.  We are not affiliated with MoviePass in any way.
 
 

MY ROLE


 
 

User Research

I led our initial discovery phase and created the user testing plan.  I also helped analyze and critique the existing app design.
 

UX/UI Design

I created lo-fi wireframes and prototypes to gather feedback during the design process.  I also created hi-fi comps to showcase the final redesign.

 
 
 

DISCOVERY


 

interviews

Goal:  To explore users' current experiences with the MoviePass iOS app

Participants:  5 MoviePass users

Procedure:  Each participant took part in an individual semi-structured interview.  Participants were asked to describe and perform the most common tasks they did in the app.

 

Key TakeawayS

1.  We identified the top 3 tasks that users do in the app: search for a theater, search for a movie, and book a showtime.
          Design Implication:  We should focus on improving the experience around these tasks.

2.  Most people reported having a movie in mind they wanted to see, before turning to the app.  In their mental model, the app is used as a transactional tool, not an outlet for finding new movies.
          Design Implication:  Some secondary or tertiary features of the app can be trimmed.

3.  Whereas some users preferred to search first by theater and then by movie, others opted for the opposite method.
          Design Implication:  Our design should be flexible enough to account for either mental model.

 

Current user flow

As users demonstrated tasks in the app, we discovered many areas for improvement.  These pain points, along with other issues we found during our own analysis, are documented below.
 

Signing In & Out
Cumbersome Process
"Already a user" (Screen 1) and "already a member" (Screen 2) are redundant.  These are the main functions for most users, so the call to action should be larger.

Hidden Functionality
Sign out is hidden in the side navigation behind a hamburger menu.  None of the users realized that the nav drawer was scrollable.

 

Navigating the App
Ambiguous Icons
The navigation bar at the top has four icons, that some users were unsure about (Screen 1).

Bloated Nav Drawer
Ten tabs are hidden behind a hamburger menu (Screen 2).

 

The Map & Theaters Tabs
Users can browse for theaters within a map (Screen 1) or list view (Screen 2).  The functionality of these two tabs is similar, so we combined them.

Ambiguous Icons
Users expected to be able to sort by e-tickets and select seating.

 

The Movies Tab
Users can browse (Screen 1) and search for movies (Screen 2).

Terminology Confusion
The movie list can be sorted by three tags: New, Top 25, and Upcoming.  Users reported using none of these options.

Search Expectations
Users expected the search to be live, but it was not.  Search has a confusing interaction where movies appear multiple times if they are associated with more than one tag (Screen 3).

Unused Features
After selecting a specific movie, users can see Showtimes (Screen 4), a Synopsis (Screen 5), and Reviews (Screen 6).  The Synopsis and Reviews functions were largely unused because most users found this information elsewhere.

 

Booking a Showtime
Users had two different approaches to booking a specific showtime.
-  Some users preferred to search first by theater and then by movie (Screens 1a & 2a).
-  Others opted for the opposite method (Screens 1b & 2b).
Regardless, users arrive at a final check-in (Screen 3).  Checking in activates the MoviePass card for a ticket purchase.  On the confirmation page (Screen 4), users can cancel their current check-in and select another showing (Screen 5).

Pain Points
Lack of feedback after purchasing a ticket, inability to view current bookings, and no indication of the 30-minute time limit for when you must purchase a ticket after checking in.

 

The E-Tickets & History Tabs
Users can book e-tickets (Screen 1) and see a record of past movies they have watched (Screen 2).

Simplified IA
Neither of these functions were perceived as critical, but users appreciated having these features.  To improve the information architecture, we combined these two tabs.

 

Tertiary Features
The app contains many features that are not core to the user experience.  This includes subscription information (Screen 1), card information (Screen 2), loyalty programs (Screen 3), inviting friends (Screen 4), and FAQs (Screen 5).

Simplified IA
Currently, each of these functions is its own separate tab, which bloats the navigation drawer.  We decided to collapse all of this information into a single account information tab.

 
 

LO-FI DESIGN


 

SKETCHES

Having identified pain points and user needs in the discovery phase, I sketched out new designs.  The focus here was on fleshing out the new IA and high-level flow.

 
 
 

New user flow

I then created low-fidelity wireframes that incorporated UI elements to the sketches above.

 

Signing In & Out, Navigating the App
We streamlined the sign in process (Screen 1) and replaced the hamburger menu and nav drawer with a native tab bar (Screen 2).

The 4 tabs reflect users' core tasks.
-  Theaters
-  Movies
-  Bookings
-  Account

In the Account tab, users can set their preference of whether the app opens to Theaters or Movies.

 

Theaters Tab
The new Theaters tab combines map and list views that users can toggle between (Screens 1, 2, & 3).  We removed the ambiguous icons for e-tickets and select seating and added the ability to filter along those two tags.  After selecting a theater, users are shown the list of movies being shown at that location (Screen 4).

 

Movies Tab
We removed the confusing tags (Screen 1) and the Synopsis and Reviews screens.  These features did not fit users’ mental model of the app and were completely unused.

After selecting a movie, users are shown the list of theaters currently showing the film (Screen 2).

 

Booking a Showtime
Whether going through the “movies first” or “theaters first” route, users will eventually proceed to the check-in screen (Screen 1).  After a checking in, a modal will pop up confirming a successful reservation (Screen 2).  Users are then directed to the new Bookings tab.

 

Bookings Tab
The new Bookings tab includes information about the current booking, if any, and the user’s past bookings (Screen 1).  Users will see a 30-minute timer indicating the amount of time remaining to purchase a ticket after checking in (Screen 2).  Users will also receive feedback upon purchasing a ticket (Screen 3) and also e-ticket information, if applicable (Screen 4).

 

User testing

To test our design with users, we created a prototype with InVision.

We conducted 5 individual user feedback sessions.  For each session, users were asked to complete the following tasks.

  1. Log in to the app
  2. Find a theater that offers e-tickets
  3. Book a movie that does not offer e-tickets
  4. Cancel your booking
  5. Log out

After completing the tasks, users participated in a brief interview where they provided further comments and feedback about the prototype.

 

Key takeaways

What We Did Well
-  Overall, users were very satisfied with the new design.

-  Feedback on the new navigation was especially positive.  Compared to the old hamburger menu, the tab bar provided a more cohesive and fluid navigating experience.

-  Users confirmed that they did not miss the old movie filters and extraneous information such as reviews and synopses.

What to Improve
-  Some users disliked how the check-in confirmation modal forced them to the Bookings tab.

-  We also made various tweaks and improvements to the app’s content and parts of the interactions. 

 
 

HI- FI DESIGN


 

These are the highlights of my high-fidelity design compared to the original app.  For the full experience, check out the prototype below (made with Marvel).

 

navigation

 
 
 

Before

Hamburger menu had 10 items and a hidden sign out button

After

Tab bar has 4 icons for key app functions: Theaters, Movies, Bookings, and Account

 

theaters tab

 
 
 

Before

Manually input zip code for nearby theaters
No filtering by E-Tickets and Select Seating tags

After

Theaters automatically sorted by user’s location
Removed uninformative icons and added live filtering by theater features
Included toggle between list view and map view

 

movies tab

 
 
 

Before

Movies were grouped by 3 tags: New, Top 25, and Upcoming

After

Removed unused tags and listed movies alphabetically

 

bookings tab

 
 
 

Before

Previous History tab only showed past movies watched, with no information about current bookings

After

New Bookings tab lets users easily view and edit their current booking

 

account tab

 
 
 

Before

Only contained subscription information
Other tertiary features (e.g., loyalty programs, invite friends) filled the hamburger menu

After

United multiple features into a single tab
Added toggle for the app’s default tab

 
 
 
 
 

REFLECTION


 
 
  • This was a really fun project, especially because we are both movie lovers.  However, we had to be careful not to let our own biases into the design.  It really helped to get constant feedback from other users.
     
  • 48 hours is a short span of time to work with.  It challenged us to hone our focus and prioritize what was most important.  Our initial planning and goal-setting really paid off down the road.
     
  • Shout-out to this ticket salesperson for posing in this photo for us!