UI design for PDP

2020

User Interface design & brand development for Pensions Dashboards Programme

The Money and Pensions Service (MaPS) has established the Pensions Dashboards Programme team, to design and implement the infrastructure that will make pensions dashboards work.

Pensions dashboards will enable individuals to access their pensions information online, securely and all in one place, therefore supporting better planning for retirement and growing financial wellbeing.

I was invited to create and develop the UI designs for pension dashboard programme website with the requirement of communicating the project updates, decisions, next steps, and pension dashboard work progress with wider community and industry.

Project tasks

Developing and ensuring Pensions Dashboards Programme brand and digital guidelines are adhered across the business;
Creating and leading the User Interface strategy and designs;
Overseeing the design quality control;
Developing a comprehensive design library documentation;
Prototyping specifications and assets definition;
Collaborating closely with the front-end and back-end dev teams to guarantee that the product is released in the quickest and most efficient way possible.

Grid system

Flexible grid that has percentage-based columns, fixed margins and gutters. The columns are used to adjust the layout, making the best use of the space available.

320–740 mobile
12 Columns, gutters 16, margins 16.

741–1024 tablet
12 Columns, gutters 24, margins 24.

<1025 desk/laptop
12 Columns, gutters 24, margins 32
(page content width limited to 1272px).

Colour palette

Pensions Dashboards Programme colours are vibrant, bold and confident.

The colours stand out and convey a sense of positivity and trust which connects with Pensions Dashboards Programme core brand idea.

Typeface

Verdana font is the primary font and its family has multiple weights. The main one used is Regular for body copy.

Headings typeface
The secondary typeface Bree font is used on headings from H1 to H3 to better reflect the brand on the website.

Links

Buttons

The Pensions Dashboards Programme green colour has been used as the call to action colour.

A primary button style should be used as the main call to action on a page. And should be avoided using multiple primary buttons on a single page. Having more than one main call to action reduces their impact and makes it harder for users to know what to do next.

A secondary button style is created for secondary calls to action on a page.

Hyperlinks

Hyperlinks are in Pensions Dashboards Programme green colour – the call to action colour. Multiple states are defined for compliance with the WCAG 2.1 AA (web accessibility).