Nokia Design System

Design system • Nokia • 2023

UX designer

A dynamic design system created for Nokia, composed of core, mapping, and charting components.

Background

The Nokia Design System is a collection of reusable assets that are used to build digital experiences at scale. These assets create consistency amongst Nokia applications and save both designers and developers time when creating their products. The Nokia Design System is organized into five libraries, including core components, mapping, charts, tokens, and icons.

In 2023 our team began a complete overhaul of the design system. This included a visual refresh of all components, updated design tokens, and a brand new documentation site. During this time, we also transitioned our component library to Figma.

Process

Market research

This project began by conducting market research to better understand emerging design trends and what other competitors were doing in their product design and design systems. This research was then used to drive forward the design vision of the Nokia Design System. Some key trends identified included flatter interfaces, softer radii and transparency and blur effects.

Component design

Once the design vision was clear, work began on redesigning each existing component in the library to fit the new visual style that was defined. The redesign of the components included core, mapping, and charting components. This process involved some trial and error when it came to defining design patterns such as radii, elevation, and states. In the end, we opted for a slight radius on most components and removed almost all elevations to maintain a flatter interface.

Below are some samples of the redesigned components in the new visual style.

Themes

Once all the components were redesigned, the next step was to create multiple themes for them. The initial components were designed in light theme, so the next theme created was a dark theme. These themes were designed with accessibility in mind and met AA compliance. After these themes were established, the focus was then on creating a more accessible high-contrast theme that was AAA-compliant. High-contrast themes were created for both light and dark. These themes utilized a limited, more vibrant colour palette and borders to achieve the highest contrast possible.

These themes were implemented in Figma using variables and in code by creating separate JSON files for each theme.

Documentation

With the visual refresh of the components established, a new documentation site was also created. This site acts as a source of truth for the design system and provides both designers and developers with guidance on the components. This documentation includes foundations, component guidelines, and patterns, as well as guides for designers and developers to get started with the design system.