STUDIO

SEBASTIAN LEINEHED

FK-orange-sq

Försäkringskassan

The Swedish Social Insurance Agency

Project

Project

Försäkringskassan

Försäkringskassan
Year
Year

2014 – 2017

2014 – 2018
Deliverables
Keywords
Visual Identity
Branding
Design System

Visual Identity
Branding
Design System
Web / UI Design
Responsive Website
Service Design
Visual Identity
Branding
Design System
Web / UI Design

Försäkringskassan is one of Swedens largest authorities, responsible for the payout of the Swedish social benefits, such as Parental Pay, Sick Pay and Disability Grants. 

I joined Försäkringskassan in 2014 to work on the monumental digitalisation of the social benefits and the rebranding of the authority itself.

logo-forsakringskassan-1

Our mission was not only to make the social benefits digitally available, but to also make them accessible, understandable and easy to apply for.

After having established a whopping five year strategic roadmap, work began...

... tearing Down the Wall of Text

Commonly percieved as severely bureaucratic and overwhelmingly difficult to understand, information on the social insurance would be many's very definition of "hitting a Wall of Text".

This presented one of our main challenges developing the new website;

How do we distill the "Wall of Text" into a digestible and understandable format?

FK-PhoneGrid

To replace the rigorous paper process then in place with digital services would have significantly positive effects on Försäkringskassans operations:

Reduced administrative costs
Positive environmental impact (fewer letters printed and sent)
Lessen administrative load for case workers
Eliminated need for many physical offices


Data om pengar sparade från pdf här

Designing for Everyone

By law, Swedish government websites are required to be accessible to everyone.  People of all ages needed to be able to use the site, including those with cognitive and physical disabilities. 

This presented another big challenge; How does one design for everyone?

SQ-Green

Achieving Sufficient Contrast

Being a public authority, there are accessibility requirements for all digital products written into Swedish law to make sure that everyone is able to access and use Försäkringskassans digital services. For a designer, this places a special type of limitations or constraints on your designs in regards to color combinations and content presentation. 

 As a Designer, being visually oriented comes with the territory. But what looks best might not always be what fits your design. And with many go-to color combinations off limits, is it still possible to make a visually appealing site?

 

2st-iPhones-SQ

Solution: A mobile-first, inclusive website, designed for guidance

The overall strategic principles for the website were Mobile First and Drive Toward Self-service.

To enable users to complete their task in as few clicks as possible and simultaneously reduce cognitive load, top-level information is now limited to a few rows of text, followed by a CTA (Call to Action).

This allows the users to quickly navigate the information hierarchy without having to wade through irrelevant information.

FK-iPhone-X2
FK-3

All benefits (”livssituationer”) are color coded for easily distinguishable information.

Every CTA (Call to Action) is visually prominent with the intention of guiding users toward the most commonly used self-services.

FK-FP-iPhone-iPad-Mockup

The site is built upon on a responsive card design, loosely based on the then newly released Material Design Guidelines used by Google in all their products. A concious choice based on factors like user familiarity and aesthetic longevity.

The site also features consistent AA contrast throughout (those familiar with WCAG requirements know this is a feat in itself) as well as other accessibility features such as screen reader functionality.

Atomic Design System

We created the Design System using the principles of Atomic Design, structuring the interface components into groups of ”atoms”, ”molecules” and ”organisms”. 

Forsakringskassan-Atomic-Design-System
SQ-Blue

Starting with the smallest possible components like buttons, dropdowns, checkboxes, radio buttons and so on, we slowly began collecting enough atoms to start making molecules.

SQ-Blue

Molecules like for instance a login form or an information card.

SQ-Blue

Lastly, Organisms were iterated, which manifested themselves as page templates.

High Fidelity Details

A lot of labour went into making the FK Design System components look great. From interface animations and hover states down to the last drop shadow.

FK7
FK-iPhone-Förälder-CTA

Launched in 2016, forsakringskassan.se was acknowledged with the prestigeous
Internetworld Website of the Year Award.

It was also awarded with first place in the category of Best Online Authority, an honor it has since then recieved in 2016, 2017, 2019 and 2020.

FK

Instrumental to the success of Försäkringskassans digital presence, The FK Design System incorporates the raison d'être of a well built Design System. 

Meaning; Make the commitment to build a solid foundation and you'll be able reap the rewards long after. 

Entering 2022, Försäkringskassans website and communications still rely on the design principles etablished in 2015-2016, and I take pride in the fact that the intended longevity of the design system has passed the test of time.