Site Redesign | LGBT+ Outdoors

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:

...
Survey Insight A >>

>> 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.

...
Survey Insight B >>

>> 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.

...
Survey Insight C >>

>> 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.

Problem Statement

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?

Feedback

  • ● Font size too large
  • ● Website is text heavy
  • ● Font style not the most legible (esp. capitalized)
  • ● Unable to navigate using header menu
  • ● Unable to filter for events
  • ● Unable to view events
  • ● Unable to register for events
  • ● Did not know website continues vertically once you scroll
  • ● Visuals are most pleasant
  • ● Real-time photos and videos are incentive to attend an event/donate
  • ● Hero image uses a lot of real estate

Iterative Changes

  • ● Made font size smaller
  • ● Changed font style(s)
  • ● Hid lengthy text
  • ● Made header navigation clickable
  • ● Fixed dead ends
  • ● Fixed filter function
  • ● Created flow for ‘view events’ and ‘register for’ events
  • ● Made hero smaller so content is visible initially
  • ● Added photos and videos from past events
Based on several rounds of user testing, there were several functional features that users wanted to make use of that would need to be introduced. We adjusted the functionality of several elements. Next, we addressed a primary design concern: proportion.

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.