Experian Form Design System

When I was brought into Experian to lead the vision for the new Car Insurance Comparison Service I was also asked to look at Experian’s current form design. It was very clear from the offset that it had been some time since forms at Experian were shown any love so it was essential they needed some real attention if we were going to create something special for Car Insurance.

There was a lot of inconsistency across the Experian Consumer Services when it came to how a customer interacted with a form. Different experiences on different devices…along with confusing and dated UI.

I started by applying best practice to all form elements. Using a clear and precise design system that would work across all screen sizes.

We also looked at the grid system and chose Bootstrap as the frame work.

Project Info:

Role: Lead Product Designer

Company: Experian

Date: Aug 2018 - Present

Website: insurance.experian.co.uk

Bootstrap Grid
Form Elements
Type Settings

H1

Size: 40px
Weight: Light
Line height: 52px
Letter spacing: 0
Colour: #1D4F91 or #63666A

H2

Size: 31px
Weight: Light
Line height: 41px
Letter spacing: 0
Colour: #1D4F91 or #63666A

H3

Size: 24px
Weight: Light
Line height: 34px
Letter spacing: 0
Colour: #1D4F91 or #63666A

Colour Palette
#63666A
#828588
#A1A3A6
#C1C2C3
#E0E0E1
#EFF0F0
#F7F7F8
#1D4F91
#4A72A7
#7795BD
#A5B9D3
#D2DCE9
#E8EDF4
#F4F6FA
#426DA9
#688ABA
#8EA7CB
#B3C5DD
#D9E2EE
#ECF0F6
#F6F8FB
#6D2077
#8A4D92
#A779AD
#C5A6C9
#E2D2E4
#F0E9F1
#F8F4F8
#AF1685
#AF1685
#CF73B6
#DFA2CE
#EFD0E7
#F7E8F3
#FBF3F9
#E63888
#EB60A0
#F088B8
#F5AFCF
#FAD7E7
#FDEBF3
#FEF5F9
#0076DC
Previous Project
Next Project