Encore Vocal Ensemble
Revamping a San Diego’s premier choral group's website to increase audience accessibility.
Role
UI/UX Designer
Timeline
Jan - Jun 2024 (5 months)
Team
5 Designers
Skills
UI/UX Design, UX Research, Design Systems
Background
Fostering an inclusive space for performers
Encore Vocal Ensemble is San Diego’s premier choral group specializing in songs from musical theatre, Broadway, and film. Composed of more than 50 singers, dancers, and actors, Encore cultivates mainstage and community performances that demonstrate their willingness to develop musicianship and give back to the community. Encore is committed to fostering a dynamic, supportive environment where diversity and personal growth are nurtured and recognized.
THE PROBLEM
A need for a more accessible website
Encore’s current website encompasses services that audience members and members of the choral group can use. Show attendees and Encore members are experiencing an overwhelming amount of information presented in a non-accessible and unorganized way, complicating what should be simple user interactions with the website. This leads us to ask:
How might we create a seamless experience that enhances visual accessibility and ensures clear and easy retrieval of information for all of Encore Vocal Ensemble's diverse users?
OUR GOALS
What we set out to do
My team took user needs and our client's wishes into consideration to form our project objectives:
Enhance Visual Accessibility: Redesign focused on ADA website compliance to improve visual accessibility
Upgrade Usability: Reconstruct the ticketing process and flow for users to easily purchase show tickets
More Representation: Showcase and improve representation of the ensemble’s diverse members
Redesign Implementation: Execute proposed design solutions and improvements into Wix website
PRELIMINARY RESEARCH
Encore's current website
We first conducted a screen-by-screen UX audit of the current website to establish a strong understanding of the different parts of the site and identify potential pain points and areas of improvement.
Other chorus websites
We also wanted to research successful websites that may be useful to reference for our redesign. Using websites that Encore recommended, we assessed what elements of their design were successful and why.
The main strengths we noticed were:
Practical color palette and font choice for strong readability and compelling visuals
Intuitive user flow for smooth ticket purchasing
Helpful display of current show information and easy access to sponsorship, volunteering, and donation
Simple navigation bar for seamless website interaction
USER RESEARCH
Getting to know the users
We created a survey to begin understanding the current demographics and scope of our reach, sending it out to students, members of Encore Vocal Ensemble, as well as show attendees. We asked specific questions about how people find out about shows and what their main goals are using the website.
Additionally, we conducted user interviews where participants completed tasks on the website to identify usability issues. These participants were a mix of board and organization members and friends of members that were surveyed.
Key insights
Visual Drawbacks
Font size is challenging to read
Lack of clear, readable fonts
Navigation Issues
Lack of accessibility to important information
Unclear navigation prompts and information placement
problems to solve
The focus of our redesign
Combining all of the insight that we gained from our research, along with feedback from our client, we came up with the main problems that we wanted to tackle in our redesign:
❌ Problem 1: Lack of Visual Accessibility
The current website lacks accessible visual design, especially for users of different demographics. Specifically, the color palette offers little color contrast, and the cursive typography and small font size and causes poor readability for users.
White and red text contrasts poorly with the darker, black backgrounds
Font sizes are too small to comfortably read, especially with low contrast
❌ Problem 2: Poor Visibility and Organization of Information
There is poor visibility and organization of information, causing information overload, complicating basic interactions, and preventing certain actions such as finding ways to support, scrolling through pages of content, and booking Encore or buying tickets.
Audition information is excessive and cluttered
Ways to support are displayed in a carousel with no indication of being a carousel
❌ Problem 3: Lack of Transparency in Representation
The organization faces a significant challenge in showcasing and accurately representing the diversity of its ensemble members. Despite having a diverse group, the public perception remained limited and skewed.
Nine members featured with their profile pictures
Only three members featured with comprehensive profiles
PROTOTYPING
Piecing the design together
Following our user research and analysis, we began to brainstorm design solutions through mid-fidelity prototyping. These are some of the screens we designed, as well as what changes were implemented.
Homepage
Visual Enhancements: Improved accessibility with a lighter theme, increased font size and refined spacing
Resolved Carousel Issues: Clear navigation arrows for easier browsing and enlarged carousel for improved visibility
Organizing Additional Content: Added more content and links through two carousels, with one carousel focused on purchasing tickets, and current events/shows, while the other specialized in providing ways to get involved
About Us
Improved Information Accessibility: Simplified text content and layout to make sure key information such as “Mission” stands out
Increased Clarity: Closed gaps between sections of page to make it clear for users that you can keep scrolling to see more information
Reduced Clutter: Clickable bio previews rather than displaying the entire bio displayed so that users are not overwhelmed with large paragraphs
Auditions
Visual Enhancements: Straightforward layout with readable text
Reduced Clutter: Dropdowns to expand more on each category of information
Improved Flow: Button that leads directly to auditions application
Book Encore
Reduced Scrolling: Moved booking text boxes to the top of the page for easier booking
Visual Accessibility: Black text on white background, increased font size, reduced text
Elevated Branding: Catchier phrases to reflect Encore’s brand and professionalism
USABILITY TESTING
Receiving more input
To gain feedback on our mid-fi prototypes, we conducted usability testing. Participants included organization members, as well as students in the field of UX design, providing insights from both designers and users of the site.
Key insights
Ease of Use Ratings
Buying Tickets: Users consistently rated the ease of buying tickets highly
Making Donations: Generally rated high but some confusion exists regarding navigation
Booking Encore for Events: Slightly lower ratings, indicating room for improvement in clarity
First Impressions and Visual Design
Positive Feedback:
Clean layout, easy readability, and simplicity of navigation
Prominent “Buy Tickets” button
Negative Feedback:
Site looked incomplete or plain; need for more cohesive font choices and consistent spacing
Need for more coordinated color scheme; red and black color combinations were harsh
Design system
Accessible yet on brand
To maintain consistency, we created a design system that included simple, readable fonts, along with a color palette that embodied Encore's branding but focused more on pops of red and less on majorly using dark colors.
FINAL DESIGN
A hub for San Diego's premier choral group, Encore Vocal Ensemble
Homepage
Become familiar with Encore Vocal Ensemble and seamlessly navigate to more areas of information!
About Us + Our Gallery
Find out more about the individuals behind Encore and take a trip down memory lane to look at previous shows.
Book Us
Easily book Encore to perform for local events by submitting a simple form.
REFLECTION
What I learned
Finding value in user research
This project consisted of a lot of research in which we gained feedback from many users. I learned about how important it is to be able to effectively synthesis research into key points. Because of the large amount of user research we had, it was important to work together as a team to be proactive in utilizing it to find value and not feel overwhelmed by it.
Fueling my passion
I found this project very meaningful to work on because it allowed me to connect to a community of people that I otherwise would have not been able to. I also enjoyed learning more about Encore through communicating with our client. The warm interactions that I had with other people motivated me to design to the best of my capabilities.