Lessons: Creating 3 Design Systems

Thousands of design tokens explored, hundreds of components built and rebuilt and countless refactors as I've learned better ways to do things.
Lessons Learnt

Creating a design system can be challenging, but it's essential for creating a consistent user experience and streamlining the design and development process. Here are some key learnings from my experience building multiple design systems that can help you create a successful one.

Build the minimum

As product designers, we understand the importance of creating a design system that looks great and functions seamlessly. However, starting a design system from scratch can be a daunting task.

That's why it's crucial to begin with the bare minimum. Essential elements required to produce a coherent user experience. Doing so lets you ship the first screens and get your design system off the ground. Rather than attempting to create everything at once and getting bogged down in details, starting with the minimum allows for iteration and gradually adding additional elements as needed.

Relevant meme.

It's common for designers to kickstart their design system with a button component. While this may seem like a logical starting point, it may not necessarily significantly impact the project. Instead, take the time to identify the one component that will solve a problem or save time in a feature's development. This targeted approach will maximise delivery output and value while keeping stakeholders satisfied.

Repeat messaging until you’re sick of it

Creating a design system is about designing the elements and communicating the approach to the team and stakeholders. Repeating the messaging is vital until everyone is on board and understands the system.

This means explaining the design choices' reasoning and the system's benefits. Previously I've used Slack or internal social networks to share updates from the design system team and to gather feedback. But I've also tried sharing updates via email every other month; some colleagues mentioned this was the only email they enjoyed reading.

An excerpt from a sharing session I ran.

When you're sick of hearing yourself repeat a message, it must be finally sticking with your audience. Repeat your design principles, reiterate the goals and continue to share the design system's mission for maximum support.

Use a collaborative tool with versioning

A tool for easy collaboration and versioning is crucial when creating a design system (Figma, anyone?). This means more than one designers can contribute to the design system simultaneously and see real-time changes.

Additionally, the versioning feature will let designers keep track of previous versions and quickly revert to an older version if needed. Anyone can jump in and create a branch, ensuring any governance models explicit.

A very simple governance model I devised at Shell.

If your team wants to create branches with alternative approaches, you're free to move with confidence that your original work is unaffected. These smaller, more frequent tests mean the team can run design spikes and determine a great outcome and justify why it's better than other approaches explored.

Build for re-building (and re-use)

One of the most important things to remember when creating a design system is to build it with the future in mind. This means creating a flexible system to adapt to changes and updates as the product evolves over time. In other words, build for re-building (and re-use).

Approach the design system with modularity in mind. Each component and element should be designed and built with the understanding that it may need to be re-used or adapted in the future. This means creating a consistent naming convention and style guide for each element to ensure they are easily identifiable and can be easily modified.

An excerpt from my presentation on design system blueprints.

Another critical aspect of building for re-building is to document everything thoroughly. This includes detailed instructions on how to use each component and element and guidelines for modifying or updating them in the future. This documentation should be easily accessible and regularly updated as the design system evolves.

By building a design system with flexibility and re-use in mind, product designers can create a system that can adapt and evolve with the product over time, ultimately saving time and effort in the long run.

Photo series: Sky

For years now, I've been capturing gradients in the sky. Straight from iPhone—no editing.

Trend: Huge Headlines

They go edge-to-edge and throw anything Dieter Rams has said (about how to introduce your brand) out the window.

Brief History: Design Tokens

Design decisions, translated into data—design tokens are the source of truth to unify and maintain design at scale.