Creating a design system from A to Z: personal experience (part 1)

Hi, my name is Viktor Zhytomyrskyi and I am the lead designer. This series of articles will be dedicated to how we work on our design system in our company. I hope it will be useful for you to learn about such an experience from the very beginning — from the birth of the idea. I will talk about the importance of a design system for company employees, why it is useful for them, and how it simplifies their work. I will not tell you HOW to create a design system from a technical point of view (enough has been written about this), but I will tell you WHAT to fill it with and WHY, in order to achieve maximum effect and simplify work.
‍

This article is for those who have not yet created such systems and want to understand the principle of their work and the value within the company. For those who understand the importance of a holistic approach to design. If you think that something can be done better / more efficiently / more reliably, write in the comments, I will be grateful and will try to improve this article for posterity :)

In this article, I will tell you:

How the need for a design system arose

Some context: my team is working on a product with a number of separate, independent websites where customers can learn about our services, place orders, and then manage their orders. The design of each of our sites is 90% unique (with the exception of some important funnel steps).

At a certain stage, we faced the problem of inconsistency in our approach to interface development. Working on design became increasingly difficult due to the rapidly growing number of sites. Styles and interface elements were becoming more and more numerous, and we went in search of an optimal solution for our situation.

There are not many ways out of the situation that has arisen, especially since the topic of design systems is very popular in the modern world, so finding a suitable way to implement what we had in mind was not difficult. However, there are several, albeit very similar, solutions to the problem, namely: UI Kit, Guideline, and the design system itself, which people often confuse. Let’s figure it out.

UI Kit — a set of interface elements (static, in any graphics editor) that make up the visual part of your product. This is everything you can see on the site: buttons, cards, various kinds of switchers, checkboxes, radio buttons, etc.

Guideline — a set of rules for working on the interface, described in textual format. Companies like Google with their design system material design describe their own approach to interface development in their guidelines. Anyone can use their components, so for such open frameworks (fully prepared component libraries in code), it is extremely important to describe the principles and rules of working with their components in accessible language.

Design system — a set of components (preferably in code) that combines the UI Kit (i.e., all the visual elements broken down into small interface details) and guideline, which describes the principles of interface operation, as well as the approach to product development. Google’s material design, described above, is a classic and most popular example of a design system.

We chose to build a design system based on the “atomic design” methodology, as it is essentially the most developed and well-described methodology. I want to dwell on this methodology in a little more detail:

Atomic design — in short, this is a methodology (principle and sequence of actions) by which a design system is built. Described by Brad Frost in 2013, this methodology divides interface elements into:

1. Atoms: Grid, typography, colors, icons
2. Molecules: Buttons, inputs, dropdowns, etc.
3. Organisms: Navbar/footer, product cards, etc.
4. Templates: Wireframe of a whole page with “lorem ipsum” content.
5. Pages: Fully designed page (for example, the current version of your website’s homepage with real content).
   ‍

In our case, it is important to provide a place for all marketing information and research results (if any): character maps, customer journey maps, brand mission descriptions (principles we follow and how we make the world a better place). This is not included in the official Atomic Design book, but it is necessary in our case, considering that people from different fields will be using our design system, and we need to take this into account.

There is also a brand book and corporate identity, but this is more about marketing, brand positioning, and promotional materials, and today we are talking about interfaces. However, if your company already has a brand book, you can use it to work on the visual language within the design system. This means describing how your interface will communicate with your customers, as well as examples of correct and incorrect use of certain interface elements, etc.
‍
Why did we choose a design system instead of a static UI Kit or creating a style guide? This is a more comprehensive approach that gives us the following advantages (I apologize in advance for some obvious points that have already been covered, but since I want the article to be understandable even for beginners, let’s list all the advantages we could find):

1. Accelerated feature rolloutWith the implementation of a design system, the designer stops worrying about the visual aspect of the product. Their main concern becomes the UX part of the task (or the entire page), and as a result, the speed of work increases since the designer uses ready-made visual components. They only need to format them in a user-friendly way. Additionally, if desired (or in an emergency situation, such as when all designers are unavailable), any employee in the company can assemble an MVP (minimum viable product) of their idea in a matter of minutes (okay, hours :)) and hand it over for development, and then, for example, for A/B testing.
2. Correctly naming each elementThe design system allows for teaching every employee the minimal understanding of how interface elements work and increases visual literacy (when you’ve seen so many interface variations that you can now distinguish good from bad). It also allows each employee to name design elements correctly (for example, nav bar ≠ header) and speak the same language. Believe me, many of your colleagues have no understanding of design terminology, and having a single source of truth to consult at any time will be useful for both parties. This simplifies the task of setting a design task for the designer, on the one hand, and understanding the task for the designer, on the other.
3. *Explanation of all elements (why they are needed and why they are designed that way)**Sometimes, when one of your colleagues asks you a tricky question like “why is this input designed this way,” you don’t have an answer because this element was chosen randomly, if not spontaneously (or it had some logic that was not documented anywhere and therefore forgotten) at some point to solve a specific task, and then it was simply copied to all projects. The design system allows you to understand the importance and necessity of each design element in the future by looking inside it. And when someone finds a better solution, for example, for a drop-down menu, we can replace it and describe why it is better and more valuable than the previous one.
4. Elements with the same logic and designDevelopers will no longer be frustrated with a new, just-invented, feature-rich drop-down that the designer came up with, the logic of which they just thought up, and which now needs to be implemented. Now all elements will be well thought out “on the shore,” and if we encounter a new problem in a certain component, we can improve it and update the master component, which, if desired, will change in all other places in our design. The behavior during component adaptation will also be thought out from the very beginning, which will make future work easier. You can even calculate the color arithmetically (more on this in the next article in the series).
5. Large number of sitesOur company supports and develops many independent sites with different designs but in the same topic. In this situation, it is necessary to structure the content so that the sites look different, but the structure of some important elements remains the same (for example, the navbar or the order form, which look the same on all sites but have different colors or content).
6. Design principlesOnce we have determined which design principles the company adheres to in the future, it will be much easier to discuss a particular interface element or make product decisions with clearly defined boundaries that cannot be crossed. For example, it may be strictly forbidden to use dark patterns in your design, such as a hidden unsubscribe function from a premium account, etc.
7. Reduced testing timeSince all interface elements will be specified in advance, testers will not have to clarify the operation of any interface element, and as a result, less time will be spent on testing.

Our design system will, on one hand, be intended for people who have no idea how design elements work and have never worked with such material before (such as marketers), who will use it for quick visualization of their ideas. On the other hand, it will be for people who know too much about it (developers). It is necessary to make it convenient for both, describe everything as accessible as possible, provide the opportunity to obtain this information in the most convenient way, and start using all of this without any questions.

We decided to start working on the design system with the user control panel, as the place where its benefits will be the greatest (selling landing pages are more subject to creative trends and the need to experiment).

Previously, we did not work with design systems, so the development process will be carried out in real time. Each new article will be released at the end of a certain stage of work on the design system.

We have planned the following stages:

1. Work on atoms (here it is also necessary to provide all marketing information, as described above)
2. Work on molecules and organisms
3. Development of templates and pages
4. Animation and microinteractions
5. Analytics. What and how to measure in the design system through Figma

Design Tool

Any well-known graphic editor in the design world can be used for developing a design system: Sketch, Adobe XD, even Photoshop. However, in our company, we chose Figma and here’s why:

1. Works on all OS. You can work on both Windows and Mac, in both browser tabs and desktop applications (there are still some problems with implementing the cursor on iPad OS, but I think this will be fixed soon, as more and more designers are switching from desktop to tablet devices).
2. Works through the cloud. There is no need to upload the document to the cloud every time, and every employee of the company always has access to the latest version of the file.
3. New features. The Figma team approaches the development of new features for their product very qualitatively. Many necessary options for the design community become available in Figma.
4. Figma Community. A base of free design resources right in Figma. It allows you to find and download many useful things, from design systems (or UI-KITs) to templates for UX research (such as user journey maps or templates for conducting design sprints).
5. Component library. This means that if you have a component library inside the team, any element from the library that you use in your layouts depends on the parent element in the library, and changing it in the source component will change it in all your projects.
6. Figma also has a built-in analytics system for design systems, where you can get a lot of useful statistics about the components used. If you’re interested, I can talk about it in subsequent articles.

*There is one disadvantage, which is that Figma does not allow sharing the component library (the entire design system) in the free plan (it only allows sharing styles, but not the components themselves (buttons, inputs, etc.)), and if you don’t plan to switch to a paid plan, you may lose convenience for those who will use it directly to create something new.

For a paid user, working on creating a layout will look something like what is shown in this video:
‍

But! In the free plan, any employee can always save a file with the design system and work by copying elements directly from it. Of course, this is less convenient, considering that this approach loses the advantage of linking to the parent file and any changes to the main file will have to be copied again, but this option performs the task just like the previous one.

Every design system should have a name, and we decided to name ours Excelsior — a Latin word meaning “ever upward.” It is also a type of chess problem where a pawn from its initial position moves step by step to become a queen. This description fits perfectly with our development strategy, so we settled on this name.

That’s all I wanted to share in this article. Thank you for taking the time to read it. This was the first part of a series in which I tried to formulate the general idea of the importance and necessity of developing design systems and a holistic approach to product design.

In the next article, I’m going to talk about working with the atoms of the design system. About the smallest parts of the interface on which all further development is based.

In Idealogic.Design we develop design systems, let’s discuss if you have an idea!