The Dallas Opera Information Architecture

Structural audit and recommendations for Dallas Opera website
Mockups of the proposed redesigned single performance page.
Expertise

,

Client

Dallas Opera

Timeline

2 months

Challenge

Overview

The Dallas Opera provides entertainment to a diverse audience. After suspending their opera season due to COVID-19, they reopened a new season with the addition of a digital streaming service.

The Dallas Opera needed help with the organization of content and navigation. After several years without major updates to the website and the expanding amount of content, navigation had changed many times. There was concern that it no longer served their needs.

How might we create an easier path to ticket sales and donating to The Dallas Opera?

Scope

We executed a heuristic evaluation of key pathways, a 14-day analysis of heat maps, website analytics, recordings, and nine user tests.

Constraints

We completed our full analysis with recommendations on three key flows on the marketing website: Ticket buying, donating, and getting to the streaming website.

Implementation

Data from analyses were taken from Hotjar and Google Analytics.

Our Goal

Our Goals

  • Understand the users’ flow through the website to complete key tasks.
  • Pinpoint areas of friction in key flows.
  • Recommend solutions to fix the root of the problem.

Our Solution

The research and design team at Standard Beagle created a roadmap for more streamlined navigation. Our recommendations were based on our interviews and tests with current Dallas Opera patrons.

Results

Our recommendations for structural changes would simplify navigation and page layouts.

These changes included a redesigned main navigation bar in the form of a mega menu, and removing the sidebar navigation.

Our Process

Understand

We first spoke with stakeholders to understand their needs. In doing so we found where to start our assessment.

Stakeholder goals were to drive sales, donations, and engagement with their streaming service. Due to rapid growth and restructuring of the site due to Covid-19 and the switch to introduce a streaming service, the navigation changed, and multiple paths to new or existing pages were created. Information about the streaming website had gone through several iterations of presentation. The mobile version of the site had not received the same amount of attention as the desktop version.

Heatmap of the Mainstage Performances page. Heatmap of a single performance page.

User Flows

We were given three main user flows to focus our efforts.

  • Patrons buying tickets
  • Making donations
  • Finding information about, and navigating to the streaming website

Heatmap and Statistical Analysis

A statistical analysis revealed that over 60 percent of users were on mobile when browsing the Dallas Opera website. However, navigation on the mobile version of the site was not consistent with the available pages on the desktop version.

Heatmaps and screen recordings showed the main paths users took in order to buy tickets. Most users who bought tickets navigated to the individual show page. Several users went through other paths in their search for tickets, before finding a path that lead them to their goal.

A heatmap of the mainstage performances page. The most clicked area is the upcoming performance.
Heatmap of a single performance page. The area with the most clicks are the buy tickets buttons.

Explore

User Testing

With a general flow mapped out, we put together a guide to test current patrons of the Dallas Opera

We needed to confirm several hypotheses.

  • Users navigate to the full list of season shows before picking the show they’re most interested in, and purchasing tickets from there.
  • Because users’ main goal is purchasing tickets, they are not interested in finding out more about donating.
  • Users can find the streaming website, but don’t have enough information to understand what it offers.
Season subscription holders vs. Non-subscription holders

We found during our initial tests that all users were opera season subscription holders and did not bother with the ticket buying or donation flows. As subscription holders, they did not need to buy single tickets through the website and regularly donated time and money.

Insights and Opportunities
1

The ticket buying and donation flows would need additional testing with non-subscribers, as they would be the most likely user to follow this path.

Skipping donations

Users came to the site with the express goal of buying tickets. Most users did not notice the “Donate” button on the global navigation bar.

Insights and Opportunities
2

Options to donate would need to be available on the ticket buying flow in order to catch users’ eye and encourage them to donate.

Information on the streaming service

Users could not immediately find necessary information about the streaming service, such as price, video length, devices they could watch on, and the types of videos available for streaming.

Insights and Opportunities
3

Users were hesitant to use a service without full knowledge of what they were buying, had to make assumptions, and did not find it valuable.

Additionally, we gained more insight into user behavior and mobile usage.

  • 1

    Ticket buying users stressed the importance of seeing the seating chart before purchasing a ticket. The seating chart was not available for mobile users until checkout.

  • 2

    Regular donors found information for volunteer opportunities buried within navigation labeled for donations, and felt it needed a separate section.

  • 3

    The loss of a landing page with vital information about the streaming website's offerings lead users to be confused about the service.

  • 4

    Content and images were not optimized for mobile viewing, and added a lot of scrolling for mobile users.

Design

Solutions

In order to remove blocks from users’ paths, we proposed several changes:

  • Remove the side menu, which created confusing navigation loops and conflicted with the main navigation bar.
  • With screen space freed by removing the side bar, components such as cards featuring single performances, could spread out across the page.
  • Replace the main navigation bar with a mega menu, putting all important information in one easily accessible place.
  • Reformat page layouts and limit content to remove extra page scrolling.