Birdsong 2.0 Design System
A refreshed design system, prioritizing accessibility and scalability to reduce engineering overhead and open new market opportunities with government grantmakers.
TL;DR
The Opportunity
How might Resilia, a tech-for-good platform maintain its market share in the space, and unlock new market opportunities with government grantmakers?
The Outcome
A refreshed design system that complied with the Americans with Disabilities Act (ADA), opened new market opportunities with government grantmakers, shielded the company from 7-figure lawsuits, and reduced product development overhead to maintain its competitive advantage.
The Problem
Resilia is a venture-backed, "tech for good" startup developing SaaS solutions for nonprofit organizations to become high-performing and enable funder enterprises (corporations, cities, and private foundations) to measure and scale the impact of their grant deployments.
Resilia expanded into new marketing opportunities with government grantmakers, where adherence to the Americans with Disabilities Act (ADA) is mandatory. The current internal Design System, Birdsong 1.0, lacked widespread adoption across product teams, hindering ADA compliance and leading to increased development overhead, preventing Resilia from maintaining a competitive edge.
THE DESIGN Problem
The creation of one-off variants of components led to increased design overhead, and low user adoption and engagement due to the inconsistent UX.
THE ENGINEERING Problem
The lack of governance and standardization led to increased engineering efforts pushing back launch windows of business-critical features.
THE BUSINESS Problem
Lack of compliance with the ADA left Resilia vulnerable to 7-figure lawsuits and prevented new market opportunities with government grantmakers.
My Impact
As the Director of Design at Resilia
People
Led mid-level designers to successfully launch their first cross-functional initiative.
Secured executive buy-in from VPs of Product and Engineering, and Product Marketing Manager.
Fostered a company-wide culture that champions accessibility as a fundamental principle.
Process
Provided hands-on art direction to the team to align with existing brand standards and forward accessibility stance.
Developed a roadmap aligning the go-to-market plan with the existing product roadmap.
In collaboration with the Design and Engineering Lead to establish the standard operating procedures for component governance for future scalability and maintained ADA Compliance.
Practice
Provided ongoing feedback to the team to increase CSAT score on usability by 40%, while aligning with brand identity and Web Content Accessibility Guidelines (WCAG) standards.
The Approach
New Direction
The redesign of our design system provided an opportunity to elevate our brand expression to position us uniquely in the Tech for Good sector. Through collaboration with Product Marketing, Customer Success SMEs, and the broader design team, we established North Star principles that guide all design decisions while adhering to WCAG 2.1 requirements.
Our Brand Personality Matrix
Updated Homepage to Drive Activation
I worked with the Product Manager and Product Marketing Manager on updating the homepage for Birdsong 2.0 release. By coordinating these efforts, we launched the new styles on the platform quickly for other teams to use, and improved the user experience to increase engagement on the homepage.
Leveraging the Curb Cut Effect
The curb-cut effect is a theory that by investing in the needs of the group with the highest challenges, the benefits cascade to all. By developing our system with accessibility at the forefront, we can create a better user experience for all of our users. The updated global styles improved the readability of relevant content to drive engagement goals of users completing 2+ HVAs month over month. The new color scheme achieved a 3:1 visual contrast ratio, exceeding WCAG 2.1 AAA standards. Metadata improved to be compatible with most screen readers.
The Outcome
New Market Opportunities
Over 75% of Birdsong Components achieved an AA WCAG rating for visual accessibility, ensuring ADA standards compliance and unlocking new market opportunities with government grantmakers.
Reduced Overhead to Go-To-Market Faster
Improved engineering collaboration led to a significant decrease in high-priority visual quality assurance issues, enabling teams to bring new features to market faster.
Leadership Development for Individual Contributors
Essential leadership experience for the Lead Product Designer, enabling them to lead the design process within their product team and expand their influence across the entire company.