Lessons Learned Building Culture Amp’s Design System

  • Introducing the Kaizen Design System
  • Storybook is not only for developers
  • Branch previews transform workflows
  • Internal open source increases shared ownership
  • Tokens are the building blocks of design systems
  • Effective versioning and releasing is critical to accelerating engineering
  • Shared language reduces the hidden costs of conversations
  • Stand on the shoulders of giants to fast-track learning
  • Naming things is hard

Introducing the Kaizen Design System

Kaizen homepage shows a visual overview to Guidelines, Language, and Components. Primary navigation also links to Storybook.
Our design system integrates design guidelines, language, and components.

Kaizen (“improvement”) is a Japanese business philosophy that focuses on continuous improvement. This is how we see our design system: an ever-evolving language that can be shaped, grown and nurtured to support how we work, and enhance our customers’ experience.

  • Kaizen Site: public documentation site
  • Kaizen UI Kit: Figma assets
  • Kaizen Component Library: code assets including React and Elm components, draft and core library packages, design tokens and hosted assets, such as binary images.

Storybook is not only for developers

Kaizen Site lists every storybook story and shows the React Informative Empty State component.
We can search our stories by “React” or “Elm”.

Give everyone visibility

“I trust it, something about code I trust more. When it’s a picture in Figma, will it actually turn out like that?”

Animation of 4 stacked toast notifications that slide in from the side and down to separate.
Don’t forget to design for more than 1 notification 😱

Visible, named components surface discrepancies in understanding

Reliable visual regression testing lets you release visual changes faster

Branch previews transform workflows

GitHub checks show branch preview, Moai, and buildkite.
Every PR has an automatic link to its branch preview, which designers can access.

It’s cheaper to fix design problems earlier in the process

Greater context leads to higher quality output

Effective remote working practices create more inclusive products and workplaces

Put designers in the driver’s seat

Internal open source increases shared ownership

The power of the crowd

Merged Kaizen Issue on GitHub shows a new favicon.
I cannot tell you how much satisfaction adding a favicon brought me.

Tokens are the building blocks of design systems

Color sticker sheet in Figma shows Kaizen brand colors.
WCAG friendly colors make things so much easier.

Maximise reuse

Reduce hidden costs

Build once and distribute

Animation tokens standardise easing functions and durations for consistent brand motion.

Roll out brand changes easily

Effective versioning and releasing is critical to accelerating engineering

Streamline versioning and releasing

Shared language reduces the hidden costs of conversations

  • What shade of blue is that?
  • Where’s the logo file in SVG?
  • How many pixels is the padding?
  • Is this a new button? Are we updating all the buttons?
Hidden cost of conversation: 30 min per day * 250 days per year * $30 / hour * 27 designers & developers = $101,000 per year.
Conversations cost enough to hire a design systems team.

Stand on the shoulders of giants to fast-track learning

There’s no need to reinvent the wheel

The effect of every decision in a design system is multiplied

Naming things is hard

Validate names before shipping

Modal component page on Kaizen Site. The Modal is also known as: Modal window, Dialog, Pop up, Alert, Lightbox, Overlay.
Which component do you suppose has the most naming variations?

Avoid “type” and “variant”

Search engine optimise component names

Figma search for “pop up” shows Modal results. The Modal description includes alternative names, such as “pop up”.
For the record, I despise pop ups.

Onwards and upwards

About Diana MacDonald

--

--

--

Author of Practical UI Patterns for Design Systems. Creator of Typey Type for Stenographers. Data Viz Engineer.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

How to give Google Maps a custom look on your website

People Can’t Use Designs They Can’t Afford — The Reckoning (Part 1 of 2)

The Correlation Between Cinema and UX Design

Reframing Things: “and”

Realtime Photoshop-style “curves” using shaders

Four of the best platforms for online events in 2021

How To Make A Dating App Like T

Accessibility on Emory University’s Campus

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Diana MacDonald

Diana MacDonald

Author of Practical UI Patterns for Design Systems. Creator of Typey Type for Stenographers. Data Viz Engineer.

More from Medium

Design Systems London Goes Online

What’s in a component library?

Design system: How to build a library?

How we built Matcha, Segment’s design system