lgbtq+ performing arts website redesign
My Role
UX/UI Designer
Team
UX/UI Designer (1), UX Designer (1), UX Researcher (1), Information Architect (1)
Timeline
Mar 2024 - Jul 2024
Project Type
Volunteer
Rainbow City Performing Arts is a Seattle based LGBTQ community focused nonprofit that allows community members to join music groups, rent instruments, perform music together, or attend events.
I worked as part of a graduate student volunteer team to redesign their website to better represent their organization’s values and provide a more streamlined experience to connect with their offerings.
What I did:
Created ideation sketches and low fidelity mockups for concept testing
Created UI kit
Created high fidelity prototype for usability testing
Created stakeholder presentation and final handoff documents
Previous Design
Final Designs
UI kit with new branding and accessibility
We received an updated brand guide to incorporate into our designs. I used this to create a UI guideline to ensure readability and WCAG contrast standards.
Redesigned Navigation Bar
Improved visual hierarchy incorporating with mega-menus
Improved information architecture reducing 9 main categories to 5
visually communicating community
more photos!
I chose imagery showcasing playful images of the diverse instruments, music group types, and members.
CTA buttons upfront
I placed call to action buttons at the top of pages so users can immediately see how they can interact with the organization.
New unique ensemble cards
Users were not always knowledgeable of all ensemble types. They also found that the ensemble list did not effectively distinguish the ensembles or communicate how they could get involved.
I created a card view organized by category of ensemble along with ensemble specific branding. These clearly represent each unique ensemble and the diversity in the organization.
event finding experience
New card view + calendar view
Multiple users expected a calendar of events on the Events page so we created a default calendar and card view.
I designed event cards using rebrand style to highlight respective performing groups.
event details and ticket finding
Users had trouble figuring out how to acquire tickets and pinpointing the pricing of events.
I created clear visual and informational hierarchy and a button for tickets at the top of the event details.
donor experience
easy to find donate button up top
more about donation impact
Users found it unclear how their potential donations would impact the organization.
I added the organization's core values with relevant images of the organization's groups and events.
final results
We presented our final designs at an organization board meeting (they were excited to see their site's fresh new face).
In the handoff, and included our design specifications, research documents, and detailed guidelines and prioritization recommendations to help them incrementally implement the changes over time since the organization runs mostly on volunteer support.
some rad reviews
"I was a band kid growing up and I want to join this organization! It looks so fun! " - Potential User
"I love how you applied the new branding elements!" - Rainbow City Executive Director
challenges and lessons learned
design documentation
I learned to create very clear documentation to set the implementers up for success. It was a challenge since our designs had a limited scope for the breadth of their entire website, so I had to create a framework based on what we had for them to scale to their greater site.
if we had more time…
Mobile experience - our design scope was on desktop web use, however we found that many users accessed the website from mobile, therefore there would be great value optimizing the designs for mobile.
Donation experience - the organization was in the process of changing the process of their donation program and the donation flow could be improved further after these details are set.
