Design system
Increasing Efficiency and Time to Market
15%
Increase in developer Efficiency
Design System vs Component Library
For Affluent, a design system became essential for scalability and brand consistency, addressing developer inefficiencies while reducing costs. Unlike a basic component library, it delivered tailored solutions that streamlined workflows and supported long-term business growth.
Pros, Cons, and the Bigger Picture
Design System
Component Library
Expected Outcome
Upfront Effort
Requires time and resources to build but offers long-term efficiency and adaptability.
Components
When I began laying the foundation for our design system, my priority was creating a streamlined component library to help our developers hit the ground running. I simplified the library to include just two size variables and three color styles, ensuring easier implementation and consistent design. Since mobile wasn’t the primary focus, I concentrated on optimizing components on web.
Structure
Affluent's initial framework relied on work from previous designers, without long-term consideration for patterns and key UI elements. There were too many variables across multiple pages which resulted huge inconsistencies. Laying out guidelines and repeatable rules was key to organizing the systems better.
Tokens
Future merger plans for Affluent required its features to integrate with Impact, making it essential to prepare for cross-platform compatibility. To support developers and plan ahead, I began tokenizing colors, styles, and borders for components. Inspiration was taken from Shopify's design system.
From the Devs’ Perspective
Token structure was vital for our developers, so their feedback shaped the structure of our tokens. Multiple iterations and continuous input were critical to refining the system.
WCAG Standards
When I defined our component library, it became clear that many components didn’t meet WCAG AA guidelines. Translating the brand’s style colors into functional, accessible components often wasn’t feasible, requiring an expanded palette to meet the criteria. I led multiple stakeholder meetings to approve the updated colors, advocating for greater accessibility across the platform—a challenging but essential effort.
While I wasn't able to tackle accessibility across the entire platform, I was able to transform and get stakeholder approval for more than 50% of our active and most used components.
