Tetris graphic with Design System components.

Making Design Systems Work for your Team

Design systems can educate team members, streamline work, and enable designers to tackle complex UX problems with ease.


SHARE THIS

By Darcie Hart

“Our design system isn’t our UI kit or our style guide. It’s the shared language we have when we talk about our work.” Kyle Peatt — Director of UX for Polaris, Shopify’s Design System

A successful design system will raise the overall quality of projects while creating a consistent experience for users. Creating a design system can seem like a straightforward task, and yet the majority of design systems end up failing. According to the 2021 Design Systems Survey only 40% of design systems were successful that year. Why do some design systems succeed while most fail?

What Is a Design System?

A design system is a comprehensive guide to an organisation’s brand, anchored by the UI and visual components. The design system contains all the assets that have been created throughout a project’s lifecycle and are used to guide future designs. By establishing a shared language and consistent style, teams can reduce build times and focus their energy on ideation and innovation.

However, uniformly-styled UI components are just one part of a design system. Design systems are also a way of formalising the design language around an organisation’s UI while providing tools and resources to designers and developers. They are a combination of design patterns, components, styles, and tools supported with clear documentation and often real code. Successful design systems are created as much for developers as for designers. They are not just about making sure the logo, typefaces, and colours are consistent across platforms, but ensuring the entire user experience is consistent and recognisable. This is accomplished through centralising the visual language of an organisation that can be applied across all touchpoints.

A common misconception is that a component library is the same as a design system. The idea that there should be a unified system of design principles and patterns for building good products is often misunderstood. In practice, design systems require more than just a well-built component library. Ideally they should also include implementation guidelines, general design principles, page layout guides, content guidelines, and design rationales. The best design systems also demand changes in an organisation’s culture, processes, and management. Organisations need to commit to the implementation and ongoing management of their design system, continuously communicating its importance and gathering input across all business functions.

While almost any project of reasonable scale can include a component library, usually only large teams in well-established organisations create fully comprehensive design systems. Many such comprehensive large-scale design systems are fully accessible on the web with full documentation, component examples, and code snippets for various frameworks. Prominent examples are Google’s Material.io, Microsoft’s Fluent Design, IBM’s Carbon, and Atlassian. At a smaller organisation it can be more challenging to create a full design system. Yet creating a bespoke design system for a SME’s specific needs can be a worthwhile investment. A great benefit of a design system is that it can fit your organisation’s current needs while also scaling as business grows.

Benefits of a Design System

  • Quality and Consistency — Design systems are a means to ensure consistency. They improve communication between teams, making sure products look and feel unified across channels and platforms. This brings a level of professionalism to your product, ensuring clients and users feel your product is safe and trustworthy.
  • Simplicity and Speed — Design systems help to complete routine design tasks faster, so more time can be dedicated to ideation and experimentation. It aligns designers to a shared vision and increases the speed of design and development.
  • Quickly Onboard New Team Members — A design system can be an effective education tool ensuring consistency from new team members, junior-level designers, and content contributors. It can be a comprehensive guide defining basics, practices, and guidelines for the UI, while serving as an ongoing source of reference.
  • Space for Collaboration — Successful design systems are created collaboratively. Designers, developers, and other stakeholders (internal and external) work together to establish an optimal process for collaboration so that all parties’ needs are met. Effective design systems encourage better communication and documentation across product life cycles encouraging input and a sense of ownership across the broader team.

Pitfalls of a Design System

  • The ‘one-size-fits-all’ approach — While it is important to understand all the elements within a design system, it’s even more important to understand what your organisation needs from it. One common mistake is choosing a popular design system and assuming it will fit your specific needs. Every organisation has different priorities and understanding those differences is crucial. A design system can be a significant asset to any organisation and should be built to support the needs of all stakeholders including (but not limited to) designers, engineers, product managers, sales & marketing, and operations. As a design system evolves, changes need to be sense-checked with this broader group to ensure that all needs continue to be met.
  • ‘No room for creativity’ — Organisations can think too rigidly, not allowing for organic growth and change needed for a successful system that supports effective product and service design. Design systems that are too rigid cause designers to waste valuable time trying to work around the system. A good design system will help designers focus on making iterative improvements, speed up internal communications, reduce time wasted in meetings, and free designers to experiment with new concepts.
  • Lack of long-term commitment — Design systems can go out of date and feel stale. They are a powerful way to build consistent experiences, but flexibility and ongoing updates are needed to facilitate changes in technology and in the market environment. Creating and maintaining an effective design system requires the collaboration of the entire team, frequent iteration and maintenance, along with ongoing support from experienced designers. It is a living artefact that needs to evolve over time.
  • Focusing on a single channel — Design systems need to consider all potential user touchpoints. In some cases a design system may focus on consumer-facing websites that may contain larger fonts, spacings, sizable graphic elements, and such that may not be appropriate for utilitarian application UI’s that can be data-dense and have complex task scenarios. Likewise, design systems that only focus on the utilitarian functionality of an application may not meet an organisation’s marketing needs.

Key considerations for creating a successful design system

  • Customise: If you are integrating an already established design system into your organisation, it is important to know how it maps onto your organisation’s specific needs. Every organisation has different requirements and limitations and a well-designed system should be customised to answer those needs. At Frontend.com we have created large, complex design systems for clients such as the Irish Government that support multiple touchpoints, channels and development teams. At the same time, we have also developed bespoke systems for smaller internal teams who wish to improve consistency and efficiencies. The key to a successful design system is one that meets your exact needs and which is practical to maintain.
  • Integrate flexibility: Balance the need to create a consistent framework with the flexibility to change over time and meet unforeseen applications. At Frontend.com we build frameworks that enable our clients to create better products faster, making sure to not to limit design and development teams. We focus on modularity and extensibility, ensuring that each design system can change and grow over time. Also, we don’t lock down a design system too early in our process — it is important that we apply it across a range of projects and systems to identify and rectify shortcomings.
  • Regular reviews: A Design System is a living artefact that should support business and operational needs on an ongoing basis. A successful design system is more than a polished, finished product, rather it exists as a series of conversations about how an organisation wants to build its products and services, with the intention of making sure everyone is on the same page. It’s important to get comfortable with the fact that a design system will never be “done” as perfection is not possible — instead, embrace imperfections and evolve.

Conclusion

A design system is conceptualised and designed as a set of reusable UI elements that are flexible, well-documented, versioned, and maintained. It reduces the time and cost needed to build UX designs by reducing the amount of rework at the implementation level. Teams can use the design system to create consistency across projects, while freeing up time for testing and refinement.

Poorly implemented design systems can result in unwieldy collections of components and code that can impede rather than support design and development teams — and ultimately undermine products or services. When implemented well, design systems can educate team members, streamline work, and enable designers to tackle complex UX problems with ease. But they need to be maintained on an ongoing basis — supporting the one constant in life, change.

Get In Touch

If you find the ideas we have explored in this article to be interesting and relevant to your corporation then contact Fiona Murphy, our expert on this topic. Our team of experts will help you shape the correct central visual language for your organisation and create a bespoke design system that works for you and your varied needs.



SHARE THIS