Revitalizing GLSEN's digital hub with strategic UX, research-driven design, and user input — amplifying impact for fostering understanding and advocacy in diverse communities.
GLSEN: Redesign For Parent Inclusivity Resources
.png)
UX Designer & UX Architect
My Role
Laiba Sarwar
Allysha A. Leonard
Gatha Bhakta
Scott Dunay
Team
2023 (3 months)
Duration
Client Kickoff Interview
Research Outreach
Interviews and Survey
Insight Synthesis
Redesign
User Testing
Client Presentation and Feedback
Process
The objective of the redesign was to create a new IA that was clear, intuitive, and inclusive of the parent resource addition. The new IA aimed to support easy navigation and findability of relevant content, increase user engagement, and improve the website's overall user experience.
Objective
Community Programs
Industry
Redesign Website Navigation
Task
Figma
Miro
Optimal Workshop
Tools
The GLSEN website contained a vast amount of content, but it lacked a clear hierarchy and navigation structure, making it difficult for users to find relevant information. Additionally, the client had requested more of a focus for parents of LGBTQ+ children. Without a clear plan, redesigning the website's IA to support these changes posed a significant challenge.
Problem
Revamping GLSEN's digital hub involved a strategic UX approach, incorporating research-driven design and user feedback. The redesign prioritized an intuitive Information Architecture (IA) that is inclusive of parent resources. Key steps included streamlining navigation based on user testing, optimizing content categorization through card sorting, and refining the design for improved accessibility. The final prototype reflects insights from low-fi testing, resulting in enhanced site navigation, reduced bounce rates, and increased user engagement. The user-centric redesign aligns with GLSEN's mission of fostering understanding and advocacy in diverse communities.
Solution
Previous Navigation
The navigation architecture did not have a guided track for Parents and Donors with resources for both being in various categories.
01. DISCOVERY
User Personas
Overall, we found that each organization had its strengths and weaknesses. PFLAG, for example, had a simple and intuitive layout, but their content was limited compared to other sites. The Human Rights Campaign Foundation had an extensive range of resources but could improve its search functionality. The Trevor Project had a modern and sleek design but could benefit from more visual aids to help guide users.
Navigation
-
Use clear and concise language for labels, and avoid jargon.
-
Maintain a consistent structure throughout the site.
-
Group similar content together, providing clear headings and categories.
-
Utilize visual cues such as icons to help users quickly identify different sections.
-
Avoid burying important pages within complex submenus.
-
Incorporate search functionality.
-
Use appropriate color contrasts and provide keyboard navigation options.
Key Recommendations
Organization
Each section of the website should have cohesive flows
Information architecture should support the hierarchy across all the sections within the website
If any section within the website has a subsection, it should be easy to understand for the user and well-executed
The organization should feel organic and supported by the user interface (signifiers for links, links, hover, and selected states)
Appearance
The overall cohesive color palette is followed on every page.
A well-thought-out layout that makes it easier for the user to go through the webpage quickly and efficiently without any hassle.
Related graphics and images that explain the content and make the webpage more visual. A lot less textual information.
Card Sorting
The card sorting process is an effective method for understanding how users categorize and navigate information on a website. In the GLSEN website redesign case study, my team and I utilized card sorting to gain insights into how users organized the website's content and how we could improve its information architecture.
When creating the card sort, we focused on tabs that parents would want and need when searching for resources for their kids.
Key Insights
With the results, we focused on combining items that were grouped more than 40% of the time.
We focused on creating categories for about, resources, parents, careers, and support since they were the most important and added subcategories that were matched with the card sort.
02. IDEATION
Low/Medium-Fi Prototype
During the design phase, we made sure to use comprehensible wording for each task and avoided using leading words found on the page. This approach ensured that the user's success flow was more obvious and not influenced by any preconceived notions or biases from the team.
We conducted user testing with our low-fi prototype to gather feedback on the design and identify any potential flaws or areas for improvement. The testing was done with a diverse group of participants, including both GLSEN stakeholders and individuals who were not familiar with the organization.
To redesign GLSEN’s website we conducted tests on the donate and chapter pages on both desktop and mobile by providing the interviewees with the following two tasks.
Donate: You want to join the GLSEN community in your area and find out more information about the closest center
Find Your Chapter: You want to join the GLSEN community in your area and find out more information about the closest center.
Donation Flow
Find Your Chapter Flow
User Testing
After conducting these tasks, we found that for task 1, the user:
Clicks Support Us First
The Billing Information was self-explanatory and easy to follow.
Thus I concluded that the recommendation would be:
Since Support Us was clicked first, we can add that page and have the donate button on the top.
Or we can have the donate button more in the hero image.
And for task two, the findings were that the user:
Clicks Programs or About First
For finding the chapter, the list view makes sense but the map is confusing.
Thus I concluded that the recommendation would be:
Edit the map view to make it more usable and clear to understand.
Final Site Map
The redesign of the GLSEN website's Information Architecture (IA) has significantly improved the user experience. Our team worked collaboratively to identify the weaknesses of the existing IA and proposed a more streamlined and user-friendly structure. This has made it easier for visitors to navigate the website and find the content they need, leading to reduced bounce rates and increased user engagement.
To support the new IA, the team also recommended design and functionality improvements, such as making the main navigation more prominent and concise, and including clear calls to action. These changes have made the website more intuitive and effective, ultimately leading to the achievement of GLSEN's goal of becoming a resource for parents.
03. TAKEAWAYS
Working in a collaborative team ensured that each part of the activities was thorough and helped improve my design and research skills.
A big challenge was redesigning the IA to ensure each need was met and it was not more confusing, but I overcame this by communicating with the team to understand the pain points that we had to fix.
After researching, conducting competitive analysis, card-sorting, tree-testing, user testing, and producing the prototype, I have learned the main process of creating a product for our client based on “knowing the user”.
Reflection
Future Steps
We presented our findings to GLSEN and our team enjoyed working with them. Going forward, the family therapy and find your chapter features that we suggested and tested was well served and will be taken into consideration soon.
Tree Testing
In order to evaluate the usability of the GLSEN website's information architecture, my team employed the method of tree testing. We wanted to identify any potential issues or confusion that users may encounter while navigating the site. To conduct the test, we developed a simplified version of the information hierarchy based on the results of our card sort analysis. This simplified hierarchy served as the basis for the participants to complete 10 tasks related to the website's content.We utilized Optimal Workshop to send the test to 17 participants, who were instructed to navigate the hierarchy to find the relevant information to complete the tasks.
.webp)
Low success rates were observed during the Tree Test.
The level of directness was only 65%, which indicates that users were not able to complete tasks efficiently.
The team realized that the first site map navigation they produced needed re-evaluation.
A success rate above 70% is desirable for user-friendly navigation.
Some tasks had confusing words, leading to more unsuccessful tasks.
Key Insights
The test results were helpful in re-designing the IA of the GLSEN site more concisely and directly.
Users are not parents themselves and took the test with this bias.
Task 1 had the most unsuccessful results because of the wording.
Task 3 performed the second best, and we combined both newsletters for parents and GLSEN into a singular newsletter.
Task 5 we changed the placement of “Success Stories” from “Support Us” to “About Us”.
Task 7 we decided to combine all career and volunteer opportunities into one page to make navigation successful. The wording was confusing for task completion.
Task 8 results from users having difficulty finding the “Donor Benefits” page as there is a design feature on the homepage with a large button that says “Donate”, and we decided to include the benefits of donating to the page the button leads to.
We decided to keep the “Crisis Hotline” under “Resources” even though users navigated typically to the “Parents and Families” drop-down. “The Crisis Hotline” can be added to the footer navigation and the “FAQ For Parents” pages.
Task 10 we moved the “Research” subcategory into “Resources” instead of “About Us”.
Final Prototype
To create our final prototype, we incorporated the insights gathered from the low-fi user testing to improve the site navigation and optimize its aesthetic design for enhanced accessibility.Our final prototype comprised three tasks, including the original “Donate” and “Find Your Chapter” tasks, as well as a new “Family Group Therapy” task, which we designed for both mobile and desktop.
After creating our finalized site map, and going through the results of the tree testing and card sorting activities, we:
Because users did not use this button, we removed the “Find Your Chapter” from the navigation
Renamed “Support Us” to “Shop”, and moved “Success Stories” to the parent “Resources”
Navigation
We used the footer as an index as well as another way for users to input their emails to keep in touch with the organization.
Footer
We kept the general design and site style of the previous website but added more grid styles to show the content better and increased the size of the buttons of the donation and find your chapter since these are main sections of the site that the user goes to.
Home Page
We added a map view as well as a more detailed page to provide more information to the parents and included the donate button on the top for users to find it easier.
Chapter Page
Family therapy is a important resource for parents and we believed that it can be very helpful for GLSEN to offer it. Therefore, we created a whole page for parents to book, or call or chat with therapists after finishing filling out a form that will help partner the family with the best therapist for them. We created a extensive form and used the same layout and friendly colors to help guide them through the process.
Family Therapy Page
