I have always been passionate about design systems. At Widen, I led the redesign of the design system and established processes for its ongoing maintenance.
Strategy
At the start of the redesign process, I collaborated with two front-end developers to establish our design system's purpose, principles, and component standards.
I also identified a need for better transparency in the design system updates across the company and a need for consistent copy throughout the application. We expanded our team to include a product manager and a content strategist to fill those gaps.
At the start of the redesign process, I collaborated with two front-end developers to establish our design system's purpose, principles, and component standards.
I also identified a need for better transparency in the design system updates across the company and a need for consistent copy throughout the application. We expanded our team to include a product manager and a content strategist to fill those gaps.
Left image shows defined component standards.
Right image shows design system principles.
Left image outlines our design system navigation.
Right image is an accessibility page.
Navigation
We designed our first-tier navigation to accommodate high-level information such as purpose, styles, and accessibility.
We designed our first-tier navigation to accommodate high-level information such as purpose, styles, and accessibility.
Component template
We developed our component page templates based on the needs of our developers, designers, product managers, and our defined component standards. Our final template includes:
• Component status
• Component purpose
• Quick access to change log
• Best practices for using the component
• Interactive components and variations
• Live code that can be easily copied
• Accessibility guidelines and helpful tips
• Copy considerations
• Quick links for sharing
We developed our component page templates based on the needs of our developers, designers, product managers, and our defined component standards. Our final template includes:
• Component status
• Component purpose
• Quick access to change log
• Best practices for using the component
• Interactive components and variations
• Live code that can be easily copied
• Accessibility guidelines and helpful tips
• Copy considerations
• Quick links for sharing
Image of a component template in use.
Top left image shows Jira board.
Bottom left image shows a design brief.
Right image shows our process for creating and updating components.
Maintenance
The final stage of the redesign was establishing a defined process for creating and updating components.
The final stage of the redesign was establishing a defined process for creating and updating components.
We outlined each step and created a design brief to help define the problem statement that the component update or creation solves.
We also have regular grooming sessions to review the Jira board and track current and upcoming work.