Blueprint Design System
Streamline product design and development with ready-to-use
brand approved components, assets and patterns.
Designing a design system
When I joined the team, the design system was fragmented and outdated, causing inconsistency, confusion, and delivery delays. I led the effort to unify the system, creating a shared language across teams to improve scalability, usability, and collaboration. The new system enabled self-service, accelerated development, and aligned design with both user needs and business goals.
Impact
Speed
Ready to use accessible and responsive components
Quality
Improve UI consistency &
overall UX quality
Collaboration
Drive clean hand-off
between design & Dev
Quality
90% Consistency
design-code vqa
“It’s great to have Blueprint because it helps get things done faster and more consistently with other parts of MM. It’s the same reason folks would use something like Bootstrap – no reason to build something that already exists.”
Problem space
I started by auditing the existing library and conducting research by meeting with our primary users designers and developers to fully understand their pain points. The current state presented many issues – the design system was fragmented, undocumented, and difficult to scale, resulting in inconsistent user experiences, inefficient collaboration between design and engineering, and costly delays in product delivery.
Components lacked responsiveness, had missing variants, and were not built with implementation in mind, leading to frequent rework and a lack of trust in the system across teams.”
160 Buttons across two themes and multiple files.
Unresponsive layouts and misalignment with the grid.
Messy prop panels and unnecessary variants+ Lack of documentation
Lack of documentation
The solution
Unified and rebuilt our design system to enable self-service capabilities and accelerate delivery. Introduce governance and processes, fully document all components, align design and code, create accessible system that meets WCAG accessibility guidelines.
End-to-end process
I’ve worked with a range of design frameworks from Double Diamond and Design Thinking to Lean UX and I’ve learned that no single methodology fits every challenge. The most successful outcomes in my experience have come from blending approaches and adapting mindsets based on the product stage, user needs, and team dynamics.
Research
Meet with designers + developers to understand their pain points.
Synthesis
Identify themes + blockers and turn them into actionable goals.
Strategy + Solution
Align with stakeholders on goals and plan out the roadmap
Brainstorm + Build
Governance, design, prototype, iterate and document final designs
Collaborate
Constant contact with team to help with implementation
Action Plan
Governance
Library Architecture
Ways of Working
Results
Launched a unified, responsive design system with clear guidelines and full variant support. This project also gave me a deeper appreciation for the power of cross-functional collaboration and systems thinking.
