2024
Reconstruct The Foundation to v2.0
Design System
In a Nutshell
What I Did
I led the migration of our design system documentation from static Figma frames to a more accessible platform for better alignment between design and development.
I Worked with
As the project's sole contributor, I worked closely with the CPO, designers, and engineers establishing a structured documentation process through iterative feedback.
Outcome
200% Adoption and Engagement
Designers and engineers are not only happy with this version, but it ignites a strong collaboration and meaningful conversions between the teams, from "Where can I find…?" to "How can we improve …? "
Improved Design Consistency
The updated system reinforces visual and UX alignment across products by providing standardized behaviors and documentation templates, reducing design drift.
Increased Development Efficiency
Clear, component- and pattern- driven documentation accelerates implementation and reduces rework, leading to faster development cycles.
Scalable Governance
A templated system lays the groundwork for consistent updates, contribution workflows, and easier scaling across teams and platforms.
Context
For years, in our product team Slack channel, we constantly have questions like "Do you know if we have rules for this component somewhere?" or "Where can I find the detail about this component?" from both designers and developers. A lot of times the answer is there in our Figma frames.
Pain Points
I identified 3 primary issues of the current design system documentation:
Elusive
It was difficult to navigate through a canvas-based design tool to locate relevant information.
With the expanding design system and increasing team size, locating the appropriate reference within Figma frames can be time-consuming.
Inconsistent
The inconsistent explanations and unstructured content within our documentation contribute to the difficulty of finding relevant information. This lack of predictability makes it challenging to locate the desired information, especially when searching for common patterns in component behavior explanations.
Unwieldy
Maintaining extensive text-based content within a design tool can be inefficient.
The Challenge
How might we improve the structure of our documentation for better navigation and consistency for all components?
The Explorations
I conducted a comprehensive analysis of prominent design systems such as Material Design, Atlassian, IBM Carbon, Adobe Spectrum, I identified common patterns in content structure and carefully selected the most relevant patterns to incorporate into Block Aero's structure.
Let's go!
Exploration #1
One-Size-Fits-All
👉 The idea:
Create a single structure that is generic and flexible for all components.
🧑🔬 Testing Results:
Worked well with complex components.
Did not work with simple components. ❌
Exploration #2
Simplified
👉 The idea:
Adjust Exploration #1 to accommodate simple components.
🚩 The Issues:
While the options seem clear to me, other team members might struggle to decide between the options.
Others might choose the wrong options or mix them incorrectly.
This inconsistency could make the product less user-friendly.
Exploration #3
Granular
👉 The idea:
Break down content structures into four distinct options to accommodate component complexity while maintaining consistency.
🔑 Key Points:
Centralized Sections: One section for each content structure per component.
Within Each Type: Individual content structures for each type within a component.
🚩 The Issue:
Too many options, even with guidelines, could lead to confusion.
Exploration #4
Templates ✨
👉 The idea:
Narrow down the content structure options to three templates based on component complexity.
🥳 The Outcome:
A simplified and effective approach. To align the understanding between designers, I made glossary list of definition too.
❇️ Benefits:
Flexibility for growth and improvement
Maintenance of core concept
Simplified design process
Ensured consistency and clarity across the product
Learnings
Context is The Key
Design systems vary widely based on context and complexity. While what works for others may not be directly applicable to another, there are fundamental concepts that can be shared and adapted to create effective design systems tailored to your unique needs.
One-Size Might Not Fit All
A simple solution doesn't have to be a one-size-fits-all approach. Iterative testing and simplification can help manage complex documentation projects.
Define Shared Language
Focus on designing for others, establishing a shared language to foster effective collaboration.
Clear Goals
Having clear goals help you make better decisions and keep the design aligns with the overall objectives.