Managing Quality in UI Design Systems

Organizations are increasingly turning to user interface design systems - collections of design standards and reusable UI components - to improve the quality of their user experience while increasing team productivity at scale. Using a design system, your teams can create and manage a consistent set of components that any application can import and use. Ideally, when you enhance the visual design or behavior of a component, it only needs to be changed in the design system, and the changes will be automatically reflected everywhere the component has been used. What a dream!

Manage Risk with a Strong Design System Foundation

While working with design systems can be transformative in many ways, it won’t happen overnight, and there are challenges and risks. For example, it can be challenging to get buy-in from team members who value the flexibility associated with crafting bespoke components in their projects. Likewise, the impact of defects in the system is multiplied by reuse, so we need to tread very carefully in introducing changes to design system frameworks such as Material UI, Bootstrap, etc,. 

Finally, if you have an existing application, replacing components with those of the new design system takes effort, and you run the risk of introducing defects or breaking tests in the transition. In replacing an existing checkbox with a shared toggle component, for example, we can run into CSS styling that needs to be unwound and automated tests that need to be updated to work with the new type of component. 

Best Practices From The Mabl Team

The mabl team has implemented our design system and works with many customers endeavoring to do the same. Along the way, we’ve learned some valuable lessons that will help you improve the quality of your design system implementation.  

• Invest in a UI sandbox: Ensure that all team members have ready access to an environment where components and changes can be easily viewed, tested, and inspected. If you’re using modern frameworks such as ReactJS or Vue, Storybook.js makes this easy. In the sandbox, make sure you’re mocking various use cases and states, including both successes and errors.
• Build new components and variants in the design system first: Rather than building each component or variant in their respective pages, start the process in the design system and take advantage of the sandbox (see #1) to support rapid iteration and testing. Avoid the pain of adding debug lines and/or hacking the local build to generate an error condition just to see how your component will respond.
• If possible, don’t build everything from scratch: Starting with tools like Material UI, Bootstrap, can reduce the likelihood of component-level defects, and will generally follow accessibility best practices out of the box. This enables you to avoid the complexity of worrying about defects in CSS transitions, click targets, hover states, drop-down overlays, and much more. 
• Think about the stories each component in the system will need to support: As you build support for each story, ensure that you have corresponding unit test coverage, including effective mocking, and that the same mocks can be used in your UI sandbox. Providing support for the right stories will help you and your team minimize customization and overrides in downstream projects. Allow the component APIs to satisfy the stories, rather than relying on CSS rules or inline styles.
• Account for testability: Ensure that your components include unique selectors that are aligned to the user-facing attributes. Rather than relying on generated IDs, for example, consider using aria labels and other attributes that change less frequently. This will enable functional and unit testing, help minimize test maintenance, and even improve the accessibility of your application. 

Set the Stage for Quality User Experiences at Scale

In the end, design systems are the best starting point for building quality throughout your user interface. By investing in a sandbox, taking a design system-first approach, starting with an open source UI library, you’ll make it even easier for teams to rapidly build and evolve standard components. By investing more upfront to cover relevant stories and test coverage, you’ll deliver higher-quality user experiences with less maintenance over time.