Purchase flow design

About
In 2016 we started to redesign Folksam's online buy flows. The challenge was to create a design which suited all of Folksam's products and which fit to every screen size while also raise conversion rates.
My Role and contributions
  • Interaction and visual design concept
  • Delivering finals and conducting development
  • Designing the component library together with the engineerings team
First sketches: Visitors open the flow by filling in their SSN-number
Sketch for small screen
First sketches: Step 1 of purchase flow
Sketch for small screen
Selling points and imagery
User research showed that the majority of visitors are entering the purchase flow directly to get an estimate prize instead of reading about the insurance and it’s specific advantages. That is why our banners and cards components provide selling points and imagery during the purchase flows to promote folksam’s products.
Main layout
To let visitors focus on the task to be done we took away all navigational elements and only left the flow steps. Instead of showing the steps horizontal in the top we built them vertical using the full page width, this gives room for the step titles and allows better usability on small screens.
Important UI elements
To calculate an individual prize for an insurance we need many values. A comprehensive design for forms is essential for a high conversion rate.
Some learnings
We measured the conversion rate one week before releasing the new design and one week after. Some results:

Dog insurance 9.7 % ➝ 10.9 %
1.2 % better conversation rate.
Child insurance 17.6% ➝ 24.7% 
7.1 % better conversation rate.
To raise conversion rates we have to constantly optimise content, copy and visual design for each product. For instance some products sold better with a simple radio select instead of cards or even the design of a price tag makes a difference in how many visitors finally buy a product.