Content ecosystem map
Visualizing the connections between design system assets.
Challenge
When design system assets don’t have parity between design and code tools, usability and adoption suffers.
When I joined a design system team with a library of over 100 components, I quickly noticed that there was inconsistent details about components across different tools and mediums.
What was a “Banner” in Figma was a “Banner Notification” in Storybook.
According to designs, an accordion included “open” and “closed” states, but in code, those same states were “expanded” and “collapsed.”
Small discrepancies like these tend to compound within design systems. Since a primary system purpose is to establish a shared source of truth among design and development, maintaining parity within nuanced details needed a more scalable process.
Aligning terminology in a way that’s clear to different disciplines can be complex, but is necessary if we want to streamline collaboration and communication.
Understanding
Once I chatted more with both designers and developers to understand how each side approached documentation and maintenance, I discovered it often relied on the component and which team member was doing the work.
Conceptually, everyone shared similar perspectives in terms of what the system was aiming to convey to product teams, but there was little to represent that on paper.
Since designers and developers primarily authored what was most relevant to their own disciplines, there was less emphasis on how it got conveyed as a cohesive whole.
As components evolved, maintenance became more time-consuming and there uncertainty grew when it came to the source of truth.
How I helped
A content ecosystem map helped others on my team visualize the relationships between the different tools we were supporting.
One of the biggest values of content maps is often the collaboration that’s required to generate one. They help to surface the nuanced details that connect a design language across design and code.
They become reusable blueprints that outline the purpose for different types of information that can then be standardized within a template.
For example, a component description may be defined as a single sentence that summarizes what the component helps users do in the UI.
in their development came in collaborating with others to review it and iterate based on their perspectives.
The artifact doubled as a visual showcase the complex problems that the design system was solving for every component.
the pieces of content between docs, code, and design assets.
I visualized how The map became a reference as we evolved the system and added more components.
