.png)
.jpg)
.jpg)
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. While chatting with the founder of TransFamily Support Services, we 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.
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:
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.
But how, we asked, do these users interact with the website?
Our interviewees, who we directed to try to find various pages across the site, were previously unfamiliar with both TFSS and its website. To gather the most valuable insights from these tests, we affinity mapped the data by the particular navigation flow they addressed and identified the key points for each of the flows.
.png)
As the foundation for what we needed to improve became clearer, it was crucial for us to proceed with extensive researching and fine-tuning of our insight of the TFSS community and the overall user base. We translated the experiences of our survey respondents into possible personas, brainstorming various user groups that might be involved with TFSS:
The pain points narrowed down into 5 major categories: organization, overwhelming information, visual appeal, user flow/navigation, and overall content.
Then we began branching out and exploring what features a redesigned website might have to be able to address the pain points.
In addition, we quickly jotted down some words we wanted our redesign to reflect (inclusive, bright, fresh, clean, and confident) and pages that we would definitely want to keep throughout the revamp.
As we brainstormed, we realized that our ideas diverged in so many directions and we were having a hard time defining the most important and actionable ones. To visualize this, I suggested a ideation methodology called Crazy 8s to rapidly produce ideas during our 10-week sprint to redesign this website.
During our round of Crazy 8s, we each of us sat down for 8 minutes and visualized up to 8 sketches of various solutions. When we finished, we gathered our sketches and discussed them as a group, dot voting on certain concepts we wanted to move forward with.
As mentioned earlier, one glaring problem of the site was its disorganized and complex navigation bar. In an attempt to tackle this, we created another site map with reorganized pages to address the information architecture.
To improve a better understanding of the TFSS services and foster a smoother navigation process, I sketched and drafted wireframes that presented the navigation information at the top of the website with a more extensive landing page layout. We explored successful tools from other nonprofits in our competitive analysis such as a user-focused toggle mad libs section, featured resource cards, testimonials and overall visually engaging content.
Based on our branding ideation session with our stakeholders, we were able to cultivate a better understanding of the Trans Family Support Services’ brand: Navigation for the Journey. Given that the nonprofit’s main audience consists of families of trans individuals, it called for a more mature and inviting tone for design. 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 us to utilizing pastel colors in the palette and softer gradients of those colors to help emphasize a more visually engaging impression.
We contrasted softer colors with bolder cool colors such as the Navy and Azure to better gain accessibility visually. We also worked to incorporate a wave theme throughout as a way to tie the idea of navigation with a sense of serene guidance.
.png)
Final Prototype Changes
Clearer Content Design
with Hero Header
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 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.
Personalized Reviews
with 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.
Improving Accessibility and Discoverability with Top-down Navigation Bar
Over half of users mainly struggled with the task of finding the about us page, blog page, and insurance/medical assistance. By switching the navigation bar from the side to top-down, we were able to get rid of navigation ambiguity that most users encountered with the previous website. By condensing several resources that fell under the same umbrella categories, we were able to mitigate the traffic of information that users found overwhelming in the search process.
Making additional support for finding services with a Mad Libs Section
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 an extension to specific links to resources.
After our final prototyping, our users say that the redesign looks more clean, intuitive and straightforward, and inviting. This validated our design objectives as well as efforts to address user paint points with the old website, such as the unclear organization of content, bland design, and overall personality of the previous website.
Creating more impact with a wore wisually stunning Landing Page
We believed that the new landing page should offer a greater breadth of resources than the older iteration. This is due to the fact that it is the most impactful page in making a first impression on the user. We included photos captured by the organization’s photographer to make way for a more personable landing page. Additionally, we created mad libs to help users identify their purpose on the site in an effort to personalize their experience.
Before
Final
Reducing overloading the user with consistent CTAs for the What We Do page
From our usability tests, a major pain point expressed by our users was the overwhelming amount of options in the what we do section of the navigation bar. This led to users being unable to decide which page to visit first and made it difficult to find a specific page. To tackle this, we revamped the What We Do page to provide a better overview of services and made use of CTAs to avoid overwhelming with information at one glance.
Before
Final
Better representing the community with a section navigation menu for the Who We Are page
The older iteration makes use of testimonials and box messages to give a gist of the team behind TransFamily Support Services. We wanted to redesign this page by showing headshots of the entire group of wonderful people that dedicate their time to this cause. In this manner, the average user is able to immediately familiarize with everyone involved in the nonprofit organization.
Before
Final
In the future, possible ways we can envision expanding on this project include:
.png)