By Jeff Tudor

As companies shift from a project-specific mentality to a more cohesive customer experience view when it comes to their digital product offerings, design systems are playing a more imperative role than ever. But the road to successfully implementing and evolving a design system across the enterprise can be riddled with potholes. At TandemSeven, we have helped organizations of different sizes across a variety of industries navigate the path of initially creating and then maintaining and growing their digital design systems.

While no two organizations are the same, there are some common best practices that can ensure that the design system put in place is sustainable and able to evolve over time. In this multi-series blog, we’ll break these best practices out among the following three areas:

  1. Creating and Establishing the Design System
  2. Communicating the Design System
  3. Evolving the Design System

Before we tackle that, we need to clearly define a design system, and the role it can play within your digital product offerings. Design systems can take on different meanings depending on how narrowly or broadly an organization views it. The audience for consuming a design system has grown from the initial group of designers and developers to encompass an ever-wider ranging set of roles: product managers, business analysts, quality assurance testing, outside vendors and more. As a result, the first steps to rolling out a successful design system is a shared understanding of what it is and the value it can provide.

What is a Design System?

At its core, a design system is a combination of:

  1. A collection of reusable digital assets (such as components, patterns, templates, icons, typographical hierarchies) that are generically defined enough so they can transcend their specificity within use for a specific application or project.
  2. A set of high-level design principles that clearly coalesce the design thinking and provide guidance for the proper use of those assets.

At TandemSeven, we refer to that collection of re-usable digital assets as an Interactive Style Guide. The Interactive Style Guides that we have delivered for our clients contain working examples of design elements, components, and layouts that comprise the application user interface. The front-end code (HTML, CSS, JavaScript) is validated and tested across targeted browsers and devices, and it can be leveraged for production environments.

Think of it as a means of deploying a design system, but within a living, breathing digital repository where updates are propagated globally – and automatically – that support heterogeneous types of content.

Include Design Thinking and Direction

A well-defined design system will ensure proper use of these digital assets. A portion of the overall design system should explain the design thinking and the rationale behind it, and it should contain the metadata surrounding the digital assets. This often takes the form of things like:

  • High-level design principles
  • Tactical design tenets
  • Specific rules regarding implementation philosophy

Making The Design System Complete

Depending on the breadth and maturity of your organization, the design system can also be expanded to encompass more wide-ranging concepts related to your specific user experience program, such as:

  • Journey Maps
  • Personas
  • Vision
  • Process documentation
  • Standard research methodologies
  • Measurement Best Practices
Journey Maps Help to Provide Focus & Direction

Journey Map Pain Points Help to Provide Focus & Direction

The combination of the Interactive Style Guide and the Design Thinking behind it serves as the backbone of the design system. Together, they will act as both a repository of these standard application building blocks as well as a communication tool focused on spreading a common understanding of the design thinking that serves as the foundation for the design system.

Value of Design Systems

Successful digital companies that are deeply committed to the use of design systems as a business will derive value from them in a number of ways:

The number one benefit afforded by implementing an organization-wide design system is reusability. Components, patterns and templates are designed, developed and tested once and then get reused across projects.

From a User Experience standpoint, patterns of interactions that are consistent across the suite of applications throughout the organization, as well as across different devices and channels, provide more accepting and engaging experiences. User confusion is minimized by limited or non-existent variability in terms of solving similar or even identical issues across channels or applications.

Cost Reduction
There are pretty significant cost savings to be gained by integrating a design system into your digital product development process. Re-use of designed, developed, tested components consistently across project have proven to save time and money.

Time Savings
The consistency afforded by a design system also impacts time required for delivery of new application development. Designers don’t have to spend time each project re-imagining common interactions; instead, they can pull from a library of pre-defined solutions that have been vetted and fit within the established design principles. Developers can use pre-written code for established components instead of writing each component or patter from scratch. Testing can get simplified by using previously tested units of code. Overall, the benefits of having a single source of truth across an organization allows for faster alignment and less re-work.

A design system includes high-level principles and tactical design tenets that act as “guardrails” for design and development. Understanding the “why” behind the design ensures that people across projects and roles are moving in the same direction throughout the organization.

Summing it up

As you have read, design systems for your enterprise can be an extremely valuable asset.   Cost savings,  speedier time to delivery, more consistent and improved experiences along with providing your design and development team’s a single source for both design direction and approved digital assets.   Investing the time and effort up front in developing and subsequently maintaining, evolving and governing the design system are all essential to ensuring that your user experience teams are spending more time creating great experiences with a solid foundation and less time thinking about completely new design directions and components for each and every project.

In the next blog “Creating and Establishing a Design System”, we’ll tackle some of the challenges that arise when trying to get a design system up and running, including:

  1. The best way to create a design system
  2. Establishing a core design system team
  3. Key components of the design system

Related Posts