Together with other UX Designers within KPN I took lead in starting the KPN Styleguide. During 5 days we discussed how we where going to organize and structure our styleguide.

How might we…

During the whole proces I had these goals in mind

Create…
A stable styleguide
For…
All of the UX Designers within KPN
To…
To align and consolidate different styles and patterns within KPN
And improve…
The user experience of our end-users & to make it possible for developers to re-use code.

During 5 days we gathered different UX designers to see how we could build a sustainable style guide. We answered questions about grids, typography and colors. Came up with a structure. After these first 3 days where we set the foundation of our styleguide we started crafting all the elements. During this proces we discovered its very important we explain in written why we make certain choices. Show how somthing should be used and how not.

Principles

The foundation of the style guide is based on design principles that reflect the values of KPN. Together whit the base they form the backbone of the style guide and guide our choices. We created these hand in hand with each other.

Base

From the principles, we moved on to the base of the style guide. The basis is everything you need to create the components later. From typography to colors. Especially on the typography, we put in a lot of effort to find the right balance between brand expression to usability. And to get every platform and designer onboard with this fundamental plan.

Components

Component libraries are what many people associate with design systems: these thorough libraries house predetermined, reusable UI elements, used as building blocks. They are a living implementation of the Style Guide.

Each component meets a specific interaction or UI need and has been specifically created to work together to create patterns and intuitive user experiences. We discovered that you need to describe certain users cases to make implementation clear and consistent.