2020
User Interface design system & brand development
Money and Pensions Service (MaPS) was formed in 2019. It has operated through three consumer facing brands: the Money Advice Service, The Pensions Advisory Service and Pension Wise.
MaPS was created as a single body to bring together financial guidance services and content, making it easier for customers to find what they are looking for in one joined-up service.
Having consolidated three brands into one, MaPS provides a better and enhanced consumer experience – a single source of information and guidance where information can easily be found in one place.
The new consumer facing brand is MoneyHelper.
Tasks on the project
- Developing and ensuring MoneyHelper brand and digital guidelines are adhered across the business;
- Creating and leading the User Interface strategy and designs with special attention to usability and accessibility (WCAG 2.1 AA);
- Reskinning legacy tools and enhancing the UX and UI;
- Overseeing the design quality control and maintaining it;
- Developing a comprehensive design system and a 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 in the most efficient way.
Contributing on definition workshops to define goals for the new platform
Understanding our users
Defining personas, and defining users pain points
Capabilities for the future
Thinking about what capabilities we would like to be delivered to our customers
What is a priority?
With the MVP in mind, we prioritised the capabilities and features required in the short term
Viewpoints
Being able to represent views from varied areas of the business and as future users of the platform
Discovery output
The new platform needs to enable a flexible structure with a:
- Clear taxonomy and tagging so that content is easily searchable within the website and to search engines;
- A range of content and features with one single look and feel;
- Allow implementation of legacy tools and calculators;
- Compliant WCAG 2.1 AA (web accessibility standards).
We adopted Adobe Experience Manager (AEM) with a modular approach to components.
The content fragments can be used to put the specific types of content required in the site.
The main anatomy of the page will have:
- Global navigation (header and footer);
- Secondary navigation (side columns);
- Space for the main content.
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
MoneyHelper colours are vibrant, bold and optimistic.
The colours stand out and convey a sense of positivity and empowerment which connects with MoneyHelper core brand idea.
Iconography
Icons are clear, concise, simple and outlined.
There is a consistency with the brand by using the rounded bottom left hand corners.
Typeface
We use Roobert as our primary font and its family has multiple weights. The main ones used are Regular for body copy and bold for headlines.
Secondary typeface
Our secondary typeface Calibri is used when Roobert is unavailable. Examples of these are office documents such as Word, Powerpoint and emails.
Links
Buttons
The MoneyHelper magenta colour has been used as the call-to-action colour.
A primary button style is used as the main call to action on a page. It 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 MoneyHelper magenta colour: the call-to-action colour. Multiple states are defined for compliance with the WCAG 2.1 AA (web accessibility).
Input boxes
Home page (level 0)
Home page structure
Contact component
The contact component provides an unified way for customers to contact MoneyHelper for guidance via multiple channels including web chat, telephone, online form, WhatsApp and postal mail.
It is accessed via a floating action button on the right hand side of the browser viewport. This button is ‘sticky’ and appears on all pages of the website.
Article page
As a flexible structure with a modular approach to components the article pages allow to add different content fragments.
Local navigation component
The local navigation component allows the user to navigate into a collection or sequence of articles of the same subject.