Reut Levi Katzav
UX/UI designer

Creating a Design System step by step

Creating a Design System step by step

The Goal

I joined Britannica (manages training, scheduling and operational readiness) as an outside consultant on behalf of ED&U Studio.

The existing system is complicated and built many years ago, required to be updated to today's standards.

The goal of the project is to update the company's design language, to create design alignment in all parts of the system. My job was to teach the management, developers and designers how to build a design system and how to work with it and slowly release it for the ongoing work.

Creating a Design System step by step

So, how do we get started?

Understanding needs and interviews

The first thing I did was figure out what they were expecting to get from the Design System? What purpose do they want her to serve?

When I approached the project, I thought I should create a design system only for the design team. But, after several conversations with the management I realised that it is important for them to involve both the development team and the UX research in the documentation.

Creating a Design System step by step

This was very important information, according to which we will have to choose a system that will provide a solution for documenting and synchronising the development and research materials

Creating a Design System step by step

Come Together. Right Now.

What exists? And how does each team work?

To understand in more depth what exists in the system and what each element looks like today, I requested a full review of the elements in the system.

Here is an example from the documentation document of the existing system:

We agreed together with the design and management team that we will upgrade the existing design while maintaining contact with the brand and the old system so as not to cause a change too far from the existing visibility.

At the same time, I built a presentation that reviews the various tools that address their needs. 

The process of choosing the tool to work with took longer than I thought, because it was necessary to put the UI components, UX notes and code in one place. It required me to have conversations with the developer, UX team and the UI team to understand their way of working. Each team works on a different system, from which elements need to be extracted to document the work.

After examining both systems I think Zeroheight is more convenient to use and sync. But, since the company already had a subscription to Confluence and most of the teams were already working with it, it was decided to use it for documentation.

Creating a Design System step by step

The Grass Is Always Greener (on the other side)

The next step was to gather inspiration from big companies that published their design system.

I learned a lot from every company we researched its design system. But, it is important to understand that even if a large and impressive company works in a certain way it is not certain that this will be true for our company.

This is an example of some of the design systems we built together with the design team:

Example from the new design system

Example from the new design system

Growing pains

In the construction process, there is hesitation about what to put in and how.

One of the reasons I got into the project is that the design team couldn’t build the design system along with the ongoing work. Therefore, I built the foundation of the design system. I went into details and supported the design team with the start of their work with the Design System.

Creating a Design System step by step

It took time to implement a correct work process. With a lot of patience and collaboration, we realized together how most convenient and appropriate for the team to work.

Creating a Design System step by step

It's alive!

Once you understand that a design system is not a file that remains static, you understand that it needs to be maintained all the time.

To be able to navigate the document we built a page with links to each topic in Design System. In addition, I reinforced the order and organization at the beginning in parallel with the work of the designers.

After passing the baton to the head of the team she continued the order and organization of the system together with the designers.

How did he grow so fast? Just yesterday he was a baby

I'm glad to hear the update from the team leader that the Design System has grown and working. I was glad that it helps the design team in their work and that it is used by them in their daily work.

To my delight, the Design System has grown and improved thanks to the faithful work of the design team.