Local Theatre Website Redesign

Better navigation drives ticket sales

Local Theatre Website Redesign

My role

Competitor research, Card sort & IA, Persona, User Testing & Task Analysis, Wireframe, Prototype

About

I worked with a small team on a complete redesign of the Roundabout Theatre website. We followed a UX process to re-structure the navigation, create a persona, and develop a responsive website design which streamlines the ticket purchase process. We were able to streamline the ticket purchase process for on-the-go users by easily navigating a purchase through the calendar.


Discovery

The Roundabout Theatre Company is a local nonprofit organization located in New York City offering production of classic plays and musicals. They were in need of a website redesign to make their site responsive and drive ticket sales. It was important to keep a modern aesthetic and keep existing brand elements. As a content driven site, consideration was given to the current content available.

Original website Original website

Understanding Users

We found that our users were busy and needed to be able to make plans with their phone. Although many users did not have a particularly substantial incomes, they were still willing to donate to a local organization.

Tools
  • Silverback
  • Google Forms
  • Audio recorder
  • Phone (for audio recording)
  • Pen and paper (for manual recording)
  • Computer and mobile device (for user)
Research Goals
  • Discover how people are purchasing/researching for tickets.
  • Discover how people are finding out about new broadway/off-broadway shows.
  • Gauge people’s interest in the performing arts
    • Style of performance
  • Discover people’s expectations of a theater company
    • Philanthropic interests
    • Mobile--optimized mobile website to keep mobile users engaged.
    • Content--Streamline the content throughout the website
    • Navigation--simplify the navigation so any user feels comfortable using the site
Interviews

Interviews were to be conducted in a place where you can be uninterrupted. Each interviewee was to be introduced and their role explained as an interviewer, as well as the nature of the interview (there are no wrong answers, etc.).

Survey Questions Outline Sample Survey Questions Outline Sample

Personas

We wanted to gain insights on how users are accessing content and developed four specific user profiles. To collect data we conducted interviews, observed specific tasks, and developed a questionnaire. By analyzing our data we were able to view the ways in which we could guide our design decisions.

Original website

Persona 1 Maddie

Maddie is a persona I developed for the young single parent, she lives in Brooklyn with her daughter Anna. Maddie is mostly always with her daughter unless she can find a sitter. She barely opens up her computer, but is always on her phone checking social media and looking for local events. Maddie attends a show once every few months at a local venue.

Findings

Focus on mobile

Users are on the go

Give users price options

Users are on a tight budget, but willing to donate.

Make it easy to attend an accessible show or bring a child

Visitors are not coming alone


Competitive Analysis

In order to explore the design space we conducted a review of direct and indirect competitors. We decided on dimensions and collected data in a spreadsheet. We then analyzed trends and patterns and organized recommendations into a slide deck.

Six websites were chosen based on similar size and offerings to the Roundabout Theatre Company. We analyzed five different characteristics including Social Options, Accessibility Options, Learning Opportunities, Clarity of Images, and Support for Organization. Further review consisted of determining if site was responsive, tickets were available for purchase, and number of venues.

Competitive Findings Competitive Analysis

Findings

To increase donations, attendance, and membership, competitors of Roundabout Theatre employ a variety of practices on their websites. Each of these practices is underpinned by clarity. The user requires clear textual and visual definitions of how and why to donate, attend, or become a member.

Social Options

Social media icons should stand out clearly and match design of site. Viewers are familiar with social media icons and should not be paired with additional text. A large newsletter sign-up box in the header or footer will encourage visitors to join the mailing list. Use of social media APIs proivde a quick view of up-to-date social content. Auto generate tweets, Facebook posts and events.

  • Social icons in header and footer are recognizable and match the design of website.
  • The newsletter signup is a large box and easy to see.
  • Events can be auto generated from social media.
Accessibility Options

It is essential that the website be accessible in order to provide equal access and equal opportunity to people with disabilities. The website should provide tools for accessibility, such as text size and readable text. Also, ensuring sufficient contrast between text and its background, using color as a highlight to what is already visible, using alt tags to describe images accurately, describing links and having a well organized and structured content can provide an easy online experience to those with disabilities.

  • Using color to highlight what is already visible.
  • Describe links rather than saying click here.
  • Well organized and structured content.
  • Sufficient contrast between text and its background.
Learning Opportunities

The content of the Education page should be well structured and organized, so users can scan and easily find the information they are looking for. Content should be divided and labeled properly so that it doesn’t cause confusion. The sections should have hierarchy between headings and copy text, also using color mindfully to bring the brand within the design of the website and create a good experience. Education should be a main item in the navigation with a drop down menu with the content of the page.

  • Visible and easy to find by placing the Education section on the main navigation.
  • Content in the Education page shows clearly how it is divided in the sub-navigation
  • Education page itself is well organized that guides users easily scan the content.
  • Good hierarchy in fonts.
Clarity of Images

Roundabout Theatre would benefit from using their images to inform the user as much as they use their textual content to do so. Applying this would mean drawing clear relationships between images and their related content. “Group Tickets,” for instance, should be paired with an image of a group of theatre-goers. Higher quality images, consistency of scale in image dimensions, and the removal of images too small for visual clarity or informative value should be implemented.

  • Images should support content / be directly related to content.
  • Quality and scale of image files should be consistent throughout.
  • Iconic images are sometimes more appropriate than photographic stills.
Donate/Support Organization

It is recommended that different language is used in the donate/support section. Using a word like “Giving” creates more understanding for the visitor, and is feels slightly less demanding. All options for giving should be clearly stated and defined, with a well defined hierarchy. This goes for the clear separation of personal donations and business donations as well. Some form of recognition may further encourage visitors to donate. This could take the form of donors being named in programs, on a plaque or seat, or some other form of recognition.

  • Multiple offerings in the way of donations or supporting.
  • Clear definitions of every donate/support option.
  • Changing the language to clarify that there are multiple options for giving.
  • Offering options to clarify reasoning for donations.

Card Sort & Tree Test

To conduct a card sort test for the Roundabout Theatre, content labels from the theatre company’s website were selected. Most of these cards were modeled directly from what appeared on the website, but we had to create specified duplicates to clarify some categories (contact education/contact Roundabout, event calendar/show calendar). Some cards were created in an attempt to restructure the massive amount of information available on the site.

39 content labels
81 participants
30 complete studies
Tools
  • Optimal Sort
  • Google Spreadsheet
Optimal Sort Optimal Sort

With the information we gathered from the participants of the card sort we were able to gain a better understanding of how people expected the information to be presented. From this data we conducted a tree study to understand further how people understood the navigation of the website. Out of 34 participants, 24 completed the study. We found that not all of our tasks were completed as we predicted. This left us to reimagine our planned structure of the website, and the re-naming of a few labels on the website for further clarification.

Findings

Explicit contextualization is needed for best results.

The results of our card sort revealed unexpected card groupings, and some cards were left ungrouped because of lack of context. Further, the results from our treejack study didn’t support the results of the card sort. Our results were not “typical” and were sometimes difficult to read in a quantitative fashion. What might make sense to some users might not to others. Either more context must be provided, or participant groups must be targeted for clearer results.

The website and participant studies must support the validity of user mental models.

Study participants were unsure if they were completing tasks correctly. Although we had clear descriptions of that the study was only for research purposes, people still felt as if they may be doing something “wrong.” Participant anxiety was a contributing factor in mixed results and study abandonment. Moving forward we may address this not only in study introductions, but also with greater reassurance throughout studies.

Participants experience information overload.

Participants of our studies tended to experience greater degrees of excessive task times, failure, and study abandonment when sorting or seeking information beyond top-level and second-level categories. While the client wants to retain its textual content as is, much of the content could be reduced to a single page or few pages if presented in a tables or other visual formats.


Site Map

Based on results of the card sort, we rearranged the main navigation of the website. Once we had a structure in place, we then choose 6 tasks for the user to complete in Optimal Sort. After rearranging the navigation elements based on feedback from tree test, we finalized our site map.

Task (Sample)

You heard good comments about the Casino Night at Roundabout Theater. You would like to attend this year, but you want to get more information about it. Find information about Casino Night.

Path to take: Shows & Events > List Events > Casino night

Task (Sample)

You have a company and would like to give your employees some sort of benefit to go the Roundabout Theater to see shows. Find out if Roundabout Theater offers any package benefits for companies.

Path to take: Support > Corporations > Corporate Club

Task (Sample)

You are looking for a performance to bring your friend to, but your friend is hard of hearing. Find out more information about the best performance(s) to look into.

Path to Take: About > FAQs

Site map Site map

Wireframes

Based on our research and findings we began sketching wireframes that incorporated our findings. Our wireframes and low fidelity prototypes began by following specific tasks we outlined, which mostly relate to how users actually interact with the website.

Task 1 Make a donation
Task 2 Attend an accessible show
Task 3 Rent a venue
Wireframe Wireframe

Prototypes

Through a series of testing and revisions, we came up with a high-fidelity prototype based on our previous research.

Tools
  • Sketch
  • InVision
  • Adobe Photoshop
  • Pen and paper (for low-fidelity wireframes)
Prototype Desktop prototype
Desktop prototype Desktop prototype
Mobile prototype Mobile prototype

Key Takeaways

We were able to streamline the ticket purchase process for on-the-go users by easily navigating a purchase through the calendar. The process for renting a venue for an event was simplified by compacting all venues and options onto one page. Further testing revealed users were drawn towards the sticky donation button on mobile when they land on the home screen and took down on subsequent pages.

Mobile Prototype

Desktop Prototype

What's next?

Our design will help The Roundabout Theatre Company reach their goals of increased ticket sales and donations by implementing this design into a fully functional responsive website for their target audience.

Google Analytics Tracking

  • Ticket sales
  • Donations
  • Device specific

Further Testing

  • Survey pop-up
  • Email survey
  • A/B Testing
Let's connect. or .