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.
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 better customer experience.
Over these years, Telia's design maturity has advanced by leaps and bounds. The entire organization has gained a better understanding of the importance of design, and as a result, user experience is now an integral part of the corporate strategy. Telia is committed to delivering a consistent user experience across all digital interfaces throughout the company, with a focus on meeting high standards for usability and accessibility.
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 have better 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.
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 was made 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
