Case Study
LGBTQIA+ Community Center Website Redesign

My role: User interview and stakeholder interviews, user persona, user journey development, style guide, wireframes, and clickable prototype.

Tools: Figma, Zoom, Google Suite, Photoshop

Stonewall’s mission is dynamic and wide ranging but has a website that is static and clunky to use. Their current design makes it hard for users to engage with the organization and does not highlight and uplift resources in the ways they would like. An improved design with a more streamlined navigation system, clean aesthetics and a greater showcase of the organization’s people and their mission will better equip Stonewall to accomplish their goals in coming years.

Essential Project Question

How might we improve event attendance and donation rates for Stonewall Columbus through improved information architecture and aesthetic website interventions?

The Problem

Site visitors find the interface overwhelming, unclear, and text-heavy, inhibiting their ability to take action with or for the organization.

Stonewall Columbus website users think the navigation is challenging to use, leading to frustration and fall-through when attempting to engage with the site.

New users visiting the Stonewall Columbus website struggle to quickly and easily engage with the organization through their current interface.

User Interview key Findings

75% of donations to nonprofits come in cash form, creating opportunity for nonprofit websites to generate funds
Clarity and organization are essential to building trust in a website
A clear demonstration of an organization’s impact increases likelihood for volunteer engagement
A personal connection to a cause helps with volunteer recidivism

User Testing Results

The current site is inconsistent and hard to navigate
Users are confused by content organization and often got lost
Inconsistent style (ie: Buttons were all different shapes, colors, and sizes) makes it unclear where paths lead
Site had broken links and a non-functional search bar

User Persona

Mika Keller, 37
Account Manager

Mika is a community-oriented extrovert from Columbus, Ohio. He feels connected and supported through various queer groups around the city, like sports leagues and emotional support groups. He values his personal connections and wants to find an organization to connect with that aligns with his needs and values, while meeting new people, supporting others, and getting exercise/staying active.

“The people I’ve met and made friends with have kept me coming back to the same nonprofit time after time.”

Need/Desires

Find an organization to volunteer with where he feels like he’s having a real impact and connecting with people in his community
Feel mutually supported by this organization

Pain points

Finding organizations whose actions align with their mission and are transparent about funding and leadership agendas

Strengths, Weaknesses, Opportunities, and Threats

	Strengths Existing, active community/audience Good amount of events, support groups, and resources	Weaknesses Text-heavy, visually inconsistent website makes engagement a challenge No search and repeating menu items make for poor navigation Confusing donation CTAs
Opportunities Increase event attendance Increase # of annual donations Increase volunteer recidivism rates	Opportunity-Strength (OS) Strategies Engage donors with simple CTAs and forms, inviting interface Make volunteering appealing by sharing real stories and insights	Opportunity-Weakness (OW) Strategies Demonstrate the impact of volunteers and donors
Threats Donations decreased during covid Catering to entire community means lots of opportunities and content	Threat-Strength (TS) Strategies Leverage existing community?	Threat-Weakness (TW) Strategies Fix search function, move to top Streamline donation-relation interface, fix broken links

I Like, I Wish, What If?

After analyzing other site’s features and ideating on our own, we settled on the following design wish list for the Stonewall Columbus website:

Straightforward menu navigation
Bright, Inspiring Imagery
Prioritize typography from the queer community
Lively, consistent Color Scheme
Updated button styling
Personal, Local Content & Tone

User Scenario

User Journey

Site Map

Updated naming conventions
Consolidated Secondary and Tertiary topics
Changed menu interactions from mouse-over to clicks

User Flows

Task 1: Find Speaker Series Information

You belong to an organization who is looking to support your LGBTQIA + employees by having a guest speaker series. You’ve heard that Stonewall Columbus offers this, so you come to their website to see if you can do this online. Go to this site and sign up for a guest speaker.

Task 2: Find Your Connection

You are new to Columbus and have heard great things about the center. You think you might want to become a member, but you want to see what they have to offer first. You’re into writing, dance, and just general socializing. Go to their site and find something to do that interests you.

Styling

Primary Colors

#43006C

#BBF3FF

#001A77

#FF8A1E

#FFC700

Gradients

#228B22

#87CEEB

Typography

Font: Clear Sans by Dan Rhatigan, Robin Nicholas, and George Ryan

Paragraph: Kind-hearted, fabulous queers embrace their fluid, diverse sexualities with zest

Bold: Kind-hearted, fabulous queers embrace their fluid, diverse sexualities with zest

Card, header, and footer styles

Lo- to Mid-fi Prototypes

Final Hi-fi Prototypes

Next Steps

Incorporate Stonewall’s Style Guide
Increase micro-interactions to make the site more dynamic
Include a video site header showcasing the Pride Parade and work they do
Make Programs & Events pages more robust

Case StudyLGBTQIA+ Community Center Website Redesign