Building a Shared Language (Project BFF)
I built a platform-agnostic, CSS-based design system from the ground up to unify a fragmented product suite. This project details how I established the architecture and components that scaled across our entire ecosystem, drastically simplifying the handoff between design and engineering.
Design System Screens
We built the system using Atomic Design principles to ensure every component was modular, reusable, and logically structured. This allowed us to scale the interface rapidly while maintaining total visual consistency across both platforms.
Atoms
Molecules
Organisms
Design System Code
I architected the system using pure CSS and SASS, intentionally avoiding JavaScript dependencies to ensure it remained truly platform-agnostic. This allowed the system to be seamlessly integrated into any technical stack without the friction of framework requirements or version conflicts. I utilized the BEM naming convention for predictable and consistent patterns when utilized in code.
Design System in Action
Design Project Framework
We developed a design process that kept us aligned on where we should be, and what deliverables were required at each step of the process.
My Role
Design, Code, Strategy, and Facilitation
My Contributions
- Cross-Functional Alignment: Secured buy-in from Engineering, Product, and Marketing by demonstrating how a unified system would accelerate our development cycles.
- Systems Architecture: Designed the core component library and coded the front-end framework to ensure the system was platform-agnostic and easy for engineers to adopt.
- Operational Strategy: Established a new cross-functional design process, turning a complex acquisition into a streamlined, collaborative workflow.