lgbtq+ performing arts website redesign
Redesigning the website for an LGBTQ+ philharmonic performing arts organization
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.
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
how we got there
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
Weekly Meetings with Client
Preliminary Research
Information Architecture
Usability Testing
Prototyping
Previous Design
Final Designs
The team worked together to reimagine the homepage, events flow, and donation flow in sketches and wireframes. We combined our best ideas into final designs. I then translated these into high fidelity mockups.
UI kit with new branding and accessibility in mind
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
To emphasize community focus
Added imagery to reflect diversity, inclusion, and commitment to LGBTQ visibility
I chose imagery showcasing playful images of the diverse instruments, music group types, and members.
Added 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.
To Increase Event Attendance
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.
Improved event details hierarchy
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.
To Increase Donations
Added Donate CTA button to page header
Emphasized 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.
