YRF Design System
Role: Lead Designer partnered with Visual Design
Project Type: Design System, Component Library
About the Project
The YMCA Retirement Fund had no design system when I joined as their first in-house designer. With outdated, hard-coded systems across both their consumer-facing website and internal customer service portal, the company was preparing to modernize their platforms and transition to a React front-end. This presented an ideal opportunity to build a scalable design system from the ground up that could serve multiple audiences and use cases while bridging the gap between YRF's traditional financial branding and the YMCA's more vibrant, approachable identity.
Establishing Design Direction Through Stakeholder Alignment
We brought on a visual design contractor to explore brand directions and build initial components, presenting multiple options ranging from formal to tech-forward to friendly. Through informal AB testing sessions with customer service representatives and leadership discussions, I facilitated alignment on design requirements that would shape our system strategy. The direction needed to bridge YRF's conservative "financial institution blue" with YMCA's bold, friendly palette while remaining flexible enough to accommodate both external and internal product needs.
Building for Accessibility and User Comfort
A critical insight emerged during internal testing: customer service reps who used these applications all day requested dark mode options and toned-down colors to reduce eye strain. This expanded our design system scope beyond typical consumer needs, requiring a token architecture that could support both light and dark themes while maintaining brand consistency. We chose a Material Design-inspired foundation that allowed us to scale responsively and move quickly, building out a comprehensive color system that worked across both modes.
Creating a Flexible, Scalable Component Library
The design system was built in Figma and implemented in Storybook to ensure design-development alignment during the React transition. The modular component library successfully powered both the reimagined customer service portal and the redesigned participant-facing retirement calculator, demonstrating the system's flexibility across internal and external use cases. The result was a cohesive, modern experience that maintained accessibility standards, supported both light and dark modes, and finally brought visual consistency to YRF's digital platforms while honoring both the YMCA's approachable brand and YRF's need for trustworthy, professional presentation.
Personal Reflection
This project taught me the value of early stakeholder engagement and testing—even informal sessions—in shaping design system strategy. My role was less about visual execution and more about facilitating alignment across teams with very different needs, from leadership concerned about brand consistency to Customer Service Reps requesting specific usability accommodations. Building a design system that could bridge legacy and modern designs while serving multiple audiences required constant balancing of competing priorities, and reinforced my belief that successful design systems are as much about governance and communication as they are about components and tokens.
YRF Design System
Role: Lead Designer partnered with Visual Design
Project Type: Design System, Component Library
About the Project
The YMCA Retirement Fund had no design system when I joined as their first in-house designer. With outdated, hard-coded systems across both their consumer-facing website and internal customer service portal, the company was preparing to modernize their platforms and transition to a React front-end. This presented an ideal opportunity to build a scalable design system from the ground up that could serve multiple audiences and use cases while bridging the gap between YRF's traditional financial branding and the YMCA's more vibrant, approachable identity.
Establishing Design Direction Through Stakeholder Alignment
We brought on a visual design contractor to explore brand directions and build initial components, presenting multiple options ranging from formal to tech-forward to friendly. Through informal AB testing sessions with customer service representatives and leadership discussions, I facilitated alignment on design requirements that would shape our system strategy. The direction needed to bridge YRF's conservative "financial institution blue" with YMCA's bold, friendly palette while remaining flexible enough to accommodate both external and internal product needs.
Building for Accessibility and User Comfort
A critical insight emerged during internal testing: customer service reps who used these applications all day requested dark mode options and toned-down colors to reduce eye strain. This expanded our design system scope beyond typical consumer needs, requiring a token architecture that could support both light and dark themes while maintaining brand consistency. We chose a Material Design-inspired foundation that allowed us to scale responsively and move quickly, building out a comprehensive color system that worked across both modes.
Creating a Flexible, Scalable Component Library
The design system was built in Figma and implemented in Storybook to ensure design-development alignment during the React transition. The modular component library successfully powered both the reimagined customer service portal and the redesigned participant-facing retirement calculator, demonstrating the system's flexibility across internal and external use cases. The result was a cohesive, modern experience that maintained accessibility standards, supported both light and dark modes, and finally brought visual consistency to YRF's digital platforms while honoring both the YMCA's approachable brand and YRF's need for trustworthy, professional presentation.
Personal Reflection
This project taught me the value of early stakeholder engagement and testing—even informal sessions—in shaping design system strategy. My role was less about visual execution and more about facilitating alignment across teams with very different needs, from leadership concerned about brand consistency to Customer Service Reps requesting specific usability accommodations. Building a design system that could bridge legacy and modern designs while serving multiple audiences required constant balancing of competing priorities, and reinforced my belief that successful design systems are as much about governance and communication as they are about components and tokens.
YRF Design System
Role: Lead Designer partnered with Visual Design
Project Type: Design System, Component Library
About the Project
The YMCA Retirement Fund had no design system when I joined as their first in-house designer. With outdated, hard-coded systems across both their consumer-facing website and internal customer service portal, the company was preparing to modernize their platforms and transition to a React front-end. This presented an ideal opportunity to build a scalable design system from the ground up that could serve multiple audiences and use cases while bridging the gap between YRF's traditional financial branding and the YMCA's more vibrant, approachable identity.
Establishing Design Direction Through Stakeholder Alignment
We brought on a visual design contractor to explore brand directions and build initial components, presenting multiple options ranging from formal to tech-forward to friendly. Through informal AB testing sessions with customer service representatives and leadership discussions, I facilitated alignment on design requirements that would shape our system strategy. The direction needed to bridge YRF's conservative "financial institution blue" with YMCA's bold, friendly palette while remaining flexible enough to accommodate both external and internal product needs.
Building for Accessibility and User Comfort
A critical insight emerged during internal testing: customer service reps who used these applications all day requested dark mode options and toned-down colors to reduce eye strain. This expanded our design system scope beyond typical consumer needs, requiring a token architecture that could support both light and dark themes while maintaining brand consistency. We chose a Material Design-inspired foundation that allowed us to scale responsively and move quickly, building out a comprehensive color system that worked across both modes.
Creating a Flexible, Scalable Component Library
The design system was built in Figma and implemented in Storybook to ensure design-development alignment during the React transition. The modular component library successfully powered both the reimagined customer service portal and the redesigned participant-facing retirement calculator, demonstrating the system's flexibility across internal and external use cases. The result was a cohesive, modern experience that maintained accessibility standards, supported both light and dark modes, and finally brought visual consistency to YRF's digital platforms while honoring both the YMCA's approachable brand and YRF's need for trustworthy, professional presentation.
Personal Reflection
This project taught me the value of early stakeholder engagement and testing—even informal sessions—in shaping design system strategy. My role was less about visual execution and more about facilitating alignment across teams with very different needs, from leadership concerned about brand consistency to Customer Service Reps requesting specific usability accommodations. Building a design system that could bridge legacy and modern designs while serving multiple audiences required constant balancing of competing priorities, and reinforced my belief that successful design systems are as much about governance and communication as they are about components and tokens.