How to implement a design system? 10 important steps

Some time ago I explained what a design system is and why it is worth considering. Unexpectedly, it turned out that the new reality provided many new arguments. Since having such a library becomes obvious, I suggest how to implement a design system – where to start and how to prepare the whole organization for this project.

Our experience in creating design systems for various companies shows that the implementation of this type of library brings savings of up to 80% of developers’ time. It is also appreciated as a significant reduction of time to market and the ability to maintain consistency of systems, applications and websites created by different departments. Aren’t these arguments enough to push design system in your organization?

Check out Amethyst – Design System that we have developed for Grant Thornton International.

 

Of course, like any large project that involves different teams and departments, design system implementation also needs good preparation and a proper strategy. So if you are wondering where to start, this text will provide you with some specific information and help you make initial decisions.

How to implement a design system – why haste is not a good advisor?

There have already been many articles about how building a design system brings unquestionable value to the company and is a guarantee of savings. However, before the organization can start reaping the benefits, it needs to invest. Sometimes, the tempting vision of optimizing design processes and standardizing interfaces blinds decision-makers to the real capabilities of their teams.

 

The desire to keep up with trends and build your own repository often comes with imposing a high pace of work and reducing lead times. Even if you “put up” your library at a dizzying pace, neglecting the preparatory activities – analyzing the existing ecosystem, educating the team or developing a strategy for building and development, unfortunately, increases the risk of burning out company resources.

What should you think about before you seriously start implementing a system design?

I’ve prepared a list of issues that you should consider before you start building a design system, most of them are observations from everyday work of EDISONDA team. We have already done quite a few of such collaborations and for some organizations we accompany them on a permanent basis while creating, implementing and developing design systems. So what is worth remembering?

1. Design System or UI library?

Consider whether your product needs a real design system, or whether a UI library will suffice. UI library may be enough if you care about consistency, but the product you are working on is not very complex. Creating a set of components and visual elements can be a starting point for building a full design systems when you, as a company, are ready for it.

2. Make sure you gain knowledge about creating and functioning of design systems

You can do this yourself or work with a field expert. When you become familiar with the issue and current trends in atomic design, it will be much easier for you to assess whether a potential subcontractor or your team has the right attitude and knowledge to implement a design system.

3. Make sure your organization has the right resources

When you review the basics, you will see that building a design system is a long-term, iterative endeavor. It requires the involvement of people with different skills. If your organization is large, you may need to create a dedicated team to create, develop and maintain the UI library. The team’s responsibilities may include providing consultation to other teams or training.

Marcin Kręcioch w zarządzie ITCorner

4. Appoint a person responsible for establishing and developing the system design in your organization

The success of the project depends largely on whether the person responsible for the design system is able to take care of its structure, development and right governance. This often involves making strategic decisions and having access to an appropriate budget.

Remember that the main distinction of the design system should be its accessibility and usefulness across the whole organization (from the design/UX department, through developers, marketing and PR, internal communication and HR, to administration). The person who will take responsibility for coordinating the project should be able to talk and collaborate across organizational silos.

5. Collect all necessary materials and analyze artifacts

When you start implementing system design you start building a single source of truth, and your goal is to improve the quality and efficiency of work of many different teams in the company. Consider what knowledge the design team should have at the start. If you have user data, brandbook, styleguide, design documentation, list of all products and services that will be affected by the design system, make sure they are well analyzed and used while creating the strategy. Remember to talk to the people who work with the products on a daily basis. If their needs are well addressed, the design system will be used and the project will be profitable. These are important KPIs!

According to the Research State of Design Systems 2020 report, the three most popular artifacts that organizations start building design systems with are:

  1. Icon Library (84%)
  2. UI Kit (83%)
  3. Style Guide (75%)
  4. Library of coded components (74%)

It’s a good idea to include a functional audit of the product you organization builds and create an initial list of components that should appear in the library. Remember to present the results of the inventory to the team and decision makers.

Autodesk Edisonda ikony

6. Consider whether to use an existing design system or build one from scratch

According to the Research State of Design Systems 2020 report, 80% of organizations choose to build their own design systems. The main reasons for this are the desire to maintain brand consistency, specific use-cases, or the fact that the organization uses specific technologies. We see a rapid development of different platforms and tools and some of them might be an interesting alternative to building the tool from scratch.

At this stage it is also worth, among other things, discussing the choice of approach with developers who create digital products in your organization and will be significant beneficiaries of the results of this work. Remember that DS will be used in the development of websites, internal systems, and applications available to customers.

7. Communicate the change and educate your team

Introducing a new solution in a large organization where multiple digital projects are being developed in parallel requires an appropriate strategy. Similarly to rebranding – implementation of system design should be widely communicated. Understanding the value of using it can be a good starting point for building the organization’s design maturity. One of the most important messages that stakeholders are sure to take into account is the significant savings in time and, consequently, budgets. Be sure to take advantage of this.

If you have the right experts on board, you can engage them. If not – an external company can support you in education. Sometimes our clients who care about effective system design development order additional consultations and UX trainings for their teams.

8. Take care of clear documentation

Proper preparation and description of files in the design system is a guarantee of its reusability. Documentation allows a person who has just joined the team to understand the structure and use of the system elements.

9. Choose software that meets the needs

For many organizations, building a design system is an opportunity to switch to new graphical applications that enable teamwork. The pandemic has required organizations to accelerate their digital transformation and reach for tools that support remote collaboration and collaborative software development.

A lot has changed in the design world recently, with Figma unexpectedly topping the list of most used apps. In 2020, 23% of teams creating digital products will reach for Figma, while 19% will reach for Sketch. If you’re facing a tool choice, the ability to collaborate on a project remotely should be your top consideration right now.

design system wdrożenie EDISONDA

10. Assemble a team and invite important stakeholders to the table

The core design and implementation team should include domain experts – UX designer, graphic designer and developers. It’s also worth considering consulting other specialists – for example from the marketing department or those responsible for branding. The success of the project depends largely on clear communication and agreement on the methods of building the system design. Together you will take care of its updates and proper development.

If you don’t have the right professionals on board, consider searching for outside support or hiring people who have the expertise and know-how to implement a design system. By making sure you’re properly educated – both yourself and your team – you’ll ensure that your library will be used appropriately within your entire organization and that implementation will result in real benefits, including expected savings.

Want to get to know us and find out how we can work together?