Background
Fostering an inclusive space for performers
Encore Vocal Ensemble, a nonprofit organization, 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, encorevocalensemble.org, is a hub of various services that both audience members and members of the choral group can utilize. 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.
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: Conduct website critique and redesign focused on ADA website compliance to improve visual accessibility for all users
Upgrade Usability/User Experience: 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 began our research process by first conducting a screen-by-screen UX audit of the current website in order to establish a strong understanding of the different parts of the site and identify potential pain points and areas of improvement. By thoroughly examining the site’s design, navigation, and usability, we were able to brainstorm initial ideas for recommendations we could provide to create a more accessible and seamless user experience.
Click
here to view the full website audit
Other chorus websites
We also wanted to research successful websites that may be useful to reference for our redesign. Using websites that Encore Vocal Ensemble recommended, we assessed what elements of their design were successful and why.
Click
here to view the full competitive analysis
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 began with insightful questions about how people commonly interact with the current website. By asking specific questions about how people find out about shows and what their main goals are using the website, we gained insights into the main goals we should focus on for the redesign.
Additionally, we conducted user interviews where participants completed tasks on the website to identify usability issues and gather feedback. These participants were a mix of board and organization members and friends of members that were surveyed.
Key insights
USER Personas
Putting it all together
Our team created 3 user personas to outline what kind of users might interact with the Encore website as well as what their specific goals and needs when using the site. To ensure our design solutions help achieve these goals and needs, we identified possible frustrations they might encounter with the website.
.png)
Active Member at Encore Vocal Ensemble
Board Member at Encore Vocal Ensemble
.jpg)
General Attendee of Encore Vocal Ensemble
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 poorly contrasts 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.
.png)
Audition information is excessive and cluttered
.png)
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 were featured with their profile pictures
Only three members were featured with comprehensive profile
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 for users
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
.png)
Book Encore
Reduced scrolling: Moved booking text boxes to the top of the page for easier booking
Improved visual accessibility: Black text on white background, increased font size, reduced text
Elevated branding: Incorporated catchier phrases to reflect Encore’s brand & 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
Design system
Acessible yet on brand
To maintain consistency throughout the website, we created a design system that included simple fonts that would be readable for users, along with a color palette that leaned into 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
Next steps!
Finish implementing designs onto Wix, Encore’s website builder
Measure success metrics of improved website by keeping track of through ease of ticket purchase and number of bookings
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 of how it allowed me to connect on a community of people that I otherwise would have not been able to. I enjoyed learning more about Encore through communicating with our client. It was a pleasure to use my passion for design to create a product that would make an impact on both members of Encore and audience members.
.png)
.png)
.png)
