A Design System for the Future

View solution

Customer

Nova

Year

2020 - Today

Role

Design system

,

User experience

,

Nova is an Icelandic telecommunication company at the forefront of every innovation in regard to mobile technology and technology solutions. The rapid pace of design and changes led to a fracturing of the visual language. Even a brand as eclectic as Nova was starting to feel the cracks of inconsistency indicating it was time for a design system.

Nova named this system Konfetti, or confetti, which describes Nova's design system very well – a colorful and meaningful mesh of themes and visions. It was very important to give the system a name that everyone can relate to and love. There needed to be full commitment from stakeholders and employees for a good design system to have a successful life.
Front page of design system

The Largest Decorative Collection in the World!

This design system has a bank full of cool tools so that Nova can continue to be the first to bring technological innovations to market.

The primary purpose of the decorative portfolio is to maintain consistency across all digital media maintained by Nova including, but not limited to, the main website, the app, the login and the occasional marketing website.

In addition, the system was designed to speed up the publication of digital projects, reduce the burden on the stakeholders and save work and time. Every element is designed as part of a whole with scalability as a core feature.

Scalable Components

Konfetti is a grid-based design system. This means that components were designed on a grid so that they could work on any screen, whether large or small.

Example of a component

Scalable Components

In order to help the developers understand the structure and scaling of components in the frame, a special scaling system was designed that allows screens to be dragged and programmers can see how the scaling behavior occurs.

Example on scaling system

Synchronous units

The units were designed in a "component stacking" system, where each component is connected to one main component. This allows us to change all the connected components at once by changing the main component.

This way we can update, for example, an icon or button everywhere at once.

Examples of connection of components

Scalable Font

One of the greatest challenges in the project was to "design" a scalable font. The main challenge turned out to be the scalability as it is not linear but based on a separately developed formula.

In the system, all fonts are scalable according to this responsive type methodology. With responsive type, the font is given a defined maximum and minimum size. The minimum size for Konfetti is 20pt.

The font scales proportionally between screen sizes. When a font scales to a specific size, the point size of the font is defined, followed by a calculation that posits the optimal size of the font for the intended screen.

Font scalability
Part of the design system's goal is to simplify the internal work at Nova. Therefore, a system was developed that manages modules for the installation of information architecture, user flow, and more that are needed.
Module management

Any other assignments?

An effective design system that saves time

Design system

Vörður

An effective design system that saves time

Branding

GG Sport

An effective design system that saves time

Digital Solution

The City of Reykjavík

An effective design system that saves time

web design

Síminn