At a Glance

In September 2016, I joined Neilson Financial Services as a Senior UX Designer.

Since then, one of my main responsibility is to perform design and experience audits including gauging the usability of new and existing features and making constructive suggestions for change.

 

my ROLE

Researcher

UX & UI Designer

System Designer

TEAM

Visual Designers + Frond-End Developer + me ( Product Designer )

stakeholders

Head of Marketing 

 

DURATION

3 Months and ongoing


British Seniors Insurance Agency is an innovative consumer focused life insurance product in the UK provided by Neilson Financial Services.

 

Our Mission

To design a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications.

PURPOSE OF THE PROJECT

Over the last 6 years, since the inception of the Brand - British Seniors Insurance Agency we have seen a massive growth over a number of channels. After doing an internal design audit, we noticed that we had three different types of headers & footers, five different types of forms, and various different buttons styles.

Group@3x.png

We were growing fast and we needed to be able to design with a common language and consistent aesthetic that will uphold our company’s brand on all our channels. The best way to get started was by defining our company’s design system.


“A design system acts as the connective tissue that holds together the entire platform”

OUR APPROACH

When we started working on this project, we didn't start from scratch. We had a history of iterations and style guides to refer to. The current style guide was limited to basic colour, typography and print related specifications. We realised that the system weren't clearly defined. There was a gap in Print & Digital execution as the considerations were limited to print and there was no documentation on the interactions. 

We decided to introduced : Atomic Design System to transform NFS design into a best practice digital design environment for our UX Designers, Visual Designers & Frontend Developers.

what is atomic design?

Atomic Design is a methodology that involves breaking a website layout down into its basic components, which are then reused throughout the site. By breaking down components into basic atoms it's easy to see what parts of the site can be reused, and how they can be mixed and matched to form other molecules and even organisms. 

benefits of atomic design

  1. You can mix and match components

  2. Easy to understand layout

  3. Code is more consistent

  4. Quicker prototyping

  5. Easier to update and remove parts of the site

atomic@3x.png

neilson design system

A design system is more than just a style guide or pattern library — it’s the blueprint for product development. Design Systems make creating your UI inventory an easy job since our symbols work pretty much the same as those in Sketch. Clone an element hundreds of times and apply changes everywhere with a single click or nest your symbols and make the content inside them adapt. 

We started our work with few important parts of a system which would then act as a primitive layers for the further considerations.

TYPOGRAPHY

Screen Shot 2018-11-02 at 12.02.14.png

COLOUR

The complete colour palette is defined and based on:

  1. Rules : Must pass minimum colour contrast ratio of 4:5:1

  2. Constraints: Number of colours in the palette

  3. Principle: Colour should be used in a meaningful way.

 The core palette establishes brand through interface, framework & typography

The core palette establishes brand through interface, framework & typography


 The functional palette aids in user interactions

The functional palette aids in user interactions


 The accent palette adds the personality, highlights positive emotions and draws attention.

The accent palette adds the personality, highlights positive emotions and draws attention.


GRID & SPACING

Responsive design is the process of arranging the layout in a way that all the important information is presented in a user-readable way in any kind of device or screen size.

We decided to use a fluid grid layout since it’s easier to handle grid based layouts in different kind of devices.

In fluid grids we define a maximum layout size for the design. The grid is divided into a specific number of columns to keep the layout clean and easy to handle. Then we design each element with proportional widths and heights instead of pixel based dimensions.

So whenever the device or screen size is changed, elements will adjust their widths and heights by the specified proportions to its parent container.


BUTTONS

Buttons express what action will occur when the user clicks or touches it. Buttons are used to initialize an action, either in the background or foreground of an experience.

Group@3x.png

footers


SUMMARY

Standardised components used consistently and repetitively create a more predictable and easy to understand application. Standardized components also allow designers to spend less time focused on style and more time developing a better user experience.

Below is a before & after image which highlights the benefits of incorporating standardised components:

Group 20.jpg

NEW DESIGNS


WHAT NEXT?

Our vision is to improve the workflow for designers & developers by creating a good system which is:

  • Highly Reusable

  • Flexible

  • Clear & Consistent

  • Up-to-date

  • Documented