Building a design system from scratch

Varma DS

In a nutshell

Project duration

22 months

Platform

Responsive web

  • 1 design lead (in-house)

  • 1 designer (in-house)

  • 3 designers (consultancy)

  • 1 Frontend developer (consultancy)

  • 1 project owner

Team

  • Defining and implementing the design process and design principles

  • UI & UX design

  • Prototyping

  • User research & testing

  • Planning DesignOps work and metrics

  • Building the design system tokens and assets

My responsibilities

The Challenge 👀

Varma was undergoing a complete overhaul of its digital services. In order to succeed in this challenging multi-provider and multichannel endeavour, a comprehensive design system was needed to ensure coherent user experience and brand representation throughout the various customer touchpoints.

Varma Design System is used in all of their digital products and channel – the company website, online insurance services, office space rental site, etc. These services have tens of of thousands of daily visitors with diverse user needs. Accessibility is also a major priority at Varma, since insurance services are required to be accessible by Finnish law.

Many of Varma’s 500+ employees are using the same services in daily tasks like account management, customer service etc., so they benefit significantly from usable and lean services as well.

Solution 🛠️

The work started with cataloguing the old design system and its re-usable components, in order to avoid reinventing the wheel. To enable designers and developers to work efficiently, we created a flexible design-to-implementation process based on Figma’s handoff and commentation features, in addition to daily communication and weekly DS meetings. We also defined clear design principles right from the start, to avoid guesswork and unwanted diversions.

The new DS was built simultaneously with the redesign of actual digital services, which enabled testing the patterns and components in a real environment with real users – thus feeding the design process rapidly with valuable insight. This way we could also evaluate the technical viability quickly.

In the groundwork phase, my main responsibility was to create clear and flexible sizing/scaling, color & typography scales and corresponding tokens for the design system. Naturally Varma’s brand assets served as a starting point – but since the brand manual had little to offer regarding digital services, some adaptation was necessary.

From these base scales, I created semantic definitions for typography and colors, that could be easily updated as needed. In hindsight, the t-shirt sizing I chose proved a little complicated, because adding or removing steps between sizes was difficult – a 0-100 scale would’ve probably worked better.

Building the components in Figma was naturally a team effort, but I designed some best practices and principles to ensure a usable and flexible format for the library. The key idea was that the components usually consisted of root components (e.g. a skeleton button) that defined the base attributes, for example shape, size, padding, etc. Furthermore, these skeleton components were defined in more detail for each use case – adding brand attributes, state variants and so on.

The design system was roughly based on the Atomic Design principles – however, since the UI patterns required in the online services were very varied and much dependent on the context, we decided the DS should initially take a stance mostly on atom/molecule level, instead of the more holistic system we had first envisioned. Pattern-level guidelines are to be introduced in the future.

Varma Design Library was built piece by piece in Figma by me and the other designers. Its front-end counterpart was developed on a custom-made React platform by a dedicated developer with guidance and support from design team. Syncing the Figma and frontend libraries was a key effort to ensure a single source of truth, which both designers and developers could rely on.

During the project, I also contributed to planning the basis for DesignOps work at Varma, to ensure ongoing development and commitment to the new DS in a multi-provider environment. Initial steps for measuring the impact of the DS were also taken.

Results 🥳

The new Design System was implemented gradually in all Varma services. For designers and developers, it simplified creating new features greatly, making it easy to create a consistent user experience. Communication was much easier both in multidisciplinary and dedicated design teams. A lot of the guesswork was eliminated.

From business perspective, the benefits were clear right from the start. New features could be implemented faster, and consistent user experience in sync with the brand was much easier to achieve. The feedback from user test sessions with new features designed according to the system was very positive.

Lessons learned 🎓

Undertaking a task this massive is obviously a big challenge even for experienced designers! But it is also a massive opportunity for learning. What I learned in this project could be an essay in itself, but here’s a few main points:

  • Communication is ESSENTIAL. Sounds obvious, but can’t be stressed enough. Falling into a silo in a large organisation is way easier than you think – talk about the design system wherever you can, to as many different people as you can (no, not to the office cleaning person 😅).

  • In relation to the previous point, get enough buy-in early, even if you’re commissioned to create the system. People change jobs, situations change, etc. etc. In turbulent times, it’s tempting to put a “non-vital” element such a DS on the back burner. In Varma’s case this wasn’t much of an issue, but you still need to make sure the impact of the DS will be recognized in the future as well. Consider the need of a dedicated Project Owner for the DS, preferably in-house.

  • Get even tiniest details right as much as you can initially. You or anybody else won’t have time to fix all of them later. Naturally, a design system is an evolving entity and practices for constant development should be established early on, but especially in the beginning you will have much more pressing issues on your table than fixing that not-quite-right calendar component spacing.

Interested in Design Systems and how they fit in with the organization culture? Here is more of my thoughts on the subject (co-written with Tomi Sjöblom).