Reaching the LGBTQ+ Community and Their Families
My Role
Lead UX Designer
User Research
Information Architecture
Visual Design
Nonprofit Client Work
As a way to give to an organization that has personal importance to me, I worked to improve PFLAGseattle.org. I worked closely with PFLAG board members on the project. And, I brought on another designer to make up our UX team of two.
Client
PFLAG Seattle is a nonprofit organization that provides a place for the LGBTQ+ community, their families, and allies to connect through support meetings.
Guiding Questions
How do we ensure PFLAGseattle.org serves all the information its users need?
How can we improve Support Meeting attendance?
Project Summary
More accessiblity through information architecture and visual design, fueled by research
I was the lead UX designer. I began the project by myself, starting with formative research. I conducted interviews with board members, families, and community members. I wrote a survey aimed at PFLAG Seattle members.
Midway through the project, I recruited another team member, Julie. Together, we created a usability test based on the current website, studied the analytics, and built a card sort study.
With the project spanning a few months, we were able to rework the information architecture of the site to make all the information easy to access. We visually redesigned the entire website, focusing on the homepage and content pages.
Deb Dahrling - President, PFLAG Seattle Chapter
The Current Website
Information is hard to find
The PFLAG Seattle board reached out to explore a website redesign. They knew that parts of the site were difficult to navigate and information was hard to find. The mobile web experience was not so great either.
Support meeting attendance is down
In early interviews, Board members told me that one of their biggest concerns for the organization was that support meeting attendance was way down over the last couple of years.
Design Proposals
User Research and Testing
Testing for understanding
After testing 5 users on the current website we asked:
How would you rate your understanding of what PFLAG offers?
“It’s never clear whether queer people are actually wanted there… It made me feel like this organization is only for friends/family. There’s nothing wrong with that; I’m just very unclear on whether it makes sense for me to be a part of this at all.”
- LGBTQ Community Member
Landing Page
Who We Serve
Clearing up any confusion
The first section after the hero image is Who We Serve. It gives a clear summary of what PFLAG Seattle does and who it’s for. We created three focused categories of people that will likely be visiting the site: LGBTQ, Families, and Allies. Each of these sections has the most pertinent links associated with that group.
Redesigned landing page
Redesigned landing page
Support Meetings
Users need this information most
The most important information the website serves is monthly support meeting times and places.
The next section down the page is Support Meetings. It gives visitors all the info they need to find the next meeting time.
PFLAG Seattle serves Capitol Hill, North Seattle, and Renton.
There is more information served on the new homepage, giving a clear overview of what the organization does. It’s in distinct sections to be easily scanned and digested by the visitor.
Redesigned landing page overview
Content Pages
“There’s lots of text to read through. It’s difficult to scan for information relevant to me”
“If you actually read the text, there’s a bunch of great information in there”
- Usability Tester
Redesigned Content Pages
Digestible information through visual hierarchy
I designed two content page templates. One page features information in easy to scan chunks, highlighted by images. The other page is for text-heavy content that is often needed on a website like this.
Information Architecture
User Testing
Usability of the current website
We gave users several tasks on the current website to see how they go about finding specific pieces of information.
User tester navigating to find an information page
How easy was it to navigate the current website?
Current Main Navigation
We took a thorough inventory of everything on the current website to ensure everything is moved forward in the redesign.
About Us
Contact
Support
Volunteer
Resources
Give
Redesigned Main Navigation
The main navigation items are clearly labeled while being conversational and inviting action.
Get Support
Who We Are
How To Help
Ways To Give
Support Meetings
Sitemap
Reorganizing information with the user in mind
Based on our testing, I designed a new sitemap. By giving website visitors common tasks we were able to observe their mental models around informational websites like PFLAG Seattle. Clear patterns emerged, giving us a guide for how best to group packets of information on the site.
Tree Test
Validating information architecture
To make sure the new sitemap was the most efficient way to help visitors find the information they need, I conducted a tree test.
After completing most of the same tasks as before, we asked users, How easy was it to navigate the website? The average rating improved from 3 to 5.5. That’s an improvement. But, based on these results, we’ll iterate on the IA a little bit before launch.
How easy was it to navigate the new menus?
Support Meeting Button
The most important feature, the most accessible
An important part of the main navigation is the big Support Meeting button. One of the successful elements of the current website is easy access to meeting time information. You can find it in the right column on every page across the site. In order to keep the meeting times handy on every page, the orange button opens a modal with that information.
Bigger Findings
Beyond the Website
Who needs help changes over time
I repeatedly asked people why they thought support meeting attendance was down over the last couple of years.
The easy answer is: We live in Seattle in 2019. Maybe families don’t need help like they used to.
After talking with over a dozen members of the LGBTQ community, one significant finding kept cropping up. It’s not that families don’t need help anymore. It’s more about the difficult to reach families.
Kevin Toovey PFLAG Seattle Board Member
Understanding who needs PFLAG
On the other end of the spectrum, you have accepting families that are ashamed to ask for support.
On one side, you have very conservative or religious families that have no way of knowing about PFLAG support meetings.
User Stories
Asking for help isn't always straightforward
A mom of a trans teen told me that she was totally accepting of her child. But, that it was still tough for her and the family to adjust. She had questions like; Is this a phase? Is it ok to be sad? Is my child a suicide risk? She knew of PFLAG, but had never considered seeking help because she didn’t want people thinking she didn’t love her kid.
How do we support the difficult to reach families?
Social Media Plan
Volunteers have little experience with social media
One of the big hurdles for the organization is that they are volunteers, having little experience with social media. They are overwhelmed by creating assets for Instagram and Facebook.
Using the new style guide, I created templates for common social posts like meeting times, special announcements, quotes, and headlines.
This way, PFLAG Seattle can be active where the community is already active. By being visible, they will be able to reach some of the difficult to reach families.
Engaging with the community
“It's good to model accepting families, advise those who are unsure about supporting relatives, and offer family-like support to people whose relatives have rejected them.”
- Survey Respondent
Final Thoughts
Sure, the visual design looks nicer than before. But, this project is really about serving information to the community in a way that’s accessible, engaging, and understandable.