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.
UX & UI Designer
Visual Designers + Frond-End Developer + me ( Product Designer )
Head of Marketing
3 Months and ongoing
British Seniors Insurance Agency is an innovative consumer focused life insurance product in the UK provided by Neilson Financial Services.
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.
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.
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
- You can mix and match components
- Easy to understand layout
- Code is more consistent
- Quicker prototyping
- Easier to update and remove parts of the site
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.
The complete colour palette is defined and based on:
- Rules : Must pass minimum colour contrast ratio of 4:5:1
- Constraints: Number of colours in the palette
- Principle: Colour should be used in a meaningful way.
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 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.
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:
Our vision is to improve the workflow for designers & developers by creating a good system which is:
- Highly Reusable
- Clear & Consistent