Could you benefit from a design system?

Are you struggling to manage a website that has grown out of control and become difficult to maintain? Is your user interface chaotic, rather than calm? If so, a design system might just be the solution for you!"A design system is the single source of truth for all your digital communications""A design system unites product teams around a common visual language. It reduces design debt, accelerates the design process, and builds bridges between teams working in concert to bring products to life”.“Design systems provide a convenient, centralised, and evolving map of a brand’s known product territories with directional pointers to help you explore new regions.”

Design systems have been rising in popularity in recent times and it's easy to see why. With the proliferation of digital channels - covering everything from websites to voice applications - it is more important than ever that your organisation can provide a cohesive voice and consistent experience throughout your web estate.

As organisations grow, the needs of your website can change too. New features can get bolted on, while older functionality can become outdated as standards change. Many sites find that the user experience can become fractured over the years, as inconsistencies start to appear across channels and touch-points. This is referred to as design debt.

A design system will not only ensure your brand maintains consistency, but it will also keep your budget on track and your end-users happy. What's not to love?

What is a design system?

At its core, a design system is a catalogue of reusable interface components (such as buttons, links, and tabs) that help bring consistency to your websites and digital products. Think of them as the building blocks to your website. They are then given meaning and standardisation through a set of design principles, guidelines, philosophies, and code.

Broken down even more, a design system will often consist of:

• 'Styles' –a set of guidelines for applying layouts, typography, and imagery. 
• 'Components' – reusable parts of the user interface, such as buttons and text fields; and
• 'Patterns' – best practice design solutions, consisting of several components arranged in a particular order around specific user-focused tasks (i.e. filling in a form).

While the corporate website remains the source of truth for content and messaging, the job of a design system is to unite product teams around a common visual language.

What are the benefits of a design system?

We've established what a design system is, but why do we need one? Let's take a look at some of the benefits:

A consistent user experience

For companies both big and small, delivering a consistent design and user experience across multiple channels is essential for building brand loyalty. In larger organisations, sites are usually built and maintained by different teams, which can lead to a fragmented user experience and an inconsistent look and feel. By defining your digital assets in a centralised system and supporting them with a set of guidelines, you can ensure your users are having exactly the same experience – wherever they are and no matter what device they're using.

Save time and money

Design systems enable teams to build better products faster by ensuring design elements are reusable. In other words, you can avoid repeating work that's already been done. Reusable components will not only keep costs down, but will also ensure designers and developers have the time and resources to deliver the products that really matter. Furthermore, you are free to add new patterns to the design system, ready to be reused and shared by others.

Encourage collaboration

It can be difficult to manage design in larger organisations. Teams often consist of diverse people and skillsets, working across multiple locations. A design system can help align team members with a single source of truth, allowing designers and developers to collaborate and hit the ground running.

Larger companies will often make their design system public. This not only shows off best practice examples, but also makes things easier when collaborating with external partners.

By Marco Suarez, Jina Anne, Katie Sylor-Miller, Diana Mounter, and Roy Stanfield (Design Systems Handbook) 

Keeping it agile

In a world that is constantly changing, it is important to move fast. A design system will keep you agile and grow and evolve alongside your business needs. They are also lightweight when compared to full CMS-sites, which facilitates faster testing, allowing you to prototype fast, test results, and gather data.

When modules are coded in the same way, it becomes much easier for developers to work with someone else’s code, as they can now refer back to the design system. Furthermore, when changes are made, they are done in one central location. That’s how design systems can stay lightweight when compared to full CMS sites. Additionally, when changes are made, they will naturally filter down as the application automatically inherits these improvements.

Chris Messina, tech evangelist and former Developer Experience Lead at Uber

Set high standards from the beginning

Web accessibility is concerned with making the web open to everyone, enabling people with disabilities to participate equally on the web, and removing the barriers that prevent interaction with websites.

Every component within a design system should be optimised for users with disabilities, visual impairments, or slow-internet speeds. They should also be fully compliant with W3C standards. Reusable components built with accessibility in mind improve usability for all users and can even help with SEO.

A design system will also contain documentation best practice ensuring you can be confident of hitting the highest of standards (from colour contrast to text size).

Are you ready?

If you're a large organisation, it can be fairly easy to build a business case for a design system. However, if you are a start-up or work in a small team, you might just need a style guide and not a full-blown design system. In either case, if your business is growing and you find yourself struggling with a site that has grown out of control or become difficult to maintain, get in touch and we can work out the right solution for your business needs. Starting a design system can feel daunting but the benefits are simply too good to ignore.

Inspiration? 

Want to explore some examples with a a good design system? Look no further and click the links below:

Mailchimp patterns  

Google Material Design

Gov.uk design system

Salesforce Lightning Design System 

... and if you want to deep dive into design systems, we suggest reading Smashing Mag Book.