Austin Opera Redesign & Development
Redesign of main performance website
Challenge
Austin Opera is an organization based in Austin, Texas that entertains the community with their performances and operatic events. The organization felt that their website’s content was robust but was lacking clear organization and wanted their website to be redesigned so that their audiences could easily find what they needed — driving ticket sales and memberships up in the process. Austin Opera also felt that their website was not on point with their current direction and needed a revamped look and feel.
How might we clearly organize the content to provide direction to patrons and show the modern direction of the Austin Opera
Scope
The scope of this project included a full website redesign with the intent of driving up ticket sales, implementing a new look, and ensuring the site is mobile responsive.
Constraints
We had a bit over a three-month timeline for this project to implement the full UX process and development of a WordPress custom theme; we launched at the end of January 2020.
Implementation
During our process, we ensured that the website met state guidelines for accessibility and functionality, which included meeting WCAG 2.1 Level AA guidelines. We also implemented a Spanish version of the site, adding an English to Spanish toggle.
Our Goal
We found that the navigation structure was confusing to users and they were unsure where to find important information. The homepage was missing an opportunity to direct users where the organization wanted them to visit. We also found that the website was content dense and lacking visual hierarchy cues needed to guide users. Lastly, we found that users wanted more meaningful and impactful imagery to enrich their overall experience.
Our Solution
Standard Beagle worked with users to design and develop a website that addressed the pain points discovered during research.
- Restructuring of the navigation: The navigation system was restructured to redefine existing information hierarchy and was tested with users to ensure usability.
- Visual hierarchy cues: Distinct sections, headers, and bright call to actions were added to enhance the website’s usability, providing a visual guide to help the user discover useful information.
- Visual content sections: The website was redesigned to allow for more images to be implemented providing users with a visually compelling experience.
Results
During custom theme development in WordPress, we ensured that the management of events was easier for the admins by creating a system so events automatically move to archive, eliminating the need for manual removal. The archived events were still viewable and searchable by users.
Our Process
Understand
We started with a competitive analysis of other performing arts organizations both local to Austin and in other cities in Texas to see what other organizations were doing well in comparison. Then, we completed a heuristic evaluation of the current website to discover areas for improvement.
User Interviews
After learning about the demographic through interviews with screened users, we tested our assumptions about the current website. Based on the feedback from the users, their opinions closely resemble ours.
Key Takeaways
- Users wanted a more compelling experience. Performing art patrons are fans because they liked to escape reality, they expected the website to have a similar effect.
- They were frustrated with the navigation menu and found that they had a hard time finding specific information.
- Users wanted an easier way to access the calendar as it was hidden inside of a mega menu and wasn’t easy to find.
- Users found that there was too much text and they did not want to read through it.
It would be nice to see some pictures and a much smaller explanation of what the production is, I don’t want to read all of this.”
Explore
User Persona
The opera goers we spoke to were male and female, in their mid-twenties to mid-forties, and had been fans of the performing arts since they were young. They had goals like discovering new productions, choosing a production to see, and to discover visitor details.
User Persona
Design
Information Architecture
Card Sort
Because users were frustrated with the website’s architecture, we did an open cart sort to discover new ways to organize the website’s information. The team sorted the cards internally and she used the final sort to inform the sitemap.
Sitemap
A sitemap is a hierarchical diagram showing the structure of a website and defines a website’s taxonomy. The new website structure we explored was influenced by user research and implemented in the new sitemap. The key changes made in the new website’s structure were:
- Separating tickets into a distinctive category and renaming ‘Buy Tickets’ to improve clarity
- Creating a ‘Plan Your Experience’ category where users can more easily find information related to planning their visit
- Adding the ‘Calendar’ to the global navigation
- Renaming ‘Donate’ to ‘Support Us’
Content Inventory
We completed a content inventory to record the varying pages of the website and to allow the client to decide which pages would be displayed in the redesign. We figured out a better way to organize content so the end-user could discover information, but we still needed to build things in a way so the stakeholder could easily manage information.
The team brainstormed information architecture ideas on the whiteboard, exploring ways the client could interact with the WP dashboard. We decided that performances, events, locations, staff, sponsors, opportunities (auditions and employment) would have unique post types and there would be taxonomies for the season, events, and types of education.
User Flow Diagram
We created a user flow diagram to note the complete path a user would take when completing tasks on the website. Because there were numerous paths a user could take based on their interests, we chose the most important flows to diagram.
These flows were chosen based on the website’s main goals which were defined during client meetings and confirmed through user research focusing on:
- Discovering performance and buying tickets
- Planning a visit to the opera
- Supporting the organization
Wireframes
Now that we had a clear idea of the templates and how best to handle layouts, we digitized wireframe concepts using Figma. Our budget was limited to 5 wireframe templates, of which 3 mockups would be high fidelity. Using Figma, we designed a landing page, a production page, a single post type, a single page, and a location page.
Wireframes
Validate
Usability Testing
We decided to test the UX Wireframes with users to verify our design decisions. Due to budget constraints, we ‘guerilla tested’ the clickable prototype on three users of varying demographics.
Iterations
Donate
Users did not use the donate button to complete the task, so the donate button was removed and replaced with the Spanish version toggle. It was found that using a Spanish translation icon was not as effective as having a clearly labeled button that said, En Espanol.
Icon Labels
Users were uncertain what the icons meant, especially in this version as icon placeholders were used instead of unique iconography. Icon labels were added to reduce friction.
Support
Users through Support in the main navigation menu was a place to ask for help. They eventually realized that Support was a place to contribute to the organization, but to reduce friction Support was changed to Support Us.
Visual Design
Style Tiles
We uncovered brand adjectives during the kick-off meeting with the client and Amanda used them to influence two style tiles. The client had an internal review to vote on their favorite, then the selected style influenced the look and feel of the high fidelity mockups.
Hi-Fidelity Designs
Implementing the look and feel of the selected style tile, Amanda designed high fidelity versions of the landing page, single page, and single post type using Figma. We went through a couple of rounds of A/B testing to ensure the style of the landing page work for the end-user and the client.
Create
Development + QA
The developers built the website on WordPress with a custom theme to give the client more control. After the development release, we did several rounds of internal QA testing to ensure functionality. After the site was fully developed, tested and deployed, we worked with the client to train them on how to use the custom theme.
