trubel&co
Improved site accessibility and navigation to effectively reach and engage with their target audience
Client:
trubel&co
Timeline:
4 months
Role:
UI/UX Designer, UX Researcher
Collaborators:
Product Manager, UX/UI Designers, UX Researchers
Overview
About the Company: trubel&co is an edtech nonprofit organization dedicated to empowering underprivileged high school students with STEM skills to advocate for environmental issues in their communities.
Problem: Users experienced navigation issues and had difficulty understanding trubel&co's mission and impact.
Solution: The redesign creates a more cohesive and user-friendly experience. Improvements include establishing a consistent and accessible design system and restructuring the site’s information architecture to highlight its mission and impact. Key updates, such as responsive design and a more intuitive layout, ensure that trubel&co’s website is engaging and welcoming to all users.
Overview
About the Company: trubel&co is an edtech nonprofit organization dedicated to empowering underprivileged high school students with STEM skills to advocate for environmental issues in their communities.
Problem: Users experienced navigation issues and had difficulty understanding trubel&co's mission and impact.
Solution: The redesign creates a more cohesive and user-friendly experience. Improvements include establishing a consistent and accessible design system and restructuring the site’s information architecture to highlight its mission and impact. Key updates, such as responsive design and a more intuitive layout, ensure that trubel&co’s website is engaging and welcoming to all users.
Overview
About the Company: trubel&co is an edtech nonprofit organization dedicated to empowering underprivileged high school students with STEM skills to advocate for environmental issues in their communities.
Problem: Users experienced navigation issues and had difficulty understanding trubel&co's mission and impact.
Solution: The redesign creates a more cohesive and user-friendly experience. Improvements include establishing a consistent and accessible design system and restructuring the site’s information architecture to highlight its mission and impact. Key updates, such as responsive design and a more intuitive layout, ensure that trubel&co’s website is engaging and welcoming to all users.
Client Goals
Effectively reach and engage with their target audience, prospective students
Gain support from new donors and organization partners
Client Goals
Effectively reach and engage with their target audience, prospective students
Gain support from new donors and organization partners
Client Goals
Effectively reach and engage with their target audience, prospective students
Gain support from new donors and organization partners
UX Research
We conducted an initial survey using Qualtrics to gather insights on users' experiences with trubel&co's original website design. By doing so, we were able to identify the following key pain points:
Navigation Issues
Multiple respondents, across all user groups, reported struggling to locate information about workshops, applications, and donations.
Information Overload
Several participants mentioned too much text, difficulty skimming, and issues with readability due to inaccessible color pairings.
Unclear Information on Pricing and Donations
Donors specifically mentioned a lack of clear pricing information for workshops and a desire for more transparency regarding how donations are used.
Confusions about Programs
There was confusion about the Mapping Justice program, its locations, and how to find example projects.
UX Research
We conducted an initial survey using Qualtrics to gather insights on users' experiences with trubel&co's original website design. By doing so, we were able to identify the following key pain points:
Navigation Issues
Multiple respondents, across all user groups, reported struggling to locate information about workshops, applications, and donations.
Information Overload
Several participants mentioned too much text, difficulty skimming, and issues with readability due to inaccessible color pairings.
Unclear Information on Pricing and Donations
Donors specifically mentioned a lack of clear pricing information for workshops and a desire for more transparency regarding how donations are used.
Confusions about Programs
There was confusion about the Mapping Justice program, its locations, and how to find example projects.
UX Research
We conducted an initial survey using Qualtrics to gather insights on users' experiences with trubel&co's original website design. By doing so, we were able to identify the following key pain points:
Navigation Issues
Multiple respondents, across all user groups, reported struggling to locate information about workshops, applications, and donations.
Information Overload
Several participants mentioned too much text, difficulty skimming, and issues with readability due to inaccessible color pairings.
Unclear Information on Pricing and Donations
Donors specifically mentioned a lack of clear pricing information for workshops and a desire for more transparency regarding how donations are used.
Confusions about Programs
There was confusion about the Mapping Justice program, its locations, and how to find example projects.
Product Requirements
Based on the client goals and research insights, we defined key product requirements. Our focus was to enhance accessibility, navigation, and overall user experience while ensuring that trubel&co's mission and impact are effectively communicated.
Refine the style guide to improve accessibility and maintain consistency across the platform.
Enhance navigation and information architecture by redesigning the navigation menu bar, making it easier for users to locate relevant information effortlessly.
Redesign the homepage to provide a clear understanding of what trubel&co does and strives to accomplish. The new design will ensure users can efficiently find key information.
Redesign the impact page to clearly communicate the value of trubel&co. This redesign will help donors assess the organization’s impact and worth for investment, while also giving students a transparent view of the opportunities and benefits.
Redesign the Mapping Justice page to offer a clear explanation of what Mapping Justice is and why users should participate. The new design will ensure potential participants can make an informed decision and be inspired by example projects.
By prioritizing these improvements, our team aimed to create a more user-friendly and engaging experience for both donors and students, aligning with trubel&co’s mission and objectives.
Product Requirements
Based on the client goals and research insights, we defined key product requirements. Our focus was to enhance accessibility, navigation, and overall user experience while ensuring that trubel&co's mission and impact are effectively communicated.
Refine the style guide to improve accessibility and maintain consistency across the platform.
Enhance navigation and information architecture by redesigning the navigation menu bar, making it easier for users to locate relevant information effortlessly.
Redesign the homepage to provide a clear understanding of what trubel&co does and strives to accomplish. The new design will ensure users can efficiently find key information.
Redesign the impact page to clearly communicate the value of trubel&co. This redesign will help donors assess the organization’s impact and worth for investment, while also giving students a transparent view of the opportunities and benefits.
Redesign the Mapping Justice page to offer a clear explanation of what Mapping Justice is and why users should participate. The new design will ensure potential participants can make an informed decision and be inspired by example projects.
By prioritizing these improvements, our team aimed to create a more user-friendly and engaging experience for both donors and students, aligning with trubel&co’s mission and objectives.
Product Requirements
Based on the client goals and research insights, we defined key product requirements. Our focus was to enhance accessibility, navigation, and overall user experience while ensuring that trubel&co's mission and impact are effectively communicated.
Refine the style guide to improve accessibility and maintain consistency across the platform.
Enhance navigation and information architecture by redesigning the navigation menu bar, making it easier for users to locate relevant information effortlessly.
Redesign the homepage to provide a clear understanding of what trubel&co does and strives to accomplish. The new design will ensure users can efficiently find key information.
Redesign the impact page to clearly communicate the value of trubel&co. This redesign will help donors assess the organization’s impact and worth for investment, while also giving students a transparent view of the opportunities and benefits.
Redesign the Mapping Justice page to offer a clear explanation of what Mapping Justice is and why users should participate. The new design will ensure potential participants can make an informed decision and be inspired by example projects.
By prioritizing these improvements, our team aimed to create a more user-friendly and engaging experience for both donors and students, aligning with trubel&co’s mission and objectives.
Wireframes
While I contributed to the overall site’s design, my particular role focused on the home page.
When creating wireframes, my teammate and I originally created separate wireframes to gather feedback. Our designs prioritized clear calls-to-action, immediate understanding of what trubel&co offers, and a streamlined user experience. Our wireframes were quite similar, with only minor differences in layout and navigation. They are shown below:
Wireframes
While I contributed to the overall site’s design, my particular role focused on the home page.
When creating wireframes, my teammate and I originally created separate wireframes to gather feedback. Our designs prioritized clear calls-to-action, immediate understanding of what trubel&co offers, and a streamlined user experience. Our wireframes were quite similar, with only minor differences in layout and navigation. They are shown below:
Wireframes
While I contributed to the overall site’s design, my particular role focused on the home page.
When creating wireframes, my teammate and I originally created separate wireframes to gather feedback. Our designs prioritized clear calls-to-action, immediate understanding of what trubel&co offers, and a streamlined user experience. Our wireframes were quite similar, with only minor differences in layout and navigation. They are shown below:
Design System
Our team developed a design system to improve accessibility and consistency by standardizing typography, colors, and UI components. The design system and accessibility compliance are shown below.
Fun Fact: This was my favorite part of the project! Each team member proposed their own idea for the design system, and the CEO of trubel&co joined our meeting to help finalize the decision. The original colors were thoughtfully chosen by the CEO, who not only loved the palette but even gave each color a name! When creating the new design system, I knew it was important to incorporate as many of these colors as possible. I decided to use a neutral primary color and include trubel&co’s signature colors as secondary and accent shades. And guess what? The CEO chose my design system!
Design System
Our team developed a design system to improve accessibility and consistency by standardizing typography, colors, and UI components. The design system and accessibility compliance are shown below.
Fun Fact: This was my favorite part of the project! Each team member proposed their own idea for the design system, and the CEO of trubel&co joined our meeting to help finalize the decision. The original colors were thoughtfully chosen by the CEO, who not only loved the palette but even gave each color a name! When creating the new design system, I knew it was important to incorporate as many of these colors as possible. I decided to use a neutral primary color and include trubel&co’s signature colors as secondary and accent shades. And guess what? The CEO chose my design system!
Design System
Our team developed a design system to improve accessibility and consistency by standardizing typography, colors, and UI components. The design system and accessibility compliance are shown below.
Fun Fact: This was my favorite part of the project! Each team member proposed their own idea for the design system, and the CEO of trubel&co joined our meeting to help finalize the decision. The original colors were thoughtfully chosen by the CEO, who not only loved the palette but even gave each color a name! When creating the new design system, I knew it was important to incorporate as many of these colors as possible. I decided to use a neutral primary color and include trubel&co’s signature colors as secondary and accent shades. And guess what? The CEO chose my design system!
Usability Testing
To ensure trubel&co’s platform aligned with user needs, our team conducted usability testing with the two home page lo-fi wireframes. The goal was to assess navigation clarity, content comprehension, and overall usability.
Key Findings from Usability Testing:
Clear Navigation
Participants found the primary navigation on Home Page 2 intuitive and easy to follow, with most participants completing tasks without confusion.
Content Hierarchy Adjustments Needed
Some participants struggled to locate key information quickly, indicating a need for better section prioritization and visual emphasis.
CTA Clarity & Placement
While participants recognized primary CTAs, feedback suggested that button labeling and placement could be more action-oriented.
Microcopy Effectiveness
Participants highlighted the importance of implementing easier use of language on the website to improve user engagement.
Website Credibility
Participants highlighted the importance of providing clear information. For instance, the concept of "Mapping Justice" was unclear. They suggested to make explicit that it is program intended for students.
Based on the key findings, minor iterations were made to the home page.
Usability Testing
To ensure trubel&co’s platform aligned with user needs, our team conducted usability testing with the two home page lo-fi wireframes. The goal was to assess navigation clarity, content comprehension, and overall usability.
Key Findings from Usability Testing:
Clear Navigation
Participants found the primary navigation on Home Page 2 intuitive and easy to follow, with most participants completing tasks without confusion.
Content Hierarchy Adjustments Needed
Some participants struggled to locate key information quickly, indicating a need for better section prioritization and visual emphasis.
CTA Clarity & Placement
While participants recognized primary CTAs, feedback suggested that button labeling and placement could be more action-oriented.
Microcopy Effectiveness
Participants highlighted the importance of implementing easier use of language on the website to improve user engagement.
Website Credibility
Participants highlighted the importance of providing clear information. For instance, the concept of "Mapping Justice" was unclear. They suggested to make explicit that it is program intended for students.
Based on the key findings, minor iterations were made to the home page.
Usability Testing
To ensure trubel&co’s platform aligned with user needs, our team conducted usability testing with the two home page lo-fi wireframes. The goal was to assess navigation clarity, content comprehension, and overall usability.
Key Findings from Usability Testing:
Clear Navigation
Participants found the primary navigation on Home Page 2 intuitive and easy to follow, with most participants completing tasks without confusion.
Content Hierarchy Adjustments Needed
Some participants struggled to locate key information quickly, indicating a need for better section prioritization and visual emphasis.
CTA Clarity & Placement
While participants recognized primary CTAs, feedback suggested that button labeling and placement could be more action-oriented.
Microcopy Effectiveness
Participants highlighted the importance of implementing easier use of language on the website to improve user engagement.
Website Credibility
Participants highlighted the importance of providing clear information. For instance, the concept of "Mapping Justice" was unclear. They suggested to make explicit that it is program intended for students.
Based on the key findings, minor iterations were made to the home page.
High-Fidelity Iterations
In the high-fidelity phase, we refined the visual design, layout, and interactions through three iterations, ensuring a polished and user-friendly experience. This phase incorporated not only user feedback but also insights from stakeholders to guide our decisions for each page. Below is shown the iterations of the hi-fi design of the home page.
High-Fidelity Iterations
In the high-fidelity phase, we refined the visual design, layout, and interactions through three iterations, ensuring a polished and user-friendly experience. This phase incorporated not only user feedback but also insights from stakeholders to guide our decisions for each page. Below is shown the iterations of the hi-fi design of the home page.
High-Fidelity Iterations
In the high-fidelity phase, we refined the visual design, layout, and interactions through three iterations, ensuring a polished and user-friendly experience. This phase incorporated not only user feedback but also insights from stakeholders to guide our decisions for each page. Below is shown the iterations of the hi-fi design of the home page.
Final Design
Below is shown the final design of the home page.
Final Design
Below is shown the final design of the home page.
Final Design
Below is shown the final design of the home page.
Outcome
User testing showed promising results: 8% increase in the likelihood of users completing key actions, 20% increase in the ratings for “ease of finding key information”, and the average time taken to find key information decreased by 2.25 minutes.
The redesign effectively addressed the challenges faced by users.
Boost in key action completion
+8%
Improved info findability
+20%
Time to find key info
2.25 min
Outcome
User testing showed promising results: 8% increase in the likelihood of users completing key actions, 20% increase in the ratings for “ease of finding key information”, and the average time taken to find key information decreased by 2.25 minutes.
The redesign effectively addressed the challenges faced by users.
Boost in key action completion
+8%
Improved info findability
+20%
Time to find key info
2.25 min
Outcome
User testing showed promising results: 8% increase in the likelihood of users completing key actions, 20% increase in the ratings for “ease of finding key information”, and the average time taken to find key information decreased by 2.25 minutes.
The redesign effectively addressed the challenges faced by users.
Boost in key action completion
+8%
Improved info findability
+20%
Time to find key info
2.25 min
Reflection
This project taught me the power of teamwork. Collaborating with UX designers, a product manager, and a design manager showed me how important it is to communicate, share ideas, and adapt to feedback. Seeing our designs go live was exciting, but knowing it was for a nonprofit made it even more meaningful and reminded me why I love using design to make a positive impact.
Reflection
This project taught me the power of teamwork. Collaborating with UX designers, a product manager, and a design manager showed me how important it is to communicate, share ideas, and adapt to feedback. Seeing our designs go live was exciting, but knowing it was for a nonprofit made it even more meaningful and reminded me why I love using design to make a positive impact.
Reflection
This project taught me the power of teamwork. Collaborating with UX designers, a product manager, and a design manager showed me how important it is to communicate, share ideas, and adapt to feedback. Seeing our designs go live was exciting, but knowing it was for a nonprofit made it even more meaningful and reminded me why I love using design to make a positive impact.
Other Cases
Other Cases
Other Cases
