Design Systems Are Changing Everything And There’s no Going Back.

Most modern organizations that have spent any time focused on branding, and particularly those that have a digital presence have some kind of existing style guide. The existing guide is only used as a reference for our work, as we move into creating an updated style guide. Although it will include design elements, such as the pattern library, it goes much further, by providing design implementation guidelines, and, at times, a communications guide for public speaking and public document creation.

Typically a visual audit is conducted at the beginning of a design system build where we collect and document all the actual components of a client’s existing UI design. This process also helps weed out the elements that are not serving any vital functions. From this research, we then begin to rebuild a visual library of everything that will be included as part of the new design system and save them in our pattern library for future use.

A CSS framework is where design system truly takes flight. As the framework provides an actionable tool for clients to take our work and implement changes and updates to their digital projects independently. We always want our clients to go forward not needing anything from us other than basic maintenance. This fact separates professional creative agencies from those that are looking to keep clients on the hook from those that are attempting to set them up for success and freedom from unnecessary future payments.

Documentation is exactly as it sounds, but is possibly the most critical part of a successful design system, as great design is only as good as its effective implementation. If a developer does not know how to treat certain design elements, or if assumed functionality is not documented with clear instructions, it can lead to considerable re-work efforts and un-needed backtracking, which always impacts profitability and weakens the overall effectiveness of the design system.

Workflows can be as detailed or as simple as the project requires. There are design systems for large platforms that have done a great job of keeping things simple, such as Shopify’s “Polaris Design System.” In a nutshell, workflows are about mapping out individual tasks, such as replacing a video block and providing sequential instructions for each step in the process, and how to conduct a quality check to verify success.

Even small companies struggle with who sign’s off on what and when. When there are specific procedures written out for staff and everyone understands what is required before any change or action is approved the chance for success skyrockets and the likelihood of something sneaking through and going public with an error drops way, way down.