a usability makeover for a nonprofit's website
In the course of our UX/UI bootcamp, my team and I undertook a challenge to redesign a website for a nonprofit organization. We chose to work with LGBT+ Outdoors, an organization formed to promote participation in outdoor activities for the queer community, a space which many community members have experienced as unwelcoming, hostile, or dangerous. To better understand how to serve our users, we focused on how to improve the site's usability, specifically serving the goal of increasing participation in local chapter activities.
Role: UX/UI Designer
Timeline: 3 weeks
Tools: Figma, FigJam, Visme, StarryAI, Cockatoo
We began our case study by defining the user base we were targeting with a proto persona.
Enter Raine Brown! Raine is a genderqueer individual whose interests and needs would lead them to outdoorsy activities, in search of a need for supportive community.
In order to clarify the needs and pain points of our users, we developed and distributed a survey to 23 participants, and interviewed 5 members of the LGBTQ+ community. Below, a few key insights that we gleaned from our survey data:
>> Out of all of our outdoor activities on offer, our users collectively enjoy hiking, camping, and kayaking most. These activities would make the best targets for featured imagery on the site to inspire engagement.
>> Users clearly prioritized which pieces of information would be most essential to determining which activities they'd like to join. We need to display these details in an immediately accessible location for each activity on the schedule.
>> Harassment has occurred during many of our users' most valued outdoor activities. This aligns with the mission of our organization. These data confirm the value that our organization can bring to its users!
We generated an affinity diagram with observations from our user interviews, yielding a neatly detailed bundle of specific insights. Our main take-home points, however, may be simply summarized.
Our users are seeking…
❖ information that’s organized and easy to find
❖ more humanized elements, like stories & pictures
❖ sensory elements of connection with nature
Finally, we conducted a competitor analysis to identify advantageous strategies from similar organizations.
The website for Brave Trails evoked strong emotions with their person-centered visuals, and inclusion of expressive videos over static images.
Diversify Outdoors similarly played on striking visuals, with a greater emphasis on powerful imagery of nature. That said, the organization of information could at times crowd the main page with an excess of information, when it could be better relegated to a secondary page. We wanted to be particularly conscious of this pitfall, as this was a primary weakness of our organization's site before proposed modifications.
LGBT+ Outdoors was designed to connect members of the community to each other and to nature. We’ve observed that their website isn’t optimized for communicating necessary information and resources. This prevents potential participants from partaking in trips, clinics, and workshops that would allow for safe, queer-positive community building.
How might we improve the LGBT+ Outdoors website so that we draw in members of the queer community and ensure they have a more inclusive and immersive outdoor experience within nature?
Developing our first pass at the website design without an eye on the prototype view caused an oversight of gargantuan proportion: literally! Everything was enlarged relative to the window in which it would be displayed. Keeping an eye on this throughout the design process would save a round of iterative overhaul.