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
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
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.
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.
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.
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.
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.
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."
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).