A UX Case Study
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.
I led our initial discovery phase and created the user testing plan. I also helped analyze and critique the existing app 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.
Goal: To explore users' current experiences with the MoviePass iOS app
Method: 5 MoviePass users
Procedure: Each participant took part in an individual semi-structured interview. As part of the interview, participants were asked to describe the most common tasks they performed with the app. They were then asked to demonstrate those tasks.
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
The sign in process is cumbersome. "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.
The sign out functionality is hidden in the side navigation behind a hamburger menu. None of the users realized that the side nav was scrollable.
Navigating the App
The navigation bar at the top has four icons (Screen 1). Three of these options pertain to functions of the app: Theaters, Movies, and Invite Friends. These three options, along with many more tabs, are all hidden behind a hamburger menu (Screen 2). Each menu item is detailed below.
The Subscription Information Tab
This tab contains the user's account information. None of our users reported using the "Connect With Facebook" button, so we decided to remove it.
The Map Tab
Users can browse for theaters within a map view. This functionality is similar to the next tab (list view), so we combined these two features.
The Theaters Tab
This tab is repeated in the top nav. Users can browse for theaters with a list view, sorted by proximity. However, users must manually input their zip code.
The icons denote theaters that support e-tickets and select seating, but do not allow for filtering. Several users found the icons to be unclear.
The Movies Tab
This tab is repeated in the top nav. Users can browse for movies with a list view (Screen 1) and search for a specific movie (Screen 2). The movie list can be sorted by three tags: New, Top 25, and Upcoming. Users reported using none of the three options due to uncertainty in the terminology. They 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 tags (Screen 3). There is also a bug where the Cancel button appears to be disabled (Screen 3).
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.
The MoviePass Cards Tab
No users reported clicking to this tab to look at their card information. Only one MoviePass card can be paired with an account. For these reasons, we combined this with the other subscription information.
The Loyalty Programs Tab
No users reported clicking to this tab to view loyalty programs. For some reason, out of all the tabs, only this one has a back arrow in the bottom left corner. We decided to combine this tab with other less used tabs.
The Friends Tab
This tab is repeated in the top nav. Users preferred word-of-mouth over using this Invite Friends feature. Also, the Email, Message, Twitter, and Facebook buttons are not actually functional.
The E-Tickets Tab
None of the users we talked to frequented theaters that supported e-tickets. However, they all reported that it would was a potentially useful function. To improve the information architecture, we combined this tab with the following tab.
The History Tab
Users can see a record of all the movies they have watched with MoviePass. While this function was not perceived as critical, users appreciated having this feature. We combined e-tickets, history, and current booking information into a single screen.
The Help & Feedback Tab
Users did not report using this feature but appreciated the ability to do so if needed. FAQs and Contact Support are links, but do not look clickable.
Booking a Showtime
Users exhibited two different approaches to booking a specific showtime. Whereas 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).
Users described several pain points along this process, including: 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.
Having identified pain points and user needs in the discovery phase, we sketched out new designs.
New user flow
We then created low-fidelity wireframes, focusing on the new information architecture and app flow.
Signing In & Out, Navigating the App
All users reported subscribing to the service before downloading the app, so we streamlined the sign in process (Screen 1). We retained the Sign Up button for people who may download the app first.
For navigation, we replaced the clunky hamburger menu with a native tab bar (Screen 2). The tab bar has 4 icons (Theaters, Movies, Bookings, Account) that reflect the core tasks identified in our research Key Takeaway #1.
The new Account tab combines multiple secondary features (subscription information, loyalty programs, invite friends, FAQs, contact support, sign out). Users can also set whether the app opens to the Theaters tab or Movies tab. This flexibility accounts for the two types of users described research Key Takeaway #3.
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. Theaters are automatically proximity to the user’s current location. After selecting a theater, users are shown the list of movies being shown at that location (Screen 4).
For the Movies tab, we removed the confusing New, Top 25, and Upcoming tags (Screen 1). Based on our research Key Takeaway #2, we also removed the Synopsis and Reviews screens. These extra features did not fit into users’ mental model of the app and thus were completely untouched. 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.
The new Bookings tab is designed to address multiple pain points identified from our research. It includes information about the current booking, if any, and the user’s past bookings (Screen 1). Proceeding from the modal in the check-in screen, 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). The Bookings tab also contains e-ticket information (Screen 4).
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.
- Log in to the app
- Find a theater that offers e-tickets
- Book a movie that does not offer e-tickets
- Cancel your booking
- Log out
After completing the tasks, users participated in a brief interview where they provided further comments and feedback about the prototype.
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).
Hamburger menu had 10 items and a hidden sign out button
Tab bar has 4 icons for key app functions: Theaters, Movies, Bookings, and Account
Manually input zip code for nearby theaters
No filtering by E-Tickets and Select Seating tags
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 were grouped by 3 tags: New, Top 25, and Upcoming
Removed unused tags and listed movies alphabetically
Previous History tab only showed past movies watched, with no information about current bookings
New Bookings tab lets users easily view and edit their current booking
Only contained subscription information
Other tertiary features (e.g., loyalty programs, invite friends) filled the hamburger menu
United multiple features into a single tab
Added toggle for the app’s default tab
- 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!