Fandango: Online Ticketing Made Easy

Movie And Concert Ticketing App

 
Cover.png
 

My Role:
User and competitive research
Design the checkout pages
Usability testing
 

Team:
3 Designers

Duration:
2 Weeks

Project Overview: 

Fandango has decided to expand their service from movie tickets to purchasing tickets to concert. In order to increase user engagement with the Fandango app, Fandango not only wants to make it easy for their users to get notified of events happening in their area, but also allows them to have a quick and easy checkout process. This was a 2 week spec project.

 

My Design Process 

 

Problems People Face 

 

Affinity Map

After conducting several rounds of user interviews and user research about purchasing ticketing online, we gathered the data and found patterns by creating an affinity diagram. Here are some of the things we found: 

 

  • People feel uncomfortable about placing tickets on their phones- Due to the confined screen size, people have difficulties choosing seats and filling in payment information.
     

  • It takes time to research between pages- People have to navigate between pages to know more about the venues, artists, and parking before going the concerts.
     

  • People find events through social media and word of mouth- For people who likes several bands, they have to check social media, news, or band’s website to get the latest concert news.

 

SWOT Analysis of Fandango 

 

Through market research and competitive analysis of Fandango's competitors, the team came up with a SWOT analysis that discusses Fandango's strengths, weaknesses, threats, and opportunities.

SWOT Analysis of Fandango
 

Some strengths Fandango currently has include that it already support ApplePay and PayPal, and the company has a large user base. Threat that Fandango has if they decide to sell concert tickets will be to face big competitors like Ticketmaster, Eventbrite, and Groupon. However, Fandango is still able to leverage its strengths by using its point reward system and user base to break into the industry as opportunities.  

 

Persona 1 & Customer Journey

 
Fandango Persona 1
 
 
 

Persona 2 & Customer Journey 

 
Fandango persona 2
 
 
 

Features List 

The team implemented the MoSCoW method to decide what needs to be added on for this MVP. 

  • MUST HAVE - 1) Able to select selection and seats on the interface
    2) Apple Pay/Paypal checkout options
    3) Filters to filter price, seat location, accessibility

  • SHOULD HAVE - 1) Favorite (heart) icon to like/save events
    2) Event information on the section/seat selection page so users don't have to research between pages
    3) Zoom feature on the section/seat selection map

  • COULD HAVE- 1) "Add to Apple Wallet" option in the delivery method
    2) Search events by date

  • WON'T HAVE- 1) Will call tickets

Solution 

Fandango wants to provide a quick, easy-to-navigate, and seamless experience for customers that help them secure ticket quickly. Our solutions include pop-up notifications that tell users the upcoming tour of their favorite bands, clear “section-to-seat” selection pages that allow users to get what they want in a blink.

Fandango’s new ticketing service also allow users to accumulate or redeem VIP+ Points. We believe this can further increase customer engagement.

 

Ideation 

User Flow

User is either looking for a concert or received a push notification from Fandango about an upcoming concert. User then can check the event(s) that they're interested and proceed to purchase ticket. 

My team spent 2 days comparing Fandango’s current app design, layout, features, and checkout process with major competitors like Ticketmaster and Eventbrite. Each team member first started sketching different screens on paper to gather ideas. 

Homepage idea

Seat selection page idea

Checkout page idea

Fandango checkout page reiteration

After coming to consensus on the design, we transferred paper sketches to some early stage wireframes. I was responsible for the checkout process once customers finished selecting event and seat.

Wireframes

Push notification page

Section selection page

Checkout page (with Apple Pay)

Thank you page

The current Fandango checkout page includes many information that we found repetitive, so I took out the sections such as "For Fandango VIPs" and "No Latecomers Policy", and make the remaining section as visible as possible.  

For Checkout Status: If the customer is already signed in, the system will automatically check the "Fandango VIP" option and grayed out other options. If the customer is not a Fandango member, he/she could choose either "Create Fandango Account" or "Guest Checkout."

For Delivery Method: I added "Add to Apple Wallet" option because we found several users store their digital tickets in Apple Wallet, so I think it'd make users easier to retrieve tickets.

 

Usability Findings
 

Seat section selection page

In our initial design, we have have “lowest price” in blue with “best seats” bolded in black. However according to the usability testing, many users got confused about the filter. They were not sure which filter was selected. So we change the design in to a tab style, and made a borderline highlighted around the tab that’s currently selected.

Checkout page

Users were slightly confused about which section they were on after they finished inputting payment method. We color-coated the section so users can have a better visual cue on the current checkout process.

 

Mockups

The mockups are the final versions of the app after 2 rounds of usability testing and feedback we received from users.   

 
 
 

Alternative Iterations on the Checkout Page

Here are some other versions of the checkout page that I designed. I believe the following design iteration also help users achieve efficiency and clarity. 

Version 1

1. If the user is logged in, the other options of checkout status will be grayed out. But if the user is not a member, he can “checkout as guest” or “create account” while the “Fandango VIP” option will be grayed out.

2. Selected item becomes bolded. Other options of the delivery method won't be grayed out even if one of the options is selected.

Make the selected item bolded help increase visual cue. Delivery method will not be grayed out so users know they can switch between different methods. 


 

 


Version 2

1. Unselected sections are collapsed

Instead of a long form that users have to scroll through, unselected sections are collapsed to decrease the time scrolling. 

 

 

 

 


 


Version 3

1. Replace the artist's photo with a selected seat section map and added seat location

Instead of showing the artist's photo all the way from the event page to the checkout page, I think added seat map and location will be more informative. Users can make a final check on their seat on this page. 

 

Next Step

1. Create remaining screens for other user paths.

2. Conduct usability testing for the entire new concert ticketing service, and iterate based on the feedback.

 

What I learned 

1. Pay attention to online reviews
One place to find out user pain points is through online reviews. Of course, some argued that reviews are biased and inaccurate, however I did found some great insights besides user interview findings. The reason why I checked reviews for this project was because a lot of people the team interviewed purchase ticket on laptops. It was a bit challenging for us to get insights from mobile ticketing experience.

My takeaways is look for the 2-4 stars reviews of the 5 stars scale. Usually 5 or 1 star reviews are very biased, but the 2-4 ones provide pros and cons most of the time.

2. Mobile limitation
As mentioned above, a lot of people still purchase tickets through laptop or desktop, especially for a high price purchase. Mobile apps/payment are convenient, but the small screen and keyboard make it hard for users to type or select. Fandango already did a great job on the interface: When you click the credit card number box, the keyboard changed to a "number only" keyboard instead of a regular keyboard. The small change elevates user experience a lot! 

3. Gather ideas through design studio workshop 
Design studio is an activity where stakeholders gathered together to individually sketch out ideas that solves a specific pain point. I found this activity beneficial and productive because each of the team member could freely express their ideas. Most importantly, share feedback with each other that I wasn't aware of. 

Design studio is a great exercise to come up with ideas to gain new perspective.

 

View Additional Case Studies