trubel&co
Web redesign to improve accessibility and navigation
Project Overview
Problem: trubel&co’s website faces some challenges with being easy to navigate and fully showcase its impact.
Solution: The redesign focuses on creating a 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, like responsive design and a more intuitive layout, ensure that trubel&co’s website is engaging and welcoming to all users.
Project Type: Client Project
|
Timeline: 4 months
Tools: Figma, Squarespace, Qualtrics, Usertesting.com, Slack, Notion, Canva
Role: UI/UX Designer & Researcher
Collaborators: Product Manager, UX/UI Designers & Researchers
About the Company: trubel&co is an ed-tech non-profit dedicated to empowering high school students from underrepresented backgrounds with STEM skills to advocate for environmental issues in their communities.
DESIGN PROCESS
DESIGN PROCESS
Client Goals
Effectively reach and engage with their target audience, prospective students and donors
Gain support from new donors and organization partners
1
2
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 color pairings affecting readability.
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.
Confusion 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.
1
2
3
4
5
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:
Home Page - Wireframe 1
Home Page - Wireframe 2
Usability Testing
To ensure the 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.
1
2
3
4
5
Design System
Our team developed a design system to improve accessibility and consistency by standardizing typography, colors, and UI components, ensuring a cohesive and user-friendly experience.
Here is the accessibility before and after:
Before
The five boxing wizards jump quickly.
The five boxing wizards jump quickly.
The five boxing wizards jump quickly.
The five boxing wizards jump quickly.
The five boxing wizards jump quickly.
The five boxing wizards jump quickly.
The five boxing wizards jump quickly.
** Additional colors were also used
WCAG AA: Fail
WCAG AAA: Fail
WCAG AA: Fail
WCAG AAA: Fail
WCAG AA: Fail
WCAG AAA: Fail
WCAG AA: Fail
WCAG AAA: Fail
WCAG AA: Fail
WCAG AAA: Fail
WCAG AA: Fail
WCAG AAA: Fail
WCAG AA: Fail
WCAG AAA: Fail
WCAG AA: Fail
WCAG AAA: Fail
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 accessible 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 color system!
The five boxing wizards jump quickly.
After
The five boxing wizards jump quickly.
The five boxing wizards jump quickly.
The five boxing wizards jump quickly.
The five boxing wizards jump quickly.
The five boxing wizards jump quickly.
The five boxing wizards jump quickly.
The five boxing wizards jump quickly.
The five boxing wizards jump quickly.
WCAG AA: Pass
WCAG AAA: Pass
WCAG AA: Pass
WCAG AAA: Pass
WCAG AA: Pass
WCAG AAA: Pass
WCAG AA: Pass
WCAG AAA: Pass
WCAG AA: Pass
WCAG AAA: Pass
WCAG AA: Pass
WCAG AAA: Pass
WCAG AA: Pass
WCAG AAA: Pass
WCAG AA: Pass
WCAG AAA: Pass
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 high-fidelity design of the home page:
Hi-Fi Design 1
Final Iteration
Final Design
Original Home Page
Redesigned Home Page
Impact
| 20% increase in the ratings for “ease of finding key information” in our post-redesign survey compared to our initial survey.
| 8% increase in the likelihood for people to complete key actions (apply, purchase a workshop, donate)
| Time taken to find key information after the redesign was on average 2.25 minutes faster.
Testimonial from the Client
It has been really enjoyable to work alongside such a willing team — everyone we've worked with has had a great attitude and has been really easy to work with. They've been receptive to feedback, have brought their insights and ideas to the table, and have drastically improved our website's usability and appearance.
Annie Grant, Associate Director, trubel&co
Reflection
This project was such a great experience because it taught me the power of teamwork! Collaborating with other 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 come to life on a live website was exciting, but what made it even more meaningful was knowing our work was supporting a nonprofit. It reinforced my passion for using design to make a positive impact!
