Design Systems
Standardising Design Documentation
Scroll ↓
Intro
I identified a pressing need to standardise design documentation for new contributions to our design system. This initiative aimed to ensure consistency, clarity, and efficiency in how new components and patterns were documented, facilitating better collaboration between designers and developers and improving the overall quality of the design system.
Initial Phases
Research and Exploration:
Audited existing documentation practices across the design and development teams.
Interviewed designers and developers to understand their pain points and requirements regarding documentation.
Collaboration:
Worked closely with designers to adopt the new documentation standards for their contributions to the design system.
Facilitated workshops and training sessions to educate the team on the importance of consistent documentation and how to use the new template effectively.
Working to integrate the new documentation process into sprint teams' workflows, ensuring it was part of the regular design and development cycle.
Design Process:
Developed a standardised documentation template that included sections for component naming, properties, usage guidelines, visual specifications, interaction states, & accessibility considerations.
Created example documentation for several existing components to serve as a reference for future contributions.
Created helper sheets for designers to use within their design process.
Created helper sheets for design system designers to guide them through our process. This ensures consistency in our documentation.
Development and Handover:
Currently collaborating with the development team to integrate the documentation template into our existing design system repository, using Storybook and Figma.
We will be ensuring the documentation is accessible and easily updatable by both designers and developers.
Key Issues Addressed and KPIs
Key Issues
Aesthetics: We enhanced the visual consistency of documentation and improved the clarity and readability of documentation, making it easier for users to find and understand the information they need.
Structure Logic: Organised documentation systematically, with clear sections and a logical flow, ensuring all necessary information was included and easy to navigate.
Component Mechanics: We detail the mechanics of each component, including interaction states, behavior under different conditions, and integration points with other components. We also address edge cases and off-pattern components by including specific guidelines for documenting these scenarios.
KPIs
Increased Usability: The process led to a reduction in designer developer handover & design/QA review time,
Increased Revenue: By streamlining the design and development process, the improved documentation contributed to faster product releases. Increases our team efficiency and increases revenue indirectly.