Securitas Design System

Build and run a design system • Product Design at Securitas IS • Sweden 2020-22
My Role:

Design System Owner

Company:

Securitas

Year:

2020—2022

Team:

1 Product Designer, 2 UI Designer

Time:

2 years 2 month

Securitas' design system began as a design system for the MySecuritas application at Securitas Intelligent Services and later evolved into the company's global design system. The design system has undergone several redesigns, including corporate identity update and dark mode implementation.
At the end of 2021, the system consist of 418 reusable components and 118 styles. About 7k to 9k components are reused every month, and the design system has cut the time from conception to implementation in half.

There is a series of articles I'm writing for people who are interested in Design systems, including challenges and best practices for building and running a design system for a large corporation such as Securitas. Go to Medium Artikels

Keeping the design system as a strong time-saving asset as the organization grows.

When building and running the design system, we had to take into account two factors, how to spend as little time as possible on the design system and how to reuse the invested time as much as possible. Because we weren't aware of what the organization needed in components, our design system had to grow with the organization. Consequently, we created new components when there was a need to share a component between at least two product teams. Consequently, designers had an easy time navigating the design system. As the good overview did not last very long, we needed to improve the usage of the design system in Figma by conducting interviews to indicate bottlenecks in the usage of the design system. To find solutions to the bottlenecks indicated by the interviews we did research on Figma design systems.

Example from the components library.

Interactive components

To gain velocity in the Prototyping phase we implement Interactive components.

Create an interactive button

Variants

In order to speed up the process of finding related components, we Establish Variants.

Change properties of an input field component.

Variant property standards

To avoid problems with using variant properties we implemented Variant property standards, which had clear terminology and were proven to reduce clicks when building screen flows.

Variant Property standart list

Variation property matrix

To minimize the possibility of incomplete variations we create a Variation property matrix designers can follow to not miss for example hover stage or a selected stage of a component. This was on the other hand a great documentation tool for the developer to read variants in the design system.

Property variation matrix on the component "Primary Button"

Figma Design system analysis tool

To identify poorly build components or unused components, we constantly analyzed the Design system with the Analysis tool for suspicious Detaches or unused components for serval months.

An icon which got not been used in the last 90 days

Enhance Figma asset search

Declutter and enhance the search components and assets function in Figma by hiding sub-components, and adding more descriptive naming to the components naming (For example Human icon, profile, person ).

User Journey Mapping for a Design system

Keep components build quality

To always have the same quality of components, we created a manual that helps to build perfect components.

Card component described

Design system get started kit

To minimize the time from a brief until actual ideas getting created and explored, we created a how to get started kit that has all the necessary material in it to define and document a problem, create solutions, measure solutions, and structure how to build different flows.

Get started kit as an importable asset in the design system.

Documentation in the Design system

To minimize false usage of components in a service we implemented component Documentation, with example screens of services that are already using this component.

User Journey Mapping for a Design system

Design Tokens

To avoid small style guide inconsistencies in the components and to handle maintenance in a very convenient way we implemented design tokens using "Figma Tokens".

Design Tokens stored in "Figma Tokens"

Impact

By using the design system continuously, designers can reduce by half the time needed for design exploration and refinement. In addition, the design system enhances the quality of our products by making them more consistent, predictable, and accessible for all users. In spite of the design system being so useful to the Intelligent Service organization. The Securitas management decided to scale it to a global level to create a global Securitas user experience and design culture.

Design system usage for simple mobile screen

Learnings

  1. Having a design system is both an asset and a constraint. Therefore, a design system must be treated as a regular project where users must empathize and ideas must be created as well as implemented and tested for their effectiveness. In addition, it is essential to communicate continuously the capabilities, the purpose, and how to work with a design system, so that the design system will not become a constraint.

  2. If a company's design system does not grow with its needs, it may reduce productivity in its product teams.

  3. By storing and making knowledge accessible at any time, documentation helps designers focus on what matters.

Image Credits: Richard Newstead