trubel&co
Revamping the digital identity of an ed-tech non-profit's website
Timeline
3 months
Project Type
Contract
Role
UX Designer
Tools
Figma
overview
trubel&co sought a website redesign to make information more accessible for students and to better engage donors in their mission.
Through Develop For Good's SU25 cohort, I joined the student team supporting trubel&co (pronounced trouble). The previous phase of work focused on redesigning their design system for accessibility, and this new phase applied that system to additional pages that had not yet been updated.
Solution
I redesigned 4 pages to better streamline relevant information, improve navigation, and highlight essential content using the their new accessibility-focused design system.
My team redesigned a total of 6 pages to streamline information, improve site architecture, and make it easier to find relevant information by audience type, all while implementing the new accessibility-focused design system.
I contributed by developing 3 of those pages (1 of which is to be treated as a page template) and updating 12 blog posts, eliminating redundancies and highlighting the most important information for users.
Workshops:
Goes over workshop types, themes, and availability
News & Press:
Provides ongoing and past activities from the trubel&co team
Individual Workshop page (Template):
Provides more details about an upcoming workshop
12 Blog posts:
Details achievements made by the trubel&co team
impact
My contributions were approved to be added directly to their Squarespace!
You can check our their website here. I don't currently have any metrics to share, but the client was very happy with the redesign (See their tesimonial).
But how did I get here?
project timeline
who are trubel&co?
trubel&co is an ed-tech non-profit that empowers STEM-interested students from underrepresented backgrounds to drive environmental advocacy in their communities.
Through their Mapping Justice program and various workshops, trubel&co teaches students and nonprofits data skills for to empower people to create social impact.
project goal
I set out to update the remaining website pages with the new design system while continually exploring ways to enhance the user experience.
In this second project phase, our core focus was building on the work of the previous team. While I was initially responsible only for the Workshops page, I identified other opportunities for improvement and ultimately redesigned 3 additional pages.
technical constraints
The design had to be implemented in Squarespace and remain easy for non-designers to manage.
Since the trubel&co team lacked design experience, I kept the design simple to replicate and manage after handoff. Having worked with Squarespace before, I also anticipated its limitations and designed within those constraints, ie. limiting custom code.
old designs
All four pages struggled with oversized text, dominant images, and poorly optimized information.
As two core pages of the website, the Workshops and News & Press pages needed updates to meet user expectations and match the new design system.
Workshops
News & Press
Although these next 2 pages weren’t originally part of the redesign plan, I saw opportunities to enhance the user experience for visitors wanting to learn about workshops, sign up, or understand trubel&co’s ongoing/past impact.
Individual Workshop pages (linked to Workshops)
Individual Blog pages (linked to News & Press)
research
To better understand how the old designs were received, we gathered user experiences through Qualtrics surveys.
This helped us identify key pain points and understand target user groups' thought processes while navigating the site. For participants unfamiliar with trubel&co, we provided user role prompts to simulate real interactions as prospective students or donors.
Since the individual Workshops and Blog pages were not added to the project yet, they were excluded from the survey.
research insights
Using Qualtrics, we gathered users' thoughts about the old designs.
We received overall positive feedback on the design, layout, and clarity across most pages, including the News & Press page. However, the main pain points arose on the Workshops page, particularly due to a lack of specificity and clarity about past and upcoming workshops, which aligned with what I initially observed.
Confusion over Workshop availability
Respondents were confused by the difference between signing up vs. requesting a workshop, not realizing the page served 2 audiences: students applying and organizations hosting.
Information overload
Both pages were described to have redundant or clunky text, with respondents suggesting that we improve skimmability.
Lack of concrete examples
Respondents mentioned a lack of clear workshop examples and a desire to see past workshops or more information about what activities are involved in workshops.
Ideation
For the Workshops page, I designed a layout that clearly separated user eligibility, highlighted workshop themes, and outlined the type of work involved.
At this stage, I focused on reorganizing the layout while adding new elements, such as testimonials, an FAQ section, and a past workshops feature, to give users clearer expectations.
A key question that emerged was whether to begin the page with general workshop information or to separate audiences from the start and structure all subsequent sections accordingly. The latter was chosen.
Since our client-side contact wasn’t part of the team managing workshops, I received weekly feedback on new constraints and additional information.
At this stage, I also explored ways to make the website more engaging with custom code, while keeping within Squarespace’s limitations.
I iterated on the initial design to explore different ways of organizing information about workshop themes, past workshops, and upcoming sessions.
During this phase, I saw the potential to improve the overall flow for signing up for a workshop.
The old designs relied on blocks of text, a two-page poster, and application links. I created a template based on shared information across these posters, making it easier for users to follow the content on the webpage while still referencing the posters for additional details.
Their promotional posters (left) typically included a program description, location, application link, objectives or goals, sponsor information, and a general timeline or time commitment. I turned that information into sections for the page.
When a new workshop is added, trubel&co includes it in the navigation bar. To avoid overcrowding it with non-core pages, I proposed an accordion section on the Workshops page to showcase upcoming workshops, each linking to its individual page.
You can access an upcoming workshop's page by clicking on "Apply to upcoming workshops'" (within the Workshops page) and the workshop you're interested in. (This is an earlier iteration)
Since I was ahead of my design timeline, I also took on the News & Press page and its individual blog posts.
Earlier user testing revealed that the bottom half of the page felt clunky due to large text and images, which I addressed by adjusting the layout. Because of Squarespace's limited blog design choices and embedded LinkedIn posts requiring integration through Elfsight, I opted to skip a high-fidelity redesign of the News & Press page and instead edited that and each blog post directly.
I designed a low-fidelity News & Press mockup to show layout changes, but actually updating the page required altering their Elfsight LinkedIn integration, adjusting Squarespace’s blog format, and editing parent font styles.
user testing
Users appreciated how intuitive this new design was while still providing a clear overview about workshops.
I tested the Workshops and Individual Workshops pages using a Maze survey. Since I took on the News & Press, and consequently the individual blog pages, after user testing had already been in progress, I did not test these pages.
Final testing screens (Figma prototype)
stakeholder feedback
I faced some extra constraints close to the deadline, so I prioritized those new constraints when implementing my designs.
Unfortunately, the client-side team managing these pages didn’t have much of the information I was initially told would be available. While implementing the design in Squarespace, I prioritized addressing these gaps first. I also included last requests made by the client and created a document that goes over the template pages and custom code.
An example of how I reduced information (Upcoming Workshop cards)
Final Solution
Workshops page
I redesigned the Workshops page to fit a cleaner, more playful aesthetic while reorganizing existing content for clarity. User research highlighted confusion between requesting vs. signing up for workshops, so I clarified the distinction and restructured the page to serve both students and donors/organizations.
I also introduced an interactive map to showcase past workshop locations, added a new section to preview upcoming workshops with application links alongside highlights of past workshops, past student testimonials, and created a dedicated FAQ to address common workshop-related questions.
Individual Workshop page
Previously, upcoming workshop pages were dominated by a single paragraph of text, with most details hidden in a poster at the bottom. In my redesign, I surfaced the essentials (eligible student ages, program length, location, and outcomes) at the top, paired with a clear CTA to apply.
Below, I added space for a program overview, a flexible section on what students will learn, and the promotional poster for supplemental details.
To keep the page actionable, I included dual CTAs to apply or contact the team, a sponsor highlight, an optional section for upcoming workshops, and a direct contact form for inquiries.
Additionally, I introduced subtle color-coding (green, clay, teal) to align standard workshops with themes from the main Workshops page, while ensuring the page itself remained self-explanatory without relying on color.
News & Press
I refined the News & Press page to align with the updated aesthetic, highlighting ongoing developments through a preview of LinkedIn posts and showcasing trubel&co’s history of achievements and impact.
Individual Blog post
I also streamlined the individual blog posts, creating a cleaner, more consistent format that remains easy for the team to reproduce.
Since Squarespace restricts how these pages are edited, I edited the site's style settings to ensure that future blog posts follow a similar format. I edited 12 existing blogs to make sure that they followed a similar format.
opportunity on the job
Redesigning problematic sections for good measure
This project started as a Workshops page redesign, but it grew into much more. Part of the reason why was my initiative to identify and soolve problems, even those outside of my scope.
hear from the client
"I had the opportunity to work with Monica Cortes on a website redesign for my nonprofit, and I can confidently say that she is nothing short of an expert in her craft."
"From the outset, Monica produced beautiful, high-quality designs that directly addressed our challenges and aligned seamlessly with our needs. What stood out most was her thoughtful, curated approach—she consistently incorporated feedback from user research and testing, ensuring that every iteration of the redesign improved and elevated the user experience.
Monica also demonstrated an exceptional ability to collaborate with executive leadership, quickly translating broad or non-technical ideas into designs that were not only aesthetically strong but also strategically aligned with the end user’s needs. Even when tasked with a single page, she delivered multiple variations (four or five in some cases) all of outstanding quality. In fact, her work set such a high bar that I used it as the benchmark for quality assurance across the entire project.
Beyond her technical skill, Monica brought bright ideas, thoughtful solutions, and visible passion to every meeting. Her talent and craft are matched by her professionalism and her clear dedication to delivering the best possible result."
opportunity on the job
Redesigning problematic sections for good measure
This project started as a Workshops page redesign, but it grew into much more. Part of the reason why was my initiative to identify and soolve problems, even those outside of my scope.
Final Mentions
Special thanks to Develop for Good, everyone on my team, and trubel&co!
As I avidly search for new opportunities to grow as a designer, accepting DFG's offer for this cohort was no-brainer. It was good practice to apply my skills to a real-world effort, and I'm glad that it connected me to an organization with a positive impact.
Thank you to trubel&co and our contact Aizhaneya for making this an enjoyable experience. I felt prepared to explain my design choices an appreciated for my work.
And thank you to my team for always being so helpful and positive each week. Special shoutout to Danielle S. and Justin P. for being excellent managers during my first ever project for Develop for Good!
Interested in how my work tied into the overall project? View the team presentation:
more projects
