USER INTERFACE DESIGN | DESIGN SYSTEM MANAGEMENT AND DOCUMENTATION
Worked with the UX director and developer to build a design system extension (DSe) for the new configurable dashboard feature. I built the design system structure based on Material design comprehensive documentation that includes usage, best practices, anatomy, behavior, specs, states, and measurement.
The Challenge
The existing design system only contains specs. There are no clear guidelines for designers and developers to follow to maintain consistency and accuracy. Also, we constantly repeat components from project to project with the style changing each time to fit functionality.
The Solution
• Create a structure that can be applied to the design system foundation.
• Build a library of reusable components that can be shared with designers.
• Use Axure widget styles to manage component look and feel that can be applied to multiple components.
The Benefits
• The DSe is a single source to view components, patterns, and styles.
• Ability to replicate designs quickly with pre-made components and styles with DRY (Don’t repeat yourself) principles.
• Reduce the need to reinvent the wheel and eliminate inconsistency.
• The component feature design and documentation in the DSe provide a seamless workflow between designers and developers.
• The DSe can be used as an ongoing reference and guide by the UX team.
The Approach
Research
• Researched design system principles such as Atomic design principles and best practices from existing ones such as Material design system, Carbon design system, and Polaris Design system.
• Understanding the purpose and principles of the design system and finding the pros and cons of successful design systems helped me define the structure of the design system extension.
Define and Ideation
• Follows the 8pt system to help the design system be more responsive and anti-aliasing.
• Design system is more than a style guide. Each component should include usage, atonomy, behaviors, measurement, accessibility, responsiveness, etc., that provide guidelines for both designers and developers.
• Collecting feedback from peer reviews to ensure the design system is simple, scalable, and understandable by designers and developers.
Prototype
• The system should be scalable and be used by multiple users. Building a component library and applying widget styling in Axure is essential to maintain a sustainable workflow.
The Next Step
• Accessibility: Collaborate with an in-house accessibility specialist for 508 considerations. The accessibility documentation in the DSe should help developers understand how screen readers use and navigate each component. Additionally, adding accessibility at the beginning will avoid 508 errors that might occur later.
• Token system: collaborate with the front-end developer to build a token system that can be shared with the developer team to save time on manual adjustment, as well as maintain consistency across the platforms.
• Growth and maintenance: the design system is a living system that requires team members to update and grow actively. The goal is to ensure we present a common design language that is familiar and consistent for anyone interacting with it.
