Fandango Ticket Selection & Purchasing Redesign.
Through using the Fandango app in our own daily lives as well as in our user research, my team and I identified major usability issues to address in our redesign. Our alterations to the existing app are meant to reduce the need to return to previous screens, streamline the ticket buying process, and improve the speed at which a ticket can ultimately be selected.
Scope: User Research • User Testing • Competitive Analysis • Prototyping
Timeline: 2 weeks
Increase the speed at which users select and purchase a ticket (after they have after chosen a movie).
User Research Methods
We began by conducting in-person interviews with friends who ranged in familiarity with the app in order to gain insights from a variety of users. We also chose these specific people because we know they commonly go see new movies. To understand the users, we asked several background questions about their preferences and how they normally go about buying movie tickets.
We began with simple questions like the ones below and let them flow into conversation:
What is your usual method for figuring out what movies are out?
How often do you go to watch movies in theaters?
How often do you buy tickets beforehand?
How do you decide what movie to watch?
What’s more important: specific theater location, time, seating, price?
User Testing (view detailed notes here)
We observed users completing tasks focusing on the movie ticket buying process and user flow.
Our 4 tasks for each user:
Buy tickets for 2 people to watch Frozen II in 3D on 11/25 at AMC La Jolla 12.
Buy presale tickets for 3 people to watch Star Wars: the Rise of Skywalker on 12/19 after 10 pm.
You see the movie you are interested in watching but it’s not released yet, how do you save it for later?
Purchase Star Wars: The Rise of Skywalker tickets for December 25 for 4 people who want reclined seating (allow the user to go up to the screen to complete purchase) BUT you need to add one more ticket for someone else, so change the amount of tickets from 4 to 5 people
After observing a user go through the four tasks, we asked follow up questions that allowed us to gather insights and pain points about the current experience.
Follow up questions:
What feature(s) appealed to you on Fandango?
What features did not appeal to you on Fandango?
Why or why not would you use the Fandango mobile app in the future?
What were the most challenging steps you faced as you completed your task?
What appealed to users the most on the Fandango mobile app after going through the four tasks was the “Go Now” feature which shows which movies are available to watch at that moment and a pre-sale movie ticket bar.
The pain points users ran into are the following:
Users did not like how “saving” the movie only pertained to saving the movie itself, not future dates and times for a specific movie.
Users would like to know the current capacity of the movie theater before committing to a date and time, in order to not be disappointed in the availability of the seats.
Users had trouble with the buttons on Fandango, pertaining to buttons used to revert an action and in selecting seats.
Users disliked how slow Fandango loaded its screens.
Major Insights - Fandango Ticket Purchasing
01. Cluttered UI
Users want a straightforward method for booking tickets without any distractions and confusing content.
Users do not want to spend time going back and forth between different screens in order to find good seats at their preferred times.
Ticket prices are not shown in the initial theater selection process, making it difficult to make decisions based on price.
04. Error Prevention
Users found it difficult to select the right seats. Also, the difference between the “cancel” button and back arrow were ambiguous, causing users to accidentally clear their entire form, forcing them to start over.
05. Recognition rather than Recall
During the seating selection, the movie, date, and time chosen is not displayed.
How Fandango looked at the time of redesign
We also considered other applications that had similar goals of ticket booking and seat selection. These other applications include: Atom, AMC theaters, and Gametime.
Here's what works:
Clean and modern UI
Minimal process screens and steps
Ability to easily compare seats at different times
Zoom in function to view and select seats
Here's what's lacking:
Ticket prices are not available until it’s time to purchase in movie applications
Experience #1 (view interactive prototype here)
In this experience, we first decided to redesign the Fandango mobile app to dark mode - to reflect the experience of being in a movie theater, as well as help the colors of the image pop.
1) Dark Mode
2) Pop Up Modal
Efficiency: For the ticket number selection, we implemented a pop up modal. In the case that the user would want to add tickets while on the seat selection screen, the pop up is accessible and they would not have to go back and forth between a forms page like in the original design.
3) Information Visibility
Visibility: The user has the ability to switch through different dates and times to view how prices and seating availability change. The bar under each movie time provides a visual of the remaining seat capacity. These features allow users to easily compare their options and make the best choice according to their preferences.
4) Larger Touch Points
Touch Points: To increase accessibility and create larger finger touch points, users are able to zoom in on the seat selection, as well as zoom back out to view their overall position in the theater.
Recognition rather than Recall: Relevant information in purchasing movie tickets (movie title, date, time, seat) is displayed on one screen, and designed in a way to prevent an overload of information and cluttered UI. Displaying information on one screen enables better recognition of movie ticket information, as well as ease in sharing this information to others (just in case the user is going with a group and wants confirmation on if their choices align with others in their group).
Experience #2 (view interactive prototype here)
In this experience, we wanted to accelerate the ticket selection process by introducing prices earlier on in the process. We decided on this because many of our users pointed out how price is the most important factor in determining where and when they go to a movie. We also attempt to minimize the amount of screens the user must go through in order to edit their ticket order.
1) Up-Front Pricing
Efficiency: The prices of tickets are listed within the same bubble as the times. This not only makes it easier to select a ticket without tapping through multiple screens, but it provides the user with information that they may not have found without this added visibility. For example, many theaters offer cheaper tickets during the AM (matinee) showings, which the majority of our users had never heard of before.
2) Filter Options
Visibility: Our user research found that their was no way for users to filter theaters by their amenities, such as only showing theaters with recliner seats. Rather than just showing theaters by proximity, users can now sort them by all kinds of things, such as the price, seating, screen size, etc.
2nd Round of User Testing
After completing our two prototypes based on problematic issues found in our first round of user testing on the Fandango mobile app, we created a second user testing plan to evaluate the usability, functionality, and navigation aspects of our redesigns. First, we asked our new set of users the same background questions from the first round of user testing.
We then proceeded to ask our users a series of open ended questions:
What do you expect to see from this feature before interacting with it?
What immediately stands out to you on this screen?
Is there anything you do or don’t like thus far?
Finally, we gauged their thoughts after seeing both redesigns:
Did you like either prototype more than the existing Fandango App?
What are your thoughts on these prototypes?
Do you prefer any features between the two designs?
To summarize, some users questioned the dark mode color scheme of our first redesign since it seemed off brand from the existing Fandango color pallete, but enjoyed the convenience of having the date, time, ticket and seat selection screens on one page. For our second design, our users questioned the theater occupancy bars and some said that all the information on the theater selection seemed a little cluttered, but enjoyed the filtering choices and readily listed ticket prices because it saved them the trouble of having to go through most of the process to get that information.
Overall, what worked best was the time selection screen from our second design, as well as the ticket and seat selection screens from our first design. The first design presents a much smoother flow according to users and the use of a modal allows for a less cluttered process.. The elements that need further exploration are intuitively displaying the theater occupancy indicators since the strong colors in these were the main reason users found it a little cluttered on the second design. Branding was also a slight concern because of the “dark mode” however the app was still familiar enough and this does not violate any major usability rules.
Through our process of redesigning the Fandango mobile app based on usability issues that surfaced from our user tests, we have gathered insight and some recommendations to help improve the current experience:
Condense the amount of screens the user has to navigate through to purchase a ticket.
The current design separates the “seat selection” screen and the “choose number of tickets” screen which causes a lot of tedious interaction for the user. This also creates more room for error, causing Fandango to break the recognition rather than recall usability rule, by not presenting the right information during the correct step, and forcing the user to go back and forth to adjust their ticket order.
Instead, there should be an integration between the “choose number of tickets” feature with the seat selection through a modal pop-up. This pop-up is first presented to the user when they select a movie time and theater, but they can bring it back up by clicking on the “# seats” button that is underlined above the “Confirm Purchase” button.
2. Improve visibility of information
We also propose to add the currently selected movie title, theater, date, time, seat availability and other time options at the top of the screen to readily present the user with their current movie itinerary, while allowing them to be in control of any changes.
Since some users expressed that price does affect their movie decisions, we observed that they are not always aware of the discounted ticket prices. We recommend that there should be a feature to scout the prices of different movie theaters and their offerings.