This is a proposal that I've re-written for broader consumption but still encompasses examples used on a client project at M&S. The end users are staff or referred to by M&S as colleagues. I've replaced the context below with 'your company/business' and 'users'.

As part of ongoing efforts to improve user outcomes at 'your company', the design processes should be considered and structured moving forward. Building a framework that will help streamline design processes, ensure consistency across digital products, maintain good working practices between disciplines, and be considered for the Colleagues themselves.

Design System as a product

The team should spend a session looking into the Design System using a LEAN framework.

Value

In any organization, it's challenging (often) to prove the intrinsic value that great design brings to business. Some significant benefits of implementing and harnessing a design system are:

• Consistency
• Efficiency/Speed
• Usability
• Accessibility
  

“A design system is crucial to avoid usability issues and maintain brand consistency. Every designer is different, and so are their design decisions. If teams can create new elements and components at will, each iteration will look different across teams and departments.”

Challenges

Existing challenges within any company:

• Design resources
• Variation: Multiple products with multiple teams (sometimes more than one product in a group)
• Product Managers want to prototype quickly to test/prove ideas
• Applications or mediums are varied (Android, Web Apps, technology stacks)
• Existing design systems at different stages
• Implementation and marketing of the use/benefits of a design framework
• No baseline to measure the help of a design system (i.e. reduction in code, speed of feature release)
• Design systems are complex to maintain; they require constant iteration and attention
• Not one size fits all; a component may be significant for a mobile device but useless for a desktop browser.

How do we measure the success of a design system?

• Team efficiencies
• Speed to market
• Effect on code
• Can colleagues do stuff quicker?

Measuring the success of a design system can be challenging, but some key metrics to consider include adoption rate, efficiency gains, and consistency improvements. Additionally, gathering feedback from stakeholders and users can provide valuable insights into the impact of the design system.

To measure the adoption rate, we can track the number of users and teams that have adopted the design system and the frequency and depth of their usage. Efficiency gains can be measured by comparing the time and resources required to complete design tasks before and after the implementation of the design system. Consistency improvements can be evaluated by analyzing the level of consistency in design across digital products before and after the performance of the design system.

By monitoring these metrics and gathering feedback, we can continuously improve your design system and ensure it delivers value to your organization.

Proposed Approach

💡 I propose leveraging existing business design patterns and developing a user design language that can then be tokenised.

What are Design Tokens?

Design tokens are pre-defined variables representing design properties such as colour, typography, spacing, etc. These variables can be easily shared and reused across different design tools, allowing for more efficient and consistent design creation.

“Design tokens represent the small, repeated design decisions that make up a design system's visual style. Tokens replace static values, such as hex codes for color, with self-explanatory names.”

“Tokens enable a design system to have a single source of truth. They provide a kind of repository for recording and tracking style choices and changes.”

We can set these values in Figma. We can then export them into something easy to digest (such as JSON) that could be hosted on GitHub. These could then be ingested into any system and applied to any atom, component or organism within an existing or new library.

“When using tokens for design and implementation, style updates will propagate consistently through an entire product or suite of products.”

Here is an example of a plugin:

What does an example of a design token look like?

If we took a Material Design's approach:

A Material Design token consists of 2 parts:

1. A code-like name, such as md.ref.palette.secondary90
2. An associated value, such as #E8DEF8

The token's value can be one of several things: A colour, a typeface, a measurement, or even another pass.

Benefits of Using Design Tokens

Utilizing design tokens can reduce the time spent on manual design adjustments and ensure a consistent design language across all our digital products. Additionally, design tokens enable us to make global design changes quickly, making it easier to maintain the design system as your organization grows.

Proposed: User Design Foundations & Language

The benefits of doing this are:

• A separation of concern, components (in any system or product) can be detached and adapted with more flexibility
• Easier to maintain and can leverage existing patterns/structures that already exist, like Material design
• Developers don't have to open up a design tool

The proposed design framework will utilize design tokens to create a set of pre-defined styles that can be easily applied to digital products. This framework will include typography, colour, spacing, and other design property guidelines. Designers can quickly build new designs using these pre-defined styles, ensuring consistency across all digital products.

What does the Foundation and Language consist of?

Foundations:

• Accessibility
• Interaction
• Layout
• Content/style guide

Language:

• Colour
• Icons
• Shape
• Typography

Implementation Plan

To implement the design framework, we will first create a design token library containing all the necessary design property variables. We will then develop design guidelines incorporating these variables and ensuring consistency across all digital products.

It would then be the case to look at implementing the Design Tokens into a project we're close to, such as the existing Android Launcher. Then it would be an opportunity to get aligned with other stakeholders in the business.

Opportunity

I very much see this way of working to be of real benefit to users and the product teams in your business and as a way of working for all groups. Component libraries can exist, be changed or adapted and themed using Design Tokens for existing users or adapted existing libraries.