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.
- 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.
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.
12 Columns, gutters 16, margins 16.
12 Columns, gutters 24, margins 24.
12 Columns, gutters 24, margins 32
(page content width limited to 1272px).
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.
Verdana font is the primary font and its family has multiple weights. The main one used is Regular for body copy.
The secondary typeface Bree font is used on headings from H1 to H3 to better reflect the brand on the website.
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 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).