top of page

5th AVENUE THEATRE

5th Avenue Theatre Mockup.png

My Role: Interaction Designer (Concept Project)

  • Defined trends and prioritized features through collaborative affinity mapping

  • Created a storyboard to empathize with our persona's interaction with the app

  • Created user flows and UI flows

  • Drew low fidelity sketches

  • Designed 3 iterations of wireframes and built the prototype in InVision

​

Team: Me, 1 UX Researcher & 1 Visual Designer​

​

Timeframe: 2 weeks

​

Tools:  Sketch, Adobe Photoshop, OmniGraffle, Invision, Pen & Paper

Problem: 5th Avenue Theatre patrons have trouble accessing information such as parking, nearby restaurants, and ticketing in the mobile app. These patrons need better visibility into these resources to more easily plan their showtime activities.

5TH AVENUE THEATRE OVERVIEW

DSC_4100_966x668.jpg

First opened in 1926, The 5th Ave is a landmark theatre located in Seattle, Washington

DEVO_WebPageHeaders_chandelier2.jpg

The theatre features a variety of theatre productions and motion pictures.

RESEARCH

Conducting Research: To identify pain points with the current app for this redesign concept, we went straight to the source and conducted guerilla research by going to the 5th Avenue Theatre before shows. Our researcher gathered survey results and conducted contextual inquiries by having users walk through the existing app. Over a span of 2 days, we had 13 participants.

20181016_182512.jpg
20181016_184332-1.jpg
20181016_183052.jpg

Affinity Mapping: To define trends in users’ behaviors and attitudes, affinity mapping was used. The insights came straight from the surveys and observations of behavior. The results indicated that lack of readability was a common theme. People wanted more day of support, preferred purchasing tickets at home on a secure network over mobile, and needed easy access to their tickets.

0-1.jpeg

Persona: Most of our users sampled were females over the age of 46 who used iPhones. Many theatre patrons interviewed were not familiar with the downtown Seattle area and were casual theatre patrons. The researcher defined our user persona Janet based on an aggregate of all initial research.

Janet Weiss.png

IDEATION & SKETCHES CRAFTING A SOLUTION

SOLUTION: By adding a top navigation comprised of nearby parking, restaurant, and personal ticket info we will bring these user-valued resources to focus in the 5th Avenue Theatre mobile app experience. We will know this decision enhanced the patron’s theatre- going experience when we see a sustained increase of app adoption and engagement.

Feature Prioritization & Problems With the Current App :  From our research, people interacted mostly with the first page which was the “featured” page. The functionality and visibility of the featured shows as it exists is important to the business goal of promoting upcoming shows. The real estate of the featured shows was minimized and a top navigation was created on the "Featured" page to provide day of support for finding parking, browsing restaurants and finding showtime status (the "Showtime Status" was feature was later changed to "My Tickets" due to user feedback). Day of support they sought out was already in the app but wasn’t findable. Our persona interacted with Facebook and Instagram regularly: the top navigation tool was inspired by these social media apps.

IMG_0320.png

Above: Existing 5th Ave Featured page

Og Parking.png

Above: Parking and Restaurants exists in the current app but is buried in the "More" page which has 26 categories

og insta.png

Above: Our top navigation bar design was inspired by "My Stories" from Instagram and Facebook

Storyboard: To empathize with our persona Janet, I created a storyboard that details how Janet would interact with the top navigation on the redesigned app.

STORYBOARD.png

User Flows:  I created user flows of before and after the redesign to show how users find parking, restaurants, and access tickets to the show. Before the redesign, users had to go through many steps to complete tasks. The process of completing these tasks is simplified in the redesign by making everything visible when users first log in into the app to reduce the amount of clicks.

User Flow Before

Existing Flow 5th Ave Theatre.jpg

User Flow After

5th Ave - New User Flow.jpg

Sketches:  The ideation process to determine the layout of the redesigned app was a collaborative process. Originally, the top navigation bar was only in the featured home page. For ease of accessibility, a smaller top navigation bar was added when interacting with any element within the featured page. Below are my initial sketches.

0-2.jpeg
IMG_3288.JPG
IMG_0276 2.jpg
IMG_0276 2.jpg

WIREFRAMES & USABILITY TESTING

Initial Wireframes: In the initial wireframes I created, the showtime status feature is similar to a flight tracker. The order of the top navigation bar is laid out in sequential order according to how I envisioned our persona Janet would interact with the app.

thumb_Home_2x.png
External Restaurant Website_2x.png
Restaurant_2x.png
Show Time_2x.png
External Map Page Restaurants_2x.png
Parking_2x.png
External Map Parking Page_2x.png

Usability Testing & Iterations: Our researcher ran 3 rounds of usability testing with 8 different people: 3 people in the first round, 2 people in the second round, and 3 people in the third round. Below are the key changes I made categorized by feature, content and visuals.

Feature Changes: The “Showtime Status” feature was eliminated and “My Tickets” was added which show tickets from all the upcoming shows they’ve purchased because an avid theatre goer who is familiar with the 5th Ave Theatre stated that “Showtime Status” was an unrealistic feature. The 5th Ave is part of Union House which means it is extremely rare to start late. A feature that users wanted to see instead was a want a way to access tickets. The subscriber portal at the top of the "Parking" and "Restaurants" page was eliminated because users found it confusing and our persona is a casual theatre goer.

Show Time_2x.png

Above: Showtime Status: V1

Ticket Info 6.png

Above: My Tickets: V4

Subscriber parking.png

Above: Parking: V1

Content Changes: Prices were added to reflect the different rates of each recommended garage and distance from the theatre was added because users wanted to compare rates and distance. The proximity of the restaurant to the theatre was added because theatre patrons wanted to know how far they will have to walk.

Parking Garage A.png
Restaurant A.png

Visual Changes: To break up the content, visuals of the playbill in the "My Tickets" section was added based on user feedback. Similar to "Parking", people wanted to see a map of all the restaurants at the top of the page which I added in the last iteration.

Ticket Info 7.png

Above: My Tickets: V3

Ticket Info 6.png

Above: My Tickets: V4

Restaurant_2x.png

Above: Restaurants: V1

Restaurant.png

Above: A map was added to Restaurants: V4

Final Wireframes & UI Flow: I created a UI flowchart with the final wireframes to show the interactions between screens. 

UI FLOW.png

FINAL VISUAL MOCKUPS

5th Ave Revised Screens Mockup.png

*Originally designed by the Visual Designer. I have slightly modified it retrospectively to better adhere to Human Interface Guidelines and increased fidelity

REFLECTION & NEXT STEPS

One of the most important takeaway from this project was the ability to be adaptable. It was surprising to me that multiple theatre patrons had requested a show time tracker only to gain insight later on from a 5th Ave Theatre insider that the feature was unrealistic due to the obligation for shows to start on time under union rules. I had to quickly replace the showtime tracker with the ticket feature in response to user feedback. In hindsight, I would have conducted more initial research in different settings and contexts. The need for day of support could have been biased by the time we conducted the research, which was an hour before the shows started. For next steps, I would like to approach 5th Avenue Theatre to present our app redesign concept.

bottom of page