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