System blueprint
Established to support diverse business roadmaps.
Duration
4 months (2024)
Team
Experience Design
Product Management
Web Development
Role
Product Designer
Tools
Figma
Jira
Confluence
Goal
Design a future-proof blueprint for the Suzy Design System to support the consistent and efficient design for diverse projects.
Challenges
⚡
Balance immediate needs with long-term integrity
Designing a scalable system that addresses the immediate demands while ensuring the system's structural and aesthetic integrity remains intact over time.
🕸️
Streamline collaboration in a complex ecosystem
Streamline system architecture to reduce maintenance uncertainty and user navigation friction.
Solution
I designed a layered design system blueprint to support both legacy and innovation projects, benefiting a team of 13 designers. This architecture accelerated development cycles while ensuring long-term product consistency. By aligning the blueprint with the product architecture familiar to the team, I streamlined collaboration and enhanced efficiency across projects.
%
Acceleration in time-to-market
%
Design system dependency
%
Components discoverability
/5
Team satisfaction
Scroll down for full story
Objective
Establish the Suzy Design System framework from scratch to enhance workflow efficiency and ensure consistent design across diverse business tracks.
Learn what we need
Strategic alignment
2 Project tracks
Innovations
Prioritize Proof of Concept delivery, ensure alpha release includes more consistent design.
Focus on rapid iteration and adaptability during early stages.
Legacy improvements
Emphasize modular and page design consistency across features.
2 Keywords
Integrity
Ensure system integrity by aligning both tracks, supporting team collaboration.
Scalability
Design scalable assets with reusable components to support long-term continuous refinement across projects.
Demanded assets
I summarized strategic alignment insights with assimilative research on matured design systems to sort out elements we needed.
Define how to implement
1️⃣
HMW design blueprint assets that effectively support both legacy improvements and innovation projects, while fostering holistic consistency?
Standardize reusable patterns to unify legacy and innovation tracks.
2️⃣
HMW structure the blueprint in the design file to make it intuitive and efficient for designers to adopt?
Collaborate with stakeholders to align on a shared design file structure.
Establish the system
Module abstraction
We conducted a platform-wide audit to identify reusable patterns. I defined two module types: Universal modules, simple but versatile for immediate use in both legacy and innovation projects; Feature-specific modules to refine existing patterns for legacy improvements. This approach maximizes shared assets to build scalable foundations, fostering consistency across projects while addressing unique feature needs, aligning with both immediate requirements and long-term goals.
Assets organization
I conducted workshops with design system consumers to map and organize assets in Figma, integrating assets smoothly in existing working files, aligning the setup with Suzy’s product structure. This improved asset utilization efficiency, XFN collaboration, and enabled scalable blueprint growth.
Blueprint
Framework
The blueprint framework equips designers with hierarchical, consistent and versatile assets, enabling efficient design across diverse product types while supporting scalability through the 80/20 rule.
Organization and distribution
I organized the blueprint assets to allow design system consumers to prioritize different elements as needed—accelerating delivery for innovation projects focused on idea exploration while enhancing holistic consistency for legacy projects.
Outcome
Assist product development
The blueprint became the backbone of Suzy's product development, achieving 100% design system adoption across all products. By incorporating user feedback and scaling with project needs, I streamlined collaboration, saved the product team significant time, and ensured more consistent and cohesive product offerings.
I'm thrilled with the blueprint—it’s streamlined our workflow by eliminating redundant nuances between similar features. It’s brought consistency, reduced workload, and allowed us to focus on building with a more holistic approach to product development.
-Brock P., Creative Technologist
Learnings and reflection
Clear vision promote targeted outcomes: Establishing a well-defined objective ensures right-to-point solution.
Success built accumulatively: No perfect solution came with one shot, success came from iterative approach refined by constant absorbing feedback from peers.
