Build Up: TransFamily Support Services

Creating a friendly and accessible website redesign in order to transform the online identity of TransFamily Support Services and bring together trans/nonbinary communities.

PROTOTYPE UNDER CONSTRUCTION
transfamilythumbnail.png

role:
project type:
duration:
deliverables:

ux design, ux research, project management
team (5 others & me), internship / nonprofit work
10 weeks (jul. 2022 - sep. 2022)
high-fidelity prototype, pitch presentation, case study page

OVERVIEW

Who is TransFamily Support Services?

TransFamily Support Services is a community non-profit organization based in San Diego, California. Their mission is to provide comprehensive support and guidance to trans/nonbinary youth and their loved ones so they feel understood and personally catered towards while navigating their identity journey.

This project was created as a part of Design Co's Build Up initiative, in which student teams work with nonprofits that support LGBTQ+ individuals, immigrants and refugees, and women.

TransFamily Support Services NEW Logo (5).png

THE GOALS

Discover, redesign, maintain

My team's main deliverable is a website redesign and rebrand. Together, we split this into three main objectives, based on preliminary research (see below) and our stakeholder's wishes:

  1. Improve the discoverability and accessibility of their resources and services.

  2.  Redesign their flagship pages for improved user engagement.

  3. Maintain a consistent, personable brand throughout the website.

 

PRELIMINARY RESEARCH

A closer look: the site and the audience

With our preliminary research, we had two goals in mind: taking a closer look at the existing site and other similar sites as well as understanding the audience and their pain points. Here is how we addressed each:

Optional: skip to key insights.

— 01: Getting to know the site

We approached this by creating a site map of the current site, doing a competitive analysis of similar organizations’ websites, and conducting a web audit based on Nielsen Norman Group’s 10 usability heuristics to look for possible areas with pain points.

Current site map

As a team, we wanted to understand the information architecture of the existing website first before we began researching and exploring solutions. As such, we created a site map of the existing site’s navigation.

Web audit

From our web audit, we found that the site relies heavily on its navigation bar, which is disorganized and complex for a new visitor. Streamlining the user flow and simplifying how content is displayed, we thought, could be an avenue for future improvements.

Additionally, I went through some of the main pages on the site and annotated them for strengths and weaknesses, and went through each page to identify their purpose and intended user group.

Web audit based on Nielsen Norman Group's 10 usability heuristics.

I annotated the current site for any features that could potentially cause issues.

I went through each page on the site and listed out their purpose and intended user group.

Competitive analysis

With our competitive analysis, we looked for features that other competitors’ websites had in common with the TFSS website as well as aspects of their sites that we could draw inspiration from.

 

— 02: Understanding the audience & their pain points

We met this goal by discussing with our stakeholders, distributing a user survey and conducting usability tests on the existing site, followed by affinity mapping and qualitatively analyzing the data.

From the stakeholder

In our first and subsequent meetings with the founder of TransFamily Support Services, we learned that a common theme among those the organization serves is that they all say:

"I wish I had found you sooner."
 

This revealed to us that the discoverability and accessibility of the organization’s resources are of critical importance to members and thus enabled us to act in the right direction for the redesign. We also learned that the website, although visitable by any age group, was mostly seen by adults (especially parents of trans/nonbinary youth). This affected the direction and style we took the website later. From there, we brainstormed user personas to inform our solutions more accurately.

Survey & affinity mapping

To understand the results of the survey more thoroughly, I qualitatively analyzed the data by sorting them into likes, dislikes/pain points, general trends, and first impressions. To gather the most valuable insights from these tests, I also affinity mapped the data by the particular navigation flow they addressed and identified the key points for each of the flows.

Left: Qualitative analysis of likes, dislikes & pain points, trends, and suggestions as sorted in our spreadsheet.
Right: Affinity map with key points for each page/flow.

User personas

We translated the experiences of our survey respondents into personas, brainstorming various user groups that might be involved with TFSS first as user persona spaces then as actual potential users:

Parent of a transgender child lost on how to support their kid.

Transgender teen seeking LGBTQ+ community to talk to.

Key insights

Generally, our user research paired with audits of the site and similar competitors revealed:

AND SO WE ASK...

How might we create a more accessible online identity for TransFamily Support Services in order to increase discoverability and provide more support for transgender and nonbinary individuals and their loved ones?

 

IDEATION

Searching for a solution

The pain points narrowed down into 5 major categories: organization, overwhelming information, visual appeal, user flow/navigation, and overall content. I began brainstorming solutions by creating a mind map to explore what features a redesigned website might have to be able to address the pain points. I also initiated a session of Crazy 8s with my team to see the divergence of our ideas and then converge on ideas we felt like had potential.

Click images to expand for detail.

INFORMATION ARCHITECTURE

The revised site map

As mentioned earlier, one glaring problem of the site was its disorganized and complex navigation bar. After consolidation with our stakeholders, we decided to scrap their current navigation system altogether in favor of one that is slightly more intuitively organized, although heavy on the resources tab.

Click image to expand for detail.

WIREFRAMES & LO-FI

From sketches to pixels

Going into wireframing, my team wanted to keep in mind 3 main aspects:

  1. Condense information to be concise and more clear.

  2. The navigation and location for pages should be intuitive — users should not get lost in the navbar.

  3. Explore more visually capturing layouts that appeal to the target audience.

For example, here is the transition from a sketch (courtesy of the other designer) to a low/mid-fi screen (my work):

homesketch.png
Grace - Landing page.png

VISUALS & BRANDING

What's the vibe?

Based on our branding ideation session with our stakeholders, Aspen (Director of operations) and Kathie (Founder), we were able to cultivate a better understanding of the Trans Family Support Services’ brand. Given that the nonprofit’s main audience consists of families of trans individuals, it called for a more mature and inviting tone for design. Thus, I chose to use organic shapes such as waves and a rounder typeface.

More than half of users in initial usability tests also stated that their impression of the original landing page was “barren”, “bland”, and had “too much white space”. This led me to utilizing pastel colors in the palette and softer gradients of those colors to help emphasize a more visually engaging impression,
keeping in mind WCAG guidelines.

moodboard.png

For our moodboard, our team set aside an hour to compile any images we found that reminded us of TFSS or felt appropriate for our vision of TFSS’s brand.

color palette.png
text styles.png

I tried out 4 different fonts before settling on Avalon for its rounded and friendly appearance.

Final color palette selection, gradient style and overall branding materials. I took into consideration the colors already used on the site so that the handoff would be more efficient.

HIGH-FIDELITY PROTOTYPE

Unveiling the redesign...

screens.png

Fully functional prototype coming soon!

Interact to see before/after comparisons of key screens!

If embed does not load, click here to view on Figma.

Unclear at first glance who TFSS is and where to go next.

Clear personality and mission statement, CTA button for user flow and clear navbar.

— Some highlighted changes

Clearer main purpose via hero section

We incorporated a standardized header to better inform users about TFSS and what they do as a nonprofit. Most interviewees struggled to find the about page and “mostly agreed” that the original navigation and purpose of the about page was “difficult to find”. To reduce difficulty in learning about the nonprofit, we decided to present the content as a mission statement in the hero header.

Before

Screen Shot 2022-11-04 at 6.08.21 AM.png

After

Landing page.png

Intuitive navigation example: testimonials

There was expressed concern from users wanting to “know more about people’s experiences” hence the addition of the “What families/people say about us” testimonials section on the landing page. By incorporating more individualized content, we were able to build a more user-friendly website and bring forth a better sense of community that was hidden within the original website.

Before

Only discoverable by directly clicking on "Who We Are" tab, which users found negatively surprising.

After

Testimonials directly on home page (increases discoverability), with carousel layout to condense quotes into key information.

Information organization example: FAQ

Many users during the usability tests for the original site expressed upon first impression that the site felt hard to understand, especially because of how info was laid out and accessibility issues with readability choices. In the redesign, I got rid of unnecessary toggles in the FAQ and condensed the info into 3 key dropdowns, with a CTA button that caters towards the main user group, parents of trans individuals, and lets users submit any other questions they have.

Before

faq.png

Unnecessary toggles, small font, lack of clear direction for engagement with page.

After

FAQ ver 2.png

4 clear sections each addressing unique questions, easy to parse through at a glance.

"Mad libs" user guide

A critical point and goal from our stakeholders was to help facilitate a better way to get resources as accessible and easy for families, medical professionals, trans youth/individuals, etc. We incorporated a mad libs section that allows the user to select their identity and select what they are interested in. This tool was taken inspiration from another nonprofit in the competitive analysis and essentially utilizes a toggle down button followed with references to specific links containing resources.

madlibs.gif
 

LOOKING BACK

How we addressed our goals

  1. Improve the discoverability of their resources: With our more intuitive information architecture and navigation flow, approachable ‘mad libs’ fill-in section, and clearer content, users can now access important info and resources more easily.

  2. Redesign their flagship pages for improved user engagement: Content has become less overwhelming in style and amount, and call-to-action elements like buttons are much clearer; these invite the user to explore the pages more.

  3. Maintain a consistent, personable brand throughout the website: By creating and adhering to a design system that represents the brand of the organization, the website now features a more coherent visual identity that creates a unique impression on viewers.

REFLECTION

What I learned

  1. Design is a bumpy road. The process of creating beautiful experiences is anything but beautiful. Embrace the chaos and try jumping at every opportunity to improve.

  2. Community is key, whether it be with stakeholders or other group members, communication and trust with every step of the way led to efficient and effective progress.

  3. Learning to work with the deadline constraint is crucial: Setting dates for when we wanted to have deliverables finished held group members accountable and ensured we progressed (even if it was all mostly done the night before).

  4. Get feedback. Our end product was greatly improved thanks to feedback from our mentors, our TFSS point of contact, and other Build Up teams.

 

LOOKING FORWARD

Next steps

In the future, possible ways my team and I can envision expanding on this project include:
 

  1. Conduct more usability testing on final prototypes. So far, we only have 3 usability tests, so we'd like to conduct more to see significant trends and possible room for improvement.

  2. A/B testing for major pages. I wanted to A/B test different options for key pages such as the FAQ, but didn't end up having the time to do so, so that's something I'd like to go back to in the future.

  3. Implementing remaining pages, navbar, & footer. Although our web builders were able to implement most of our pages into TransFamily Support Services (TFSS)' Wordpress, they weren't able to get to everything. As a compromise, we implemented several components for the web builders at TFSS to work with. As a team, we'd like to touch on our implementation and fill in the gaps we didn't get to.

AT THE END OF IT ALL...

A big thank you to:

  • Our TFSS collaborators, Aspen and Kathie. Getting to know TransFamily Support Services through you and working with you has been such an amazing experience.

  • Our mentors—Tarrea, Alex, Chy—thank you for dedicating the time to help us out every week. Your insights and feedback got us to where we are today.

  • The Build Up team! Thank you for giving us this valuable opportunity.