2024
Design System
Structuring The Foundation
In a Nutshell
What I Did
I led the migration of our design system documentation from static Figma frames to a more accessible platform, ensuring better alignment between design and development.
Who I Worked with
As the project's sole contributor, I worked closely with the CPO and designers, establishing a structured documentation process through iterative feedback.
The Challenge
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.
I identified 3 primary issues of the current design system documentation:
🧩 Elusive
Navigating through a canvas-based design tool to locate relevant text can be challenging.
With the expanding design system and increasing team size, locating the appropriate reference within Figma frames can be time-consuming.
Even when the information exists within Figma, it can be difficult to locate if it's not properly organized or if rules have not been formally defined.
💥 Unwieldy
Maintaining extensive text-based content within a design tool can be inefficient.
🌪️ 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.
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
Outcome
We've successfully established a streamlined, template-based system for documenting our design system. This approach simplifies the process of migrating components, as demonstrated by the successful integration of our complex Data Table.
With its step-by-step guidelines, makes migrating subsequent components faster and easier. By successfully migrating the largest and most crucial component, we've set a precedent for future migrations.
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 a 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.