Content design in design systems
Currency Design System
Background
Content designers who work in design systems are at a powerful intersection. Their mind for consistency and terminology meets a bird's-eye-view of the system. If empowered, content can bring really amazing things to the table.
Working on M&T's Currency Design System, I used content strategy and design principles to propose and implement changes to our CSS class names. Ultimately, this created a more predictable and intuitive experience for our dev users.
What I did
Document standards
Creating content about the design system (like onboarding guides) gave me a solid understanding of how the system works. In turn, it allowed me to hone in on inconsistencies with content in the system, like our CSS class names.
I'd documented our BEM (Block, Element, Modifier) naming standards, so I could quickly spot when a new component was breaking our own rule.
Our naming conventions were as follows:
Blocks represent a component that can exist independently
Elements represent a part of a component that can't exist independently
Modifiers represent a change to a block or element, like a different appearance or state
Identify and resolve discrepancies
When documenting the error state of the text field component, I noticed some areas for improvement.
The error state of the text field implemented naming patterns that didn't align with Currency's defined standards.
I took to a whiteboard to tease out the inconsistencies with the naming, suggest a proposal, and detail follow up questions.
Then, I digitized the problem and my proposal, along with a rationale, to share with the lead engineer.
Separately, I also recommended renaming the text field component to text input. The design system already had an input field pattern. Creating more of a distinction between a text input and an input field would allow people to navigate the system more quickly.
The result was an adoption of both proposals for a more seamless and intuitive implementation of the design system.