In 2019 Folksam's customer portal provided a plain overview of a customers insurance and pension savings plans. Despite looking up pricing or reading about the coverage of a product there was not much to interact with.
User research indicated many cases where customers couldn't accomplish their tasks. They were missing features like up- or downgrading their insurance or temporary stopping their monthly savings.
In a small team of three we sketched out how these features could be made accessible while also uplifting the overall design. But besides providing useful features we also wanted to give the portal a clear vision to stay relevant for our customers in the future.
The topic of insurance and retirement savings is difficult to engage in. Folksam’s products have many features which would create engagement and give value to our customers but most of these features are incomprehensible or only accessible by customer service line.
Also "Mina sidor" didn’t have any editorial content like how to prevent damage, or the latest test results of insurance related products (Cars, helmets).
We aligned on already existing research material for instance personas as well as the latest user tests on "Mina sidor". We also had access to research material from the cooperation between Folksam and the service design agency Itch which analysed Folksam's saving products.
We evaluated the research into specific user tasks and created a scenario of a persona with a car and dog insurance as well as a pension savings plan
According to web analytics, visitors mainly used their smart phone to interact with Folksam, that's why our visualisation of the new design had a mobile first approach.
Start page and detail pages demands and insights (Swedish)
Private pension saving pages demands and insights (Swedish)
Status quo (Spring 2019 before redesign)
Users were faced with a start page containing a list of insurances and savings. "Mina sidor" did not provide any services but simply showing the details of an insurance, as well as price and payment information.
It felt like every free space in the layout was occupied with information, customers were unavailingly searching for features like making a claim, sign or quitting an insurance.
Redesigned wireframes for the navigation
Introducing a landing page to give space for options like claim and personalised content and a nav bar for navigation (instead of a “hamburger" menu). We split insurances and savings into two areas (instead of showing all products on the same page).
Detail page insurance
The detail page shows the basic insurance info with a Call To Action button on top, giving the possibility to make a claim directly.
Customers can up- or downgrade their insurance plan as well as adding extra coverage to a plan.
Since customers login through bank-id there is no need to fill in personal details for claims, everything is already provided.
Detail page savings
The detail page for savings has short links to the most important user tasks, giving the possibility to e.g. directly change the amount of monthly savings plan.
Customers will find basic info first but have the possibility to fullfil mor tasks through tab-structured layout.
Customers also can set up a goal for their savings.
Asking more questions
After designing detailed wireframes and testing a first prototype we realised how fast we went into "obvious solutions" but not considered our mayor insight:
According to consumer research it is quite uncommon for a person to have all insurances at the same company, and it is even more uncommon for families.
We performed a workshop with business developers where we asked some basic questions:
How might we show how well a person and his/her family is insured?
How might we get the same quality our customer service has when talking to a customer on the phone?
The outcome was the vision of a digital service plattform:
Sketching out the idea of a service plattform where customers can see all their insurances and savings, independent of provider. It includes a suggestion for improving your personal insurance and saving plan following recommendations from the Swedish Consumer Agency.
Finally I worked with the finer details of the design like graphics, animation, shadows and gradients.
The illustrated icon world (design by Fellow designers) makes up the basis of Folksam's visual identity. From here most visual elements are retrieved. I wanted to extend this world by adding the dimension of time through animations and seasonal themes.
First sketches
Animations
Principles:
Animations are clear in the intention. They create focus on certain information like offers and discounts. They give user feedback and tweak the perception of time (e.g. loading time).
Animations are repetitive in motion. They are cohesive across the app and help the user's orientation on the task to be done.
Finals
-1.png)
Seasonal themes
While the core teams for Folksam’s customer portal has to deal with all the realities of resources, legacy and organisational requirements we as a small design team had great freedom to sketch out a scenario which is quite far away from the challenges the current application has to deal with.
However we tried to think in feasible solutions and we directly managed to implement some of the ideas. And also our visualisation for a future service portal helped us to communicate with stakeholders highlighting where to focus on.