The 5th Avenue Theater Case Study

A redesign of the 5th Avenue Theatre iOS application with the focus on check out flow and streamlining seat selection.

Timeframe: Two weeks | Deliverables: Wireframes, style guide, high fidelity comps, branding, competitive comparative analysis | Software: Sketch, Omnigraffle, InVision | Methods: low-high fidelity sketches, low-high wireframes

Role: Interaction Designer and Visual Designer

Team Member: Stuart Gordon - Researcher, Information Architect, and Project Manager 

The Project
As a team of two, we were given the challenge to recreate The 5th Avenue Theatre iOS application.  We had to consider what roles each would have to take.  Overviewing the different methods and tools to use my partner Stuart Gordon and I decided that we would help each other along the way, considering what tasks needed to be fulfilled to help the other finish their goals.  Stuart Gordon took upon the Researcher, Information Architecture and Project Manager role whereas I was the Interaction Designer and Visual Designer.  I created the Competitive and Comparative business analysis as it would filter into most conventional design methods, layout, information architecture, wireframes, sitemaps, and usability findings.

“"I wish there was an easier way to purchase theater tickets when I'm on the go."”  - This persona was produced by Stuart Gordon

“"I wish there was an easier way to purchase theater tickets when I'm on the go."” - This persona was produced by Stuart Gordon

Meet Julia Lindstrom

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

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

Julia’s 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.

The Process:

•User research - interviewing, affinity mapping, card sort, Usability Testing

•Information Architecture - sitemap, navigation schema

•Interaction Design - sketching, low-high fidelity wireframes

•Visual Design - high fidelity comps, branding, style guide

 

Research

Competitive Comparative Analysis

Key Takeaway - thoughtful design would enable users a clear path to reach their goal as well as validate their decision

While Stuart was undergoing research, I was prepared to help the process by creating a competitive comparative analysis as it would inform the design process, Information Architecture and Visual design.

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

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

 
 
The user's view is obstructed due to zooming into the screen, and they cannot see the information in full detail to make a decipherable decision.

The user's view is obstructed due to zooming into the screen, and they cannot see the information in full detail to make a decipherable decision.

 

Key Findings

• To establish the information architecture, we theorized that the current tab bar could be condensed based on the repetitive nature of buying a ticket as well as looking at the competitors.

• Check out flow could be minimized by creating a clear path for users rather than multiple avenues to purchase a ticket.

• From user feedback we concluded when selecting a seat users would appreciate a clear view of what seat they are choosing and how much the seat was.

Annalysis image for website.jpg

Card Sort

Key Takeaway - participants validated minimizing the tab bar to three buttons

From the findings in the competitive comparative analysis, we created cards that reflect terms that are already in the market-space. We did a closed card sort in which we asked participants what terms make sense to them in the tab bar.

Terms from the competitors

Terms from the competitors

Participant engaged in closed card sort activity

Participant engaged in closed card sort activity

Participant engaged in closed card sort activity

Participant engaged in closed card sort activity

Close to the site map

Close to the site map

 
Site map

Site map

Sitemap

Key Takeaway - minimizing choice at first glance allowed users to achieve their goal of purchase in an expedited manner

From the findings in the card sort, I was able to condense the tab bar menu to 3 terms that mattered most to our users. I perceived four buttons on the tab bar but as I was finding that the features that the existing site had could be placed in the explore button where users would find direct information and not be inundated with information at first glance.

I realized that productions showcase their graphic assets that are typically overpowering which is out of the control of a UX designer. The challenge was to create a minimal navigation schema to allow users to navigate through the application without being over stimulated.

 

Interaction Design

Sketching

Key Takeaway - checkout process was a pain point that needed to be addressed

As research was fulfilling the needs of the project and we had information flow to go from, we focused on the checkout process as it was a pain point for our users. I started to create many iterations of paper prototypes and conducted usability tests.  

Open card Sort

Open card Sort

 
Closed card sort

Closed card sort

 
Open Card sort

Open Card sort

 

Usability Test

Key Takeaway - iterations of home screen, select your seat and checkout screens were needed for optimal user interaction

I created a task scenario for our participants in the usability test:

It is your Mother’s Birthday March 2nd, and you want to take your mom and another family member out to see the Rock of Ages musical at The 5th Avenue Theater. You decide to go to the 8:00 pm show and you want to splurge and find a seat in the front orchestra section.  Once you have found your seats could you please buy your tickets and check out.

1. Home Screen: Testers were confused whether to tap :date’ or “purchase”.

1. Home Screen: Testers were confused whether to tap :date’ or “purchase”.

 
3. Section Selection: Users felt this was a good overview of the theater with ball park prices.

3. Section Selection: Users felt this was a good overview of the theater with ball park prices.

 
I do prefer to look at a map so I can get a sense of where I am sitting and typically that deciphers price but I would hope to see the price once I selected a seat.
2. Event Time Screen: Users felt this screen was intuitive choose their dates.

2. Event Time Screen: Users felt this screen was intuitive choose their dates.

 
4. Select your Seat: Users flagged the seat selection because there was no seat or price confirmation. Additionally they wanted a way to delete tickets.

4. Select your Seat: Users flagged the seat selection because there was no seat or price confirmation. Additionally they wanted a way to delete tickets.

5. Checkout Screen: Not showing a delivery method (mail, will call, mobile, etc) was confusing to users.

5. Checkout Screen: Not showing a delivery method (mail, will call, mobile, etc) was confusing to users.

 

Wireframes

Key Takeaway - further iterations of the wireframes gleaned pain points from users as well as investing time to learn the Human Interface Guidelines set by Apple

I incorporated our findings from the paper prototype into the digital wireframes, then tested again. The new tests revealed different pain points for users. I also had to revisit iOS standards (HIG) to meet apple compliancy.

1. Home Screen: Users were confused about whether to tap: date’ or “purchase.” Users were conflicted by the wording. I changed the wording and made the two buttons into one button.

1. Home Screen: Users were confused about whether to tap: date’ or “purchase.” Users were conflicted by the wording. I changed the wording and made the two buttons into one button.

3. Section Selection: Users felt this was a good overview of the theater with ballpark prices.

3. Section Selection: Users felt this was a good overview of the theater with ballpark prices.

Design Studio

Key Takeaway - teamwork enabled a clear understanding how to execute the “Select Your Seat” screen

Luckily we implemented a “design studio” session for the fourth wireframe to see how we could improve the Select Your Seat price confirmation screen.

We produced 15 ideas landing on a new design.

The optimized design is an option where the user selects their seats, and the confirmation populates at the bottom above the “check out” button.

Design Studio sketch

Design Studio sketch

2. Event Screen: The black on the grey color scheme was hard to read and not ADA compliant.

2. Event Screen: The black on the grey color scheme was hard to read and not ADA compliant.

 
4. Select your Seat: Users flagged the seat selection because there was no seat or price confirmation. Additionally, they wanted a way to delete tickets. They also vocalized how they thought the call out was a button.

4. Select your Seat: Users flagged the seat selection because there was no seat or price confirmation. Additionally, they wanted a way to delete tickets. They also vocalized how they thought the call out was a button.

5. Check out Screen: Users at this point felt that the checkout process was clear.

5. Check out Screen: Users at this point felt that the checkout process was clear.

 

We also truncated the ticket checkout process, modified the design to be ADA compliant. We considered user interactions to be consistent, recognizable, and minimal.

Furthermore, we added the “create account” process at the end of the checkout rather than in the beginning as our users did not appreciate giving personal information right away.

 

Visual Design

Key Takeaway - the iOS app complimented the interior space of the Theater for consistency in branding

Meanwhile, as research was continually fostering insights I created a style guide for the application that reflects the physical interior space of The 5th Avenue Theatre which opened in 1926.  I wanted to bring the color scheme of the theatre into the app yet allow for modern conventions to surface through flat design.

 
Interior space of the 5th avenue theatre

Interior space of the 5th avenue theatre

UI Style Guide.png
 

Hi-Fidelity Wireframes

Key Takeaway - through the iterative process pain points were eradicated through interaction and visual design; furthermore the application was ADA compliant for those with color blindness

I incorporated what we learned with the paper prototypes and the digital wireframes to create a High Fidelity mockup. In the first example (Select Your Show) on the right, I incorporated the date and buy ticket button in the form of an arrow as well as the red color calls the users attention to act and press the button. Furthermore, by 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 essential information. I also made the point size larger so that individuals with poor eye-site could articulate the date and time.

 
Select your show

Select your show

Select your Date

Select your Date

Select your section

Select your section

From researching color and acknowledging ADA regulations when it comes to styling specifically for color, I listened to users with color blindness. I found out that individuals with color blindness have a hard time deciphering red from grey. In the slide “Select Your Seat” I decided to use color but also shape for those individuals who are color blind.

 

Reflection

With all the insights our users provided, we modified the current design. The home page is more accessible to scan for events and produced a structure that allows users to act. The truncated ticket checkout process enables users the ability to understand the pricing and information presented. We took into account ADA compliant regulations to allow our application to be viable. Users expressed they would instead 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.

Throughout creating the 5th Avenue Theatre application, I learned the Human Interface Guidelines that Apple requires for native applications to be produced. I found that I enjoy creating work under such guidelines as it allows me to create work that is creative yet confined in a space that appeals to my minimal aesthetic.

Next Steps

  • 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)

Select your seat

Select your seat

Check-out

Check-out