Redesign of the main website and Tessitura — Austin Symphony Orchestra | Standard Beagle
Design 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 more 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.
Solution
Standard Beagle worked with users to design and developer 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
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 four-month timeline for this project to implement the full UX process and develop a WordPress custom theme; we launched at the end of March 2020.
Team
Cindy Brummer | Project Manager
Sally Tanner | Content Manager
Amanda White | UX Designer & QA Tester
Seth Jones, Andy Brummer | Development Team
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.
The Process
Discovery and Research
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.
Heuristic Evaluation
A heuristic evaluation is a usability inspection method that helps identify the current strengths and weaknesses of a current website by evaluating the interface. For the redesign of ASO, the evaluation was performed during the research phase of the design to identify the overall usability of the current website. We used the checklist created by Jakob Nielsen to find existing website issues and the overall realization was that the website is in dire need of a redesign. The evaluation was performed by UX Designer, Amanda White.
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, being that ASO has a content-rich site, the ability to search could greatly improve user experience.
- Being that the website is large, 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.”
Content Inventory
A content inventory is a list of all the content on a website. Completing a content inventory provides an opportunity to assess each piece of content and allows for content to be evaluated. With over 150 pages on the website, it was important to be familiar with the way information was currently displayed. It also provides an opportunity for the designer to note design flaws and make design recommendations. We wrote a report to highlight our findings, but some key takeaways are listed below.
Key Takeaways
- The site is not responsive, has a small width compared to current design patterns, and feels a bit congested.
- Event and subscription pages have two call-to-action buttons of the same pattern, which could be confusing for the user.
- The events to buying ticket flow are cumbersome, with a lot of steps to achieve the end goal. For one, there are two event pages that are structured differently, causing unnecessary friction to the user. There is also an extra repetitive page displaying the event details with given dates — which could be removed from the flow.
- Call to action buttons differs from page to page, causing the user to relearn the button’s purpose.
- There is no shopping cart icon on the top right-hand corner. Being that it is customary for users to see a shopping cart when they are adding items to the cart, this may cause unnecessary confusion and contribute to cart abandonment.
- Website sections use tertiary navigation which could be confusing for users as the placement is not a modern best practice.
It’s a pretty narrow design in terms of the website layout. A lot of wasted real-estate.”
Usability Testing
The experience feels cluttered and dated.”
Usability testing is used to understand the user’s needs through various qualitative and quantitative methods and inform the process of solving the user’s problems. User research validates designer assumptions that were formed when performing the heuristic evaluation and the content inventory.
For this project, user testing was performed using usertesting.com and through a style of qualitative testing called Guerilla Testing.
The symphony is such a harmonious, seamless experience that it deserves a digital reputation to match.”
System Usability Scale (SUS) Survey
The website’s main issue for me is that it doesn’t embrace existing patterns and standards of most well designed digital experiences.”
A SUS survey was shared with ASO’s current patrons and provided a unique understanding of the two different types of users, Single Ticket Purchasers, and Season Ticket Subscribers, rate the current website’s usability. An interesting finding was that the two different users rate the site’s overall usability differently and provided us with unique user insights. These user insights were turned into user personas which will be discussed below.
Having the navigation on the right side of the page is unexpected and confusing.”
Affinity Diagram
The affinity diagram is a method used to organize ideas and data. For this project, the affinity diagram was used to discover data trends from user testing and research. The affinity diagram grouped together useful data that confirmed many of the assumptions made by the UX designer earlier in the design process.
Key Takeaways
- The site feels too condensed
- The site needs more visuals
- The site needs a more clear call to action, distinct sections, and
larger headers - Structural frustrations with the menus
- Users longed for a different look and feel
- Too many bugs
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. Being that 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.
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 explored by the UX Designer, Amanda White, 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 limited to 10 wireframes.
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 above.
Iconography Reference Sheet
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-fi Mockups
5 mockups were created from the 10 wireframes, implementing the selected style.
Interactive Prototype
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 underlooked. The prototype also helped explain functionality to the developers.
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.
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.
Originally published at https://standardbeagle.com.
