Make the most of your design system

As I wrote in my article last week, I think of design systems as orchestras. I covered what a design system is, what can go wrong, and gave three principles for making the most of yours:

1. Invest time and effort early – carefully craft the components of your design system to avoid systemic issues that are very difficult to put right later.
2. Keep things in tune – components may need maintenance, but consistency across the system and in its application is important, too.
3. Be mindful of the concert – good leadership demonstrates commitment, and is key to establishing quality and maintaining it.

Building a design system is an investment of your time and effort, which provides a number of benefits. However, it seems many organisations are not making the most of the opportunity that building a design system presents for making things more accessible and sustainable.

Let’s look at what the benefits of a good design system are and how those benefits can be used to effectively embed inclusion, accessibility, sustainability or anything else.

Benefit 1: Scalability

Design systems used to manage design at scale by creating reusable components and patterns. This makes them the perfect place to embed accessible and sustainable practices, getting these in place early so that they scale with everything else.

We mustn’t fall into the trap of stopping at visual design. How each component is built is as important as how it looks, establishing the basis for a consistent user experience. And this leads nicely on to…

Benefit 2: Consistency

Visually, we can use a design system to embed brand identity and style for a consistent user experience across multiple products and platforms. This is also the perfect opportunity to embed colour combinations, layouts and other visual treatments that are accessible.

Functionally, we can establish consistent behaviours in the components and design patterns. This is the best time for web developers to embed accessibility support, ensuring appropriate accessibility information is coded into components, and implementing the expected keyboard behaviours for them. Be sure to allow web developers time to embed these important aspects as it’ll save everyone time and effort later.

Operationally, a design system gives everyone in your organisation a common vocabulary for building digital products, reducing miscommunication and wasted time.

Benefit 3: Efficiency

Do good work once, and then let it scale. Design systems improved productivity, but embedding good practices and code efficiencies as early as possible saves effort and budget in the long term. Getting the important things right early avoids the accumulation of design debt and technical debt.

Ultimately, all this puts less pressure on design and development teams by giving teams across your organisation a toolkit that just works and educates them on what good looks like. With one team being responsible for maintaining the design system, you also centralise some of the specialist knowledge needed.

Benefit 4: Maintainability

A design system becomes a central resource and reference, and will be where future improvements can be made. This can streamline filtering those improvements into the products and platforms that are using the design system. If issues are identified over time, they can be fixed at source in less time and with less effort.

Be mindful to maintain the existing qualities of components when improvements are made. It’s important to avoid releasing accessibility barriers, usability issues, performance problems, and technical bugs when updates are rolled out.

Lead the way

As I suggested in the last article, leadership sets the tone for the work your organisation does, so plays a key role in effecting the change needed to improve quality. Good leadership should demonstrate the commitments made by the organisation, whether that’s about inclusion, accessibility, sustainability or anything else. Everyone, but particularly team members, need to understand that these things are a fundamental requirement in their work, helping to ensure that related work does not get deprioritised.

The earlier this is understood by everyone, the more effective it will be. Having timely conversations and the right information at the right time is key for achieving quality at scale. It’s important to keep the big picture in mind, and to understand the investment needed to produce high quality work and save patching things up later.

Good leaders will also establish ownership and accountability for considerations like inclusion, accessibility or sustainability. This makes sure that someone is championing commitments and raising these important considerations when work is discussed and actioned. As leaders and champions, these key roles connect dots, facilitate effective communication, and empower their team to effect change in their work by granting them the agency to do so.

Let’s make digital better

If this has got you thinking about your current work or an upcoming project, and you’d like some help, jump over to our website to arrange an informal chat.

Need help with your design system? Our accessible design reviews check over your design assets for accessibility or sustainability issues, whether it’s your design system, component library, style guides, wireframes, storyboards, or social media content. We’ll help you address any issues we find, and provide documentation to help maintain things moving forward.

Get in touch at [email protected] to find out more. Or check out the comments below for some other helpful resources.