Folksam’s customer portal Mina sidor revised

About
As a design leader at Folksam one of my responsibilities is to analyse input from user research, to frame and define problems and create solutions for achieving more customer satisfaction and business value.

User testing for Folksam's customer portal 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 people we sketched out how these features could be made accessible while also uplifting the overall design. But beside providing useful features we also wanted to give the portal a clear vision to stay relevant for our customers in the future.
My Role and contributions
  • Using design thinking to lead workshops
  • Interaction and visual design concept
  • Working close with front-end development to determine new solutions
Status quo
A typical reason for customers to login is to get information about coverage, to make a claim or to check billings, however this happens very rarely.

One of our goals is to get customers to login more frequently and to understand Mina sidor as a service portal. This would give Folksam major benefits like customer insights, personalised product offerings and in general staying relevant for customers in the digital age.
Overview (before redesign)                      
Insurance detail page (before redesign)
Sketching
Constraints
To get the best user experience we focused on sketching for an app enviroment, either native or as a progressive web app. This makes features like notifications and offline modus possible.

To stay focused and not get lost in the sheer amount of Folksam products we created a scenario of a persona with a car and dog insurance as well as an endowment insurance for our sketches.
Product detail pages
The work on the product detail pages was more complicated. We started with listing up all information and features a page should have, then we sketched out several designs as lo-fi wireframes and tested them iteratively.
Savings pages
Over 2018 Folksam worked together with the service design agency Itch to conduct user research and analyse Folksam's current saving products. For our project we used some of the insights of this work.
Other pages
After testing we got more secure about the general template and inner navigation structure so we tried to deploy it to other pages like “Documents”, “Claims” and “Billings” and it become apparent that more layout components like cards and accordions were needed.
Visual design
The next step was to work with the finer details of the design like graphics, animation, shadows and gradients. My design process isn't exactly linear, usually I try out some ideas directly before I realise that I actually have to step back and start from the beginning to find a central theme I can apply over a whole user journey.
Central theme
The illustrated icon world (design by Fellow designers) makes up the basis of Folksam's visual identity. From here most visual elements are retrieved. The background place the icons in a context and it can be used as graphical elements. I wanted to extend this world by adding the dimension of time through the four seasons.
Animation principles
Animations set UI-elements in context of Folksam's brand and make the content more alive.

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.
Summer theme
Autumn theme
Winter theme
Some learnings
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 already managed to implement some of the ideas.
To sketch out visible scenarios of potential ideas can become the common ground for what teams, stakeholders and product owners want to achieve.