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
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.
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
"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.
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
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.
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).
The movie list can be sorted by three tags: New, Top 25, and Upcoming. Users reported using none of these options.
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).
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).
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).
Neither of these functions were perceived as critical, but users appreciated having these features. To improve the information architecture, we combined these two tabs.
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).
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.
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.
In the Account tab, users can set their preference of whether the app opens to Theaters or Movies.
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).
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.
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).
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!