Austin Symphony Orchestra UX Design
Redesign of the main website and Tessitura
Expertise
Iterative Development, UX Design, UX Research
Client
Austin Symphony Orchestra
Timeline
6 months
Challenge
The Austin Symphony needed a website redesign. As the oldest performing arts group in Austin, this organization had a vision of being at the cutting edge of technology. They wanted to help their patrons accomplish tasks more easily and to successfully attract their audience goers to their wide variety of performances, including masterworks, pops, community concerts, and education programs.
Their old website, built-in Expression Engine, was about 15 years old and was not mobile responsive. We also needed to implement the new styling into Tessitura, the software that handled ticket sales.
Their patron feedback was that their current website is not easy to use. The primary considerations of this project were to improve access to ticket sales and reduce the friction for making donations. In our initial conversations with Austin Symphony, we also uncovered a series of needs related to the primary goals.
How might we create a design that increases ticket sales among both season subscribers and those new to the symphony experience?
Scope
The scope of this project included a full website redesign with the intent of driving up ticket sales, implementing a new look, and making the website mobile responsive.
Constraints
We had a six-month timeline for this project to implement the full UX process and develop a WordPress custom theme; we launched at the end of May 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 by adding an English to Spanish toggle in the primary navigation using PolyLang.
Our Goal
Standard Beagle worked with users to design and develop a website that addressed the pain points we discovered during research.
- Improve user navigation to tickets and donations
- Allow site admins to make easier updates
- Automate event management
- Add visibility into analytics
Our Solution
What we discovered in our initial research before the project kicked off was that ASO already had great insight into their audiences. The site itself was old and inflexible, preventing them from making the updates they needed.
Results
The Austin Symphony Orchestra’s website launched in April 2020 just after COVID-19 shut down Austin and much of the world. Thanks in part to the new flexible design of the website, the Symphony was able to pivot quickly to adjust its offerings and make announcements to the public.
The Symphony team had a streamlined connection between its ticketing platform and its marketing website, and they continued to provide digital programming. And the new website call-to-action for donations was leveraged to ask patrons to help keep the Symphony strong.
This design won a Web Excellence Award in the arts category in 2021.
Awards
2021
Arts
Web Excellence Awards
Our Process
Understand
We started by looking at the current state of the existing website to understand what was working and what was not. This took the form of two key steps.
Google Analytics Analysis
The purpose of this analysis was to get a baseline view of the analytics of austinsymphony.org and my.austinsymphony.org. This baseline will assist us in understanding how users are moving through the sites and where to focus our efforts. Additionally, we were able to identify areas where the analytics can be strengthened and improved.
We felt that the plan for responsive website design will lower the mobile bounce rate to be closer to desktop. Additionally, most users are accessing the site via iPhone, which means the design should implement Apple design rules for mobile design.
Analytics: Key Takeaways
- There was a lack of white space which makes the content feel cramped and hard to read.
- Links and buttons were inconsistent which could confuse users.
- Many different typefaces are used which could also confuse the user.
- Users need uniformed styles to promote clarity and usability. Styles need to be consistent throughout the website.
- Headings are small, so visual hierarchy is not reinforced, this is problematic because the headers currently blend with the body copy.
- Users depend on the hierarchy to guide them through the page and when it is absent, users are unsure of where they need to focus their attention which can create frustration.
- The website is also currently lacking the option to search. Since ASO has a content-rich site, the ability to search could greatly improve user experience.
- The website is large, so having visual cues such as breadcrumbs would help the users denote their location on the site.
The design aesthetic and hierarchy is confusing and should be simplified.”
Explore
User Insights and User Personas
User Personas
User personas are fictional characters who were created based upon the research and the user insights that were gathered from that research. They make up the different users who are using ASO’s website.
User Insights
From the research, it was clear that there were two key users. The season subscriber and the single ticket buyer. These users have different insights which are explained below.
The Season Subscriber
The season subscriber is a loyal fan of the Austin Symphony Orchestra. They attended performances many times throughout the year and are more likely to donate to the organization. They do not spend much time on the website and tend to visit to renew their subscriptions or donate. Since they have used the website before, they are more likely to notice usability faults and tend to be more critical of the website’s overall aesthetic.
The Single Ticket Buyer
The single ticket buyer is not yet a loyal fan of the Austin Symphony Orchestra and may even be new to orchestra altogether. They often spend more time on the website to learn more about the organization. They tend to be less critical of the website as new users often overlook usability issues and are less likely to critique the overall aesthetic. It is important to note that there is an exception to this statement, if the user has a background in technology, those users will notice website flaws.
Season Subscriber
Single Ticket Buyer
Design
Information Architecture
Card Sort
Card sorting is a technique where the UX designer tests website taxonomy. Due to the trend found in the affinity diagram, where the users were frustrated when using the menu, a cart sort was performed to see if there could be a better way to organize the website. It was found that the designer’s card sort closely matched the existing taxonomy, with a few subtle changes.
Being that the sorted taxonomy closely mimicked the existing, the UX Designer, Amanda White, took another look at the user data and found that the majority of the frustrations were based on the aesthetic of the navigation system and were less about the website’s organizational structure. With that said, those subtle structural changes will be implemented in the redesign with client approval.
Sitemap
A sitemap is a hierarchical diagram showing the structure of a website and defines a website’s taxonomy. The new website structure was implemented in the new sitemap. The key changes made in the new website’s structure are listed below.
- Separating Events and Tickets into distinctive categories
- Separating Education and Community into distinctive categories
- Adding the Calendar to the primary navigation
User Flow Diagram
A user flow is a diagram that displays the complete path a user takes when completing a task on a website. Being that ASO’s website is large, there are many flows that a user could embark on while navigating through the site. Therefore, the most important flows were selected and diagrammed. These flows were chosen based on the website’s main goals which were defined during client meetings and confirmed through user research.
Explored User Flows
- Finding a performance flow
- Donate flow
- Plan visit flow
- Learn about education and community engagement flow
Wireframes
Page layouts are first explored by hand using a pencil and paper then the final sketches were digitized using Figma. Our budget was constrained to 10 wireframes.
Wireframes
Validate
Usability Testing
This round of testing had two goals.
- To discover if users preferred using side navigation or top navigation.
- To discover if the current layout is easy to use, understand, and navigate.
Key Takeaways:
User preference of the navigation styles was evenly split
We were surprised to find that the user preference of navigation style was evenly split. Given this finding, we let the client decide which navigation style they preferred.
Users prefer the event page that allowed for a calendar view option
All of the users preferred the event page that allowed for toggling between the different viewing types. They liked the simplicity of having an event list on the same page as the calendar and said it would be easier to search for events without needing to navigate to different pages.
Users liked the slider to break up content.
Users thought having a slider to break up dense content was intuitive. They said it was easy to skim the page to find the information they needed, by using the headers as clues, and liked that they could dig deeper if they wanted to.
Users were not a fan of the fixed side hero image.
Users were not a fan of the fixed hero image on the left-hand side of the page. They thought that it took up too much real estate, the width spanned half of the page. Though, the client really liked this look and was implemented in the design moving forward.
Visual Design
Style Tiles
Two styles were designed which could represent the look and feel for ASO’s new website. For the first style, pops of color would be implemented into the different page elements of the site while the strong typography and buttons will retain the monochromatic feel. The second style would utilize impactful, monochromatic typography – but there would be more control to add pops of color in the UI components, especially the buttons, while still allowing for pops of color within the different page elements.
The client selected the first option, displayed below.
Iconography
Being that many different types of iconography were implemented into the final mocked-up design, we provided an iconography sheet to all the website managers to repeat the iconography throughout the website.
Hi-fidelity Mockups and Interactive Prototype
Five mockups were created from the 10 wireframes, implementing the selected style.
An interactive prototype was created to demonstrate how the scroll effects would respond and was also tested with users to discover any underlying issues that we may have overlooked. The prototype also helped explain functionality to the developers.
Validate
Usability Testing
The purpose of this study was to test the designed solution for ASO and ensure that the interface elements are clear and easy to use. The series of tests measured the website’s interactivity and provided feedback on the interface decisions that were made during the redesign. Based on the testing, we made the following iterations.
Side hero removed on child pages
Being that users prefer to see an image in the side hero, versus just a block of color, I would suggest choosing an image to show for sections that may not have a unique section image. That way, there will be no empty section hero pages with only the color showing.
Added UX Cues
We changed the layout for child pages, to add more room for content, the side hero was removed so the content could make use of the extra space. We also realized that we needed to add space for UX cues, like pagination and breadcrumbs.
Added a default image for the side hero
Users liked the side hero when it had an image and liked it less when it did not have an image. They stated that it was more compelling when there was an image versus just the block of color — so we created the functionality for a default image to be used in the WordPress them if a featured image was not selected.
Create
Development + QA
The development of the ASO website was built with a strong focus on user experience, as well as ease of use for ASO’s staff.
Because the client expressed strong concerns about being able to edit their content with ease, a decision was made to use the Advanced Custom Fields plugin. This solution was found to be ideal for the project because it is not time-consuming to implement, and allows the client to make changes directly to their site’s content without having to design entire pages using the classic WordPress editor. This would also allow the development team to create a uniform aesthetic.
In addition to using Custom Fields for completely custom pages, a custom layout solution was implemented for the client, which would allow them to create sliders, rows, and other common design templates on their single pages – once again adhering to the client’s need to edit content with ease, all while fitting with the aesthetic established in the mockups.
A global notification banner was created for the client using Advanced Custom Fields as well, giving the client the ability to display alerts and notifications across their site by the use of an “on/off” toggle, as well as being able to edit the colors and content within the banner.
The sliders used in the project were implemented using Slick Carousel. Because Slick allows for fully independent, responsive breakpoints, it scales with its container, allows for user swipe to be enabled or disabled, allows for desktop mouse dragging, fully accessible arrow navigation, as well as features such as autoplay, dots, and arrows, Slick was a great choice. We wanted to choose a robust solution because the slider was used throughout the site.
Another key component of ASO’s redesign was responsive design. Because of this, the team spent a lot of time discussing and testing how the best possible experience could be provided to the user on every device. Some solutions implemented were custom breakpoints and removing elements on tablet and mobile – namely hero images that would distract the user from viewing content “below the fold.”
It was very important to the client that they are able to change their site’s color palette based on their season’s colors. Because of this, the team implemented a custom solution using the Advanced Custom Fields color picker options paired with CSS variables. Using custom PHP we were able to create a solution that would allow the client to change their entire site’s color scheme by simply choosing their desired colors in their admin section.
Another primary feature in the site’s redesign was the video on the homepage paired with parallax scrolling. The client found the parallax scrolling to be a feature that they really liked, so customization to the WordPress Genesis theme structure, as well as creative CSS positioning, were required so that all of the individual elements of the site did not clash with one another.
Keeping the client’s need to customize their site in mind, a field was created within the site’s admin section, which would allow them to enter the URL of a hosted video (we used Dropbox because it is user-friendly), and change out the video URL if they ever needed to in the future.
Improving the information architecture on the ASO site was a primary driver when redesigning, and a Mega Menu was chosen as a solution so that users could easily sift through the site’s content – not an easy task in the previous design. This posed a good deal of issues on smaller devices because the menu was so content-rich. As a solution, many custom breakpoints were added so that users had an ideal experience on each device.
Automation of events was another concern that the client voiced when approaching the redesign. Because of this, events on the homepage were displayed by consuming Tessitura’s REST API. This solution was ideal because the client would no longer have to manually enter event information on their pages, but instead, the events would be pulled dynamically from the API, driven entirely by the information entered into Tessitura.
