Stuart Gordon
Sr. UX Designer

5th Ave Theater

Mobile app redesign

5th Avenue Theatre Case Study

The 5th Avenue Theatre is a landmark building located in Seattle, Washington. It's hosted a wide variety of theatre productions and motion pictures since it opened in 1926.

My UX team's project is a redesign of their iOS application seat selection and check out flow process. 

Timeframe: Two weeks. Deliverables: Wireframes, style guide, high fidelity comps, branding, competitive comparative analysis. Software: Sketch, Omnigraffle, InVision, Survey Monkey. Methods: Contextual interviews, online survey, card sorting, low- to high-fidelity wireframes.

Team Member: Adrian Freuen - Interaction and Visual Designer

My role: Researcher, Information Architect, and Project Manager 

Discovery Begins
5th Ave Theater
The preferred method of purchasing tickets was the screener question.

Online Survey

I conducted an online survey in order to get a better understanding of the wants and needs of ticket purchasing.

An anonymous survey asked participants about their interest in live theater, propensity for mobile ticketing, and demographics.  

The survey was posted on Facebook and I asked actor friends to also forward to their peers. The results snowballed into 100 responses.

The main insights:

  • Prefer online ordering over box office
  • Prefer paperless tickets
  • Unaware of the app

5th Ave Theater
User testing of the current app

Current state usability test

We tested the current app and quickly found many barriers in the purchasing cycle.

All the users tested were very frustrated by the app’s checkout process saying it's not intuitive and very confusing — it makes people feel extremely frustrated, some to the point of not continuing with the sale.

Screens of the current app below.

Developing the persona
5th Ave Theater
Project Persona

Meet Julia

Julia a professional and mother does not have a lot of time to enjoy as many theater performances as she would like to.

Missed Opportunity: She has tried to purchase tickets from the 5th Ave Theater mobile application but finds it frustrating to get her tickets in a timely manner. She defaults to either calling the box office if she has time, or puts off buying tickets altogether.

Opportunity: If the 5th Avenue Theatre were to streamline the ticketing and check-out process to enable Julia an expedited experience she would save time and feel accomplished.

Competitive Analysis
5th Ave Theater
Competitive Analysis by Adrian Freuen

We researched five similar entertainment venues from movie theaters to broadway production theaters. The competitors reviewed were AMC Cinemas, Fox Atlanta Theater, Broadway.com, Regal Cinemas, and the Seattle Symphony/Benaroya Hall.

The table shows the strengths and weaknesses compared to The 5th Avenue Theatre application. 

Developing the user flow
5th Ave Theater

Pre-redesign user flow with 10 steps for the check out process

In order to get to understand the number of clicks to find a show, choose seats, and check out, I created a user flow of the current process.

The analysis revealed there were 10 steps to completing the check out task.

5th Ave Theater

Improved user flow with 6 steps

Improved user flow

After researching the competitor's apps and testing our lo-fi prototypes, we we able to condense the flow to 6 steps.

5th Ave Theater
The hi-fi prototype

Hi-fi prototype

The visual designer incorporated what we learned with the paper prototypes into the digital wireframes to create a High Fidelity mockup.

In the first example (Select Your Show) on the right we incorporated the date and buy ticket button in the form of an arrow as well as the color red calls the users attention to act and press the button.

Combining the two elements minimized confusion. The second screen (Select Your Date) on the left allowed for better visibility due to the contrast of black on white which is integral information. We also made the point size larger so that individuals with poor eyesite could read the date and time more easily.

From researching color and acknowledging ADA regulations we listened to users with color blindness. Individuals with color blindness have a hard time deciphering from red and grey. In the slide “Select Your Seat” we used not only color but a star shape for those individuals."

Prototype

Results

How we improved the design

With all the insights our users provided, we modified the home page to be more accessible and make it easier to scan for events.

The truncated ticket checkout process provides users the ability to understand the pricing and information presented. We took into account ADA compliant regulations to help our older users read the text easier.

Users expressed they would rather create an account at the end of the payment process being that personal information could be stored while a user is in the checkout flow.

Next steps in our design

  • Create a calendar flow

  • Add a “share” feature to allow patrons to connect with social media

  • Enable video clips of performances

  • Allow users to interact with digital props on their phones (augmented reality).