top of page
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.
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.
.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:
-
Improve the discoverability and accessibility of their resources and services.
-
Redesign their flagship pages for improved user engagement.
-
Maintain a consistent, personable brand throughout the website.
Preliminary research
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.
Key insights
— 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?
How might we
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:
-
Condense information to be concise and more clear.
-
The navigation and location for pages should be intuitive — users should not get lost in the navbar.
-
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):
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.
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.
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...
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
After
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
Unnecessary toggles, small font, lack of clear direction for engagement with page.
After
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.
Final prototype
LOOKING BACK
How we addressed our goals
-
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.
-
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.
-
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
-
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.
-
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.
-
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).
-
Get feedback. Our end product was greatly improved thanks to feedback from our mentors, our TFSS point of contact, and other Build Up teams.
Reflections
LOOKING FORWARD
Next steps
In the future, possible ways my team and I can envision expanding on this project include:
-
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.
-
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.
-
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.
Thank you for viewing this case study! ☻
Interested in seeing more of my work? Explore below:
bottom of page