Redesign folksam.se

About
In 2015 Folksam started an aspiring program for digital transformation. Together with design agency Doberman I was part of the team responsible for redesigning folksam.se. The objective was to implement a new design which should set the foundation for an ecosystem of services where customers can get a personalised experience.
My Role and contributions
  • Implementing the new design and creating new design patterns
  • Defining guidelines and specs for site editors and developers
  • Art direction for imagery and graphics
  • Designing a component library together with the engineerings team
Before
After
About Folksam's brand
Folksam’s core principles are: Be committed, be personal, take responsibility while be sustainable. Folksam holds the position of being a company with a big heart. The visual language of Folksam reflects on these values and on the insight that most people find insurances boring but they really care about their families and the things they want to insure.

A main challenge was to translate the rich graphical identity of Folksam into UI-elements and website components.
Imagery
We wanted a very natural appearing photography, an atmosphere and feeling of everyday live. For this we organised photo-shootings for every season of the year including only models which actually work at Folksam.

We considered the digital usage of the imagery and balance it with graphical assets like splashes and the usage for mobile screens.
Important UI elements
The vast majority of visitors come to folksam.se with a specific case in mind, 
so as to buy a product, report an injury or login to the customer portal. By highlighting what most people want to do with comprehensible icons we created clear pathways for visitors.
Only one "Call to action" for each page
Our forms for entering a purchase flow are designed for the least possible input. If we need more than two input we divide them into steps.
One thing at a time
UI-components like accordions, drop downs and modal windows are helping visitors to not get overwhelmed by the sheer amount of information.
Guidelines and documentation
To provide design and concept resources we developed a pattern library and design documentations which are gathered in an internal website.
Some learnings
After going live in june 2016 we were convineced we had done a great job documenting how to use the design and how to further develope coming sites and applications.

But while we had a documentation about the design and code we hadn’t a common way of working and we never actually agreed to criterias for what constitutes good design for Folksams websites and apps.
To work effective and creative within development teams a design system needs to include more than a pattern library.