Internet Explorer is not supported by Design Library

The last version of Internet Explorer, version 11, was released on October 17, 2013. This is a very long time ago when taking into account the rapid development of web technologies. These days it is often difficult and time consuming to get modern technologies to work well in this old browser. More and more frameworks are dropping support, and even Microsoft themselves has announced that they will fully drop support for IE in their own services in 2021.

Consequently, we have decided to not include support for IE in the Design Library website.

Luckily, there are modern options in active development. Please use Firefox, Edge or Chrome instead.

Real life example: Trygghetsplanen

This is a real life exampel of when all the steps of Visual design thinking was applied to Trygghetsplanen, as told by customer experience-designer Axel. Or as he would call it: "How to make pension and insurance make sense".

Who feels they understand their Pension and Insurance plan? Hands up! Ah, nice, a few at the back. So, how many feel confident in purchasing a pension and insurance plan for the employees of a whole company? Don’t be shy! No one? Ok, but you don’t feel confident about what you have bought? Yes, that is the way the world of pension and insurance works, and that is what we are trying to change.

How to make Pension and Insurance make sense

We are creating a new tool for the advisors to use when they meet clients who want to insure their employees. At the same time, the new design is being implemented and our project is one of the first to apply it. Let me take you through our design decisions.

Step one is to better explain what they are buying. And the most important part of that is to stop trying to teach them about our products.

What is needs do they have?

Instead, we discuss what kind of life situations their employees will face, and what their needs are in these situations. The answer to the questions will help the advisor to identify the client's needs, and how to apply the different products to fulfill those needs.

Design for a purpose

The tool we are building is a little like PowerPoint with some interaction and functionality. It is very important to have clean spacious design that creates an opportunity for discussion between the advisor and the client. It is not a tool for entering a lot of data as quick as possible.

Tryggplanen - agenda

Clean design with a strong hierarchy in sizes, as on the Agenda page, helps the client understand – here what the meeting is about and what will be discussed. The colour helps framing the content and separate that from other interactive elements as the menu and the flow drop-down control.

Tryggplanen - question

Our customer research show that we should discuss life situations, not products. So we ask our questions like that. The large visual focus on the situation (in this case, if you get ill for a long time) helps the discussion focus on that. The question regarding the clients' need of a solution in this situation has second priority.

To avoid a cluttered and confusing experience, a lot of navigation has been incorporated in the big coloured area. With the tabs, one chooses which employee group one is discussing, and there one can see how many questions one have to answer. This does not follow the Design library completely, but since this is tertiary information, we have opted to ‘hide’ this a bit.

The most important navigation is “Next question”, and that is quite clear.

Tryggplanen - more info

There is also more information available that the advisor might need to explain to the client. Since this can be quite detailed, it is not showed until it is needed, to avoid the client becoming overwhelmed with too much information.

Tryggplanen - recommendation

When the questions are answered, the advisor shows the Recommendation.

Here, the content has higher priority – hopefully the clients have understood the life situations – so the big colour visuals are smaller, giving more prominence for needs and solutions. The needs are deduced by analysing the answers to the questions, and the solutions are based on a combination of needs. Here, the needs has higher visual weight – the need is more of a mental check for the client:
- “Why have you recommended this?"
- "Ah, yes, because I said I had that need.”

Of course, it is possible to go back to the question and adjust the answers, if the client feels that the need isn’t correct. But this navigation element is quite subdued.

Progress and evolve

The need analysis is mostly about giving the client a feeling of understanding, and that the recommended solution is based on their reality and their needs - not our products or our ideas about them.

The next step, the offer, is about giving them control of their own solution. We will present the recommended solution with prizes and controls, where the client can make changes and customize the 20+ products and offers for all of the employees. It is important for them to know what they get, how it matches their needs, and what it will cost. And that it is their decision.

Axel Garcia Henriksson,


Page last updated


Was this helpful?