+
->
Operations, General Inquiries
Matti Mölsä
Interim Managing Director, Partner
+358 40 727 3094matti@nordkapp.fi
->
Sales & Business Inquiries
Ilkka Haavisto
Business Development Director, Partner
+358 40 511 9038ilkka@nordkapp.fi
->
Press, Talks and Coaching
Sami Niemelä
Partner, Strategic Designer
+358 50 528 9265sami@nordkapp.fi
->
Finance & Administration
Elisa Lipponen
Finance and operations specialist
+358 45 270 3604elisa@nordkapp.fi
Watch the video ▸
Previous Project
Next Project
Telia
Voca Design System — Driver for Better Global Customer Experience
Continue reading ↓

Client

Telia

Year

2021-2023

Team

Telia, Nordkapp (Fin), Houston Inc. (Fin), KPMG (Swe), Fjord (Swe), Kurppa Hosk (Swe)

Team
No items found.
Read the case-study ↓Get in touch ↓

Telia Voca

A design system was needed by Telia, an international telco company, to provide a consistent and coherent visual language for all its digital interfaces, ensuring a cohesive user experience across different regions and products.

The internationally created Telia Voca Design System exceeded boundaries by sharing the best solutions from different countries and markets in one place. Through extensive research and gathering insights from team designers and other stakeholders across Telia countries, we were able to create a solid system with cohesive visual language, reusable styles, easy-to-use components and up-to-date guidelines tailored to the needs of the whole of Telia.

Submitted for: 


Grand One - Paras Design System, 2023

Introduction

Background

Telia has been a technology pioneer, digitalizing society for the past 160 years. Telia's 20,000 employees serve 25 million customers across the Nordic and Baltic regions with essential digital infrastructure and digital services that are fundamental enablers of the digital societies we live in. Telia is the telecommunications leader in the area, the leading Nordic media house, and the ICT leader in Finland and the Baltics. Telia's markets are Denmark, Estonia, Finland, Latvia, Lithuania, Norway, and Sweden.


Evolution

The first design system was created in 2016 for Tele Finland. Since then, there have been three different design systems, and evolution is here: Voca. A global design system that brings the best UI patterns and latest visual styles from the brand to one place as one easy-to-use set of assets and guidelines. Designers and developers around Telia can use their time on things that create real value and pushes things forward.

During these years, the design maturity at Telia has grown with giant leaps: the whole organisation understand the role of design better, and user experience is nowadays included in the corporate strategy. Therefore, Telia aims to have a common user experience through the whole Telia, meeting the high expectations regarding usability and accessibility in all digital interfaces.

Shortcut links to Voca Design System

Figma: Voca Design System Documentation, components and assets
Storybook: Voca Code

Challenge

The challenge

Telia is a large multinational organisation, with 20,000 employees, more than 100 designers, and countless developers around seven Telia countries. Our main challenge is to streamline the design and development processes on a global level, share best practices and eventually enable our users to create better user experiences.

Our challenges can be split to five main topics.

  • Create a set of high-quality component library with clear guidelines
  • Build a single source of truth that people can trust
  • Improve global collaboration
  • Increase awareness of accessibility and human-centered design approaches
  • Bring updated brand assets to product teams in a easy and controlled way

Solution

By building one global design system, we believe that we can leverage efficiency, quality and consistency at scale. Global design system will ensure a high level of accessibility and usability standards in our interfaces, improving the customer experience across our footprint.

Using one actively maintained design system, we can help our users create consistent digital products that follow the brand and latest accessibility guidelines. In addition, using one shared library of digital assets, we can focus on developing and pushing this even further, making it easier for the team designers and developers to match guidelines and requirements also in the future.

The new global entity, focusing on the quality of user experience produced at Telia, makes it possible to nurture a design community and culture where best practices and learnings can be shared. One of the main ideas behind the system was to bring the knowledge from the teams to the global level, where we could share it with other teams and markets and give kudos for the great work that happens all over the global organisation.

Shared assets like color library, typography library and UI components work as practical tools in implementing the updated brand that came out at the beginning of 2022. During the same time, the digital guidelines from the global brand were moved to the design system, making Voca the central place for guidance regarding the brand in digital environments.

Ultimately, our goal is to build a living ecosystem that helps Telia build better user experiences more efficiently.

Setup

Figma library

We moved from old local Sketch files to a Figma setup that was easier to share and maintain. Our setup has grown with Figma features during these years. From a relatively simple local setup to the current enterprise model.

In Figma, we provide five main libraries for the users:

  • Components
  • Colors and Shadows
  • Text styles
  • Icons
  • Grids


All these libraries are automatically available for all the users joining our Figma organisation.

Figma: Voca Design System Components

Documentation site

Our primary documentation site is built using Frontify and includes guidelines on foundations and components. The global brand uses the same platform for its documentation and assets, making the whole digital documentation a friendly and easy-to-use package.
On the component level, we use Storybook to showcase the components. Interactive component examples are brought from Storybook to Frontify.


Frontify documentation is in Telia website called Brandhub. It's impossible to access it from outside, so screenshots of that site have been added to the Voca design system Figma file. Documentation screenshots are located next to relevant DS components.

Web components

Voca design system is built in a framework-agnostic way using Web Components and Stencil.js. There are multiple frameworks used in product teams. While React is the most used framework, there are large teams using Vue and Angular as well. To be able to support all the teams, we created our components using web components that can be wrapped and used in all frameworks.

Storybook: Voca Code

Highlights

Components library

Our constantly growing component library includes 30+ Figma components full of variants and features. All the components in Figma are created to match the coded counterpart as closely as possible. Our components are designed to be modular and flexible to leave enough room for the team designers and developers to adjust the components to their needs. This flexibility is done using variants and things like slots. 

Color system

Vocas color system is one of the backbones of Voca and the whole digital brand. Our color scales are built with solid contrast in mind. Scales use a naming system that is directly connected with the contrast ratio of the color. The contrast ratio between scale steps is created equal, and the middle color of every scale has similar contrast against both black and white. All this makes the scales versatile and predictable. Moving from one scale to another, or from dark mode to light, our scales are there to support designers and helping them to make the right choices.


Typography library

Voca typography is based on two custom-made fonts, Telia Sans and Telia Sans Heading. 

Telia Sans is the workhorse of the whole system we use in all functional use cases. This means that Telia Sans can be seen in all body texts, buttons, title styles and similar. The font is created to be easy to read, modern but legible and packed with enough glyphs and features for all Telia countries and languages. 

Telia Sans Heading is the sassy sibling of Telia sans - packed with personality. The main shapes are the same, but with more weight and an extended and slightly funky feel that is great for more expressive typography in elements like Hero Banners and marketing-related content. In the typography system, we use Telia Sans Heading in Display styles.


Fluid typography

Voca uses a fluid-type scale between small and extra-large breakpoints as a default. This means that from the medium breakpoint and up until the x-large breakpoint, type sizes are scaling fluidly, creating a more balanced visual experience for screen sizes that are further away from typically fixed breakpoints. Developers can use fixed sizes for breakpoints as well. 

Extensive icon library

Voca has an extensive icon library of more than 300 custom made icons. Along with the strong typography, our icon library is designed to provide a solid backbone for the visual style of Telia's digital interfaces. We have added enough metadata about possible use cases in the library so that finding a correct icon using the Figma search is quick and easy.

Impact

In a short span of time, Voca Design System has provided several benefits and improvements specific to Telia's digital interfaces.

  • Single source or truth - one place for documentation and guidelines
  • Controlled implementation of brand renewal in digital environments
  • Increased productivity for Telia's designers and developers
  • Global collaboration between designers and developers 
  • Cost savings from using ready-made components in design and development
  • Higher awareness of accessibility in product teams
  • More uniform user experience on a global level

Links

References


Links to Design System


To see all of the DS, change Pages on the left panel of Figma.


Figma: Voca Design System Documentation, components and assets
Storybook: Voca Code