Hack the design system - book pills

Disclaimer ⚠️
Listed below are some of the parts of the book that I found interesting and useful, but I encourage anybody interested in the topic to get the book and read through all the chapter for a more in depth understanding.

———————————————————————————————————————————-

Getting started with design system

At ideas, when it comes to defining a design system in depth, we say that a design system is a living system of guidelines, reusable code and design assets, and tools that helps organisations deliver consistent, on-brand experiences at scale and over time. 

(Hack the design system)

Most typically, design system are built, used and maintained by product teams.

The main benefits of a design system are:

• Deliver strong brand identity across all the touch points

• Enable change in work culture

• Save time and money

• increase consistency 

• Decrease maintenance

• Facilitate communication

• Improve user experience through well-defined and learned behaviour

A comprehensive design system should contain:

• Principle and goals

• Brand identity assets

• Functional patterns (design and code)

• Guidelines for UX, UI and tech

• Tools (UI Kit, pattern library and more)

• Examples of best practices

A design system is more powerful than it appears. It’s like a Trojan horse going into a big organisation to ignite cultural change. 

Jordan Fisher, Design Director at Idean.

Who should be involved in a design system initiative?

Product and service organisations
The people that create and manage products and services need to work together so the system can make it out into the real world. 

Senior level staff and end users
What goes into the system should be validated by either those who lead design system initiative or the final decision maker. There might be more people supporting the final product 

Brand
It’s not just about the core brand assets. If we don’t have a holistic understanding of the desired brand perception and internal audience, it’s hard to translate internal definitions across all the different touch-points accurately.

Five stages in the life of a design system

For the system curator

• Research and getting initial buy-in

• Making it through the first months: building solid starting points while testing them early and often

• Ensuring early-stage adoption and growth

• Broadening the scope and making it more stable

• Balancing major releases and smaller updates to the shared assets and rituals

For the makers leveraging the system

• First potential advocates and partner units engaged in the philosophy and objectives

• Primary Users learning more about the principles and getting the first glimpse of what it might mean in practise

• Early success raise interest, as well as questions, suggestions, and worries; more people and units become involved

• Changes start to appear in t more products and services, leveraging the system to varying degrees

• New initiatives and changes begin to roll in as time and energy are freed up

Jeoff Wilks, IBM on how to get started building a design system:

“Look we have this design system that only one or two people have initially created, but the teams theatre using it are seeing results. They see an acceleration in their development cycle, and they see a lot better quart in the user experience”. Those are the two metrics that you need to move the needle on.

The ultimate value of consistency

Increased usability and accessibility

When teams are moving fast, it’s the final finishes and in some cases the basic requirements to meet demands that then to suffer.
With reusable components at hand, teams don’t have to start from scratch each time. This means that a share of usability and accessibility issues have been solved.

Solution, instead of individual products and services

There’s a special benefit when establishing consistency for companies that serve the same customers and end users white multiple products and services. A design system helps product teams focus not just on their use cases but their customer’s whole relationship with the parent brand. There are often recurring interactions and steps that customers expect to start the same.

For customers and end users this kind of uniformity can range from the products and services merely being more intuitive to use, all the way to opting for a suite of products because their onboarding costs are lower.

Stronger, more premium brand

A brand that is consistent with its standards of quart in its products and services is more trustworthy of this with its strong focus on craft.
Design systems help raise the bar for what good design looks like in an organisation.

How do design systems ultimately help us reach better quality?

• We have more time to craft individual components, but also spend more time finessing products and services.

• We have a systemic way to continuously iterate on our components as we learn from three actual usage in different contexts

• We can ensure accessibility and legibility on a system level through colour and type tokens

• We can systematise delightful micro interactions through patterns, rules and components, and we have more time to build and test them.

Workshop:

Highlighting inconsistencies in user experience is an efficient way to showcase the need for a design system.

• Prepare a shared inventory deck

• Add slides for various types of UI elements

• Include a few bullet points of guidance: eg, images of current, live products

• Invite everyone to contribute to the inventory

• Store a copy of the deck

• Rerun the exercise after a few months to see any changes

Hayley Hughes on accessibility:

It’s important for us to encourages teams to use system components and create variations of them as opposed to coding already existing components from scratch. Design tokens and theme enable variety without sacrificing consistency. We support teams building brand new components from scratch, and those are brought back into the system through a contribution model. Helping teams understand the difference between a variation and a brand new component is critical because accessibility and performance regressions increase when believe coding everything from scratch is faster than making variations in the system. 

Actively inviting debates of ”what’s good”

Make tools, not rules:

• Philosophy and principles define a shared direction, not the solution

• Shared components and styles are best served with a clear purpose and some built in flexibility

• Documentation makes it possible to provide insights that are hard to derive from the assets aline, but it’s soon discarded if it doesn’t serve the Neds of busy practitioners

• Discussions and hands-on practise are often more effective for onboarding than any documentation on its own

Establish the means to showcase your success:

“We know metrics are important, but…”

Measuring the absolute impact of a design system seems difficult, We’ve identified a number of reasons why this might be so:

• Prioritization: There are several, potential benefits as aspects to pick from (especially if you’re an advocate).

• Built-in delays: The design system needs some solid groundwork as well as a series of roll-outs for the benefits to be felt as seen more widely. 

• Scale: Most design system projects are ambitious. There’s a tendency to think “Wait, we haven’t reached this and that milestone yet…”

• Origins: As the name suggests, design system grew from a broad discipline. While this might be changing, designers haven’t traditionally been trained on metrics and impact assessment at higher organisational level.

• No benchmark: There are no ready-set sources for it. If there is no established benchmark to compare measures against, it’s harder to get the data in the first place. It’s harder to say whether to what degree a result is good or concerning.

• Multiple stakeholders: Everyone values different things at different levels. When it comes to more specific goals, in particular, it’s good to keep actively listening to what contributors and stakeholders value the most. 

What makes work engaging for creatives?

Creative people love to solve problems. From Cisco Guzman’s point of view, the best design systems are flexible and straightforward. They bring people together, provide the building blocks, and then encourage designers to solve problems contextually using those building blocks.  

What about the future?

The benefit of a design system align well with what Guzman has in mind: “The real power behind design system is that it will allow designers to focus on the more central questions: how is this business or service or product that I’m designing bringing value to someone’s life? How am I keeping my customers needs in the centre of everything I’m doing?”

Taking product portfolio management into account

It’s easy to assume that a design system should apply 100% to everything an organisation produce. After all, this would provide maximum uniformity and efficiency. In practice, this often proves impossible. It also begs the question to understand both the current and future offerings. 

Finding the right approach for each

The more widely used and the more future-proof something is, the sooner it needs to be considered by the design system. In particular, this applies to the UI foundations, service patterns, supported frameworks and platforms, tools specific UI assets and variants or any other outputs that are tied to a particular medium.

This way what is provided by the system fits the needs for most, if not all, teams leveraging the system in their daily work. 

In practice there will be a good deal more considerations at play other than current adoption and expected lifecycle, including the definition of “sufficient alignment”.

For example, in the early stages of a design system, running a pilot with early adopters and champions, wherever those might be found, can bridge the way to the business critical cases. With adoption well underway, demands for the design system might grow faster than the rate at which high quality, validate assets can fit well together and have a clear purpose to be reasonably produced. 

Overtime time, there will be a need to depreciate and kill some aspects that were supported before.