Forward-thinking organisations are investing in “design systems” to ensure digital channels are consistent, reflect brand guidelines and are fully optimised for great customer experiences. But once you’ve created a website based on your design system how do you ensure it stays consistent and on-brand? In this post we’ll explore how Sitemorse can help your digital channels remain true to your design system.

What is a design system?

A design system is a site or a repository that provides access to visual assets, design guidelines, a pattern library, page components, code snippets and sometimes content guidelines that help front-end developers, interface designers and other digital professionals work to design consistent user interfaces across digital channels and products. The design system can sometimes be used by those designing content too. By housing common guidelines, assetsand code, the design system helps maintain the value and integrity of digital channels, supporting strong user experiences.

An example of a design system is that provided by the Government Digital Service (GDS).This contains detailed style guidelines as well details of components and patterns, with relative code. The design system helps ensure different government websites all conform to the same standards and deliver a similar user experience.

Design systems not only ensure consistency but also help save considerable time, using code that has already been tested and works together with other assets. It also provides guidance on how to use components, patterns and other elements, giving the context that is sometimes lacking in similar sites.

Like the GDS example, most design systems should be accessible by third parties. This means an organisation can work with a design agency, UX specialists or freelance front-end developers to ensure they are meeting the right standards.

How Sitemorse helps

Although newly developed sites will conform to your design system when first created, inevitably as more changes are made to your site this might not always be the case. Sitemorse is a powerful enginue that has they capability to support compliance with the guidelines stipulated in your design system. For example, Sitemorse can:

• check for accessibility compliance (WCAG 2.1 guidelines) 
• ensure that particular images and assets are being used
• use preferred brand names, terminology and phrases.  

Your design system also contains optimal code. Sitemorse automatically assesses for the performance of pages, so can spot where there are issues with rogue code which may have been causing performance issues and may deviate from the code in your design system. Because automated assessment is regular and ongoing, issues are spotted as they emerge and then dealt with quickly by the right people.

Another key advantage of Sitemorse is that because assessment is remote, it can be easily pointed towards any channel. If you have a website that is meant to adhere to the standards in your design system, but it is managed by a third party, you are able to run the same tests on these that you would run on your own website. You can also run the tests across a new site developed by an agency that has yet to be launched. Just knowing that you are actively testing a website will also encourage other digital teams to comply with your guidelines.

Occasionally you will need to adjust the design guidelines in your system. When this happens, you can leverage Sitemorse’s flexibility to easily change your criteria for automated testing. In turn this can help you to identify the changes you need to make across your entire digital footprint, helping to align digital channels with your design system.

A strong investment

Design systems are introduced to help ensure a consistent, high quality user experience. If you’re investing in a design system, then investing in Sitemorse is also a logical step. While Sitemorse can’t ensure 100% compliance, it can go a long way to support the aims of your design system on an ongoing basis, keeping your sites compliant, improving and delivering strong customer experiences.  If you’d like more information about how Sitemorse can help you, then please get in touch.