Guides Redesign

TotallyMoney

Redesign of the Guides section of the TotallyMoney website so it is optimal for the users to reference as a learning tool.

Part of phase two of the larger rebrand of TotallyMoney, completed in 2019.

Project Summary

Challenge

As part of TotallyMoney’s goal of improving the credit scores of their customers, a revamp of their educational materials was required. These had previously been created purely for SEO and were optimised for such, which made them less than ideal for human consumption.

Solution

A redesign of the responsive template used for the Guides articles, with a range of different modules that could be used where needed. A new typography system as this content has differing needs to that of the product typography styles.

Outcome

This section of the TotallyMoney product now offers a more accessible and easier consumed library of valuable resources around credit, credit scores and financial literacy.

My Role

UX research
UX design
UI design

Tools

Miro
Sketch
InVision
Pen & paper

Design Process

1

Discover

2

Define

3

Design

Discover

User Testing

For the benchmarking, I conducted remote user testing via usertesting.com 3x mobile, 2x Desktop and with the following demographics:

Location UK Only
Age range: 18-65
Genders: male and female
A mixture of incomes
No previous TotallyMoney customers

Research Goals

The primary goal was to set a benchmark on the existing guides sections, and understand key pains and gains.
The focus was mainly on:
Find-ability - can users find guides that are relevant to them?

Engagement - is it easy to read, is the tone of voice patronising or helpful?

Insights

Most users were unable to find what they needed or get back to where they had been on the website.
Most participants expected to find guide content in the primary navigation.
Articles with lower word counts and more imagery were easier to read.
People felt a heavy push to sign up which could potentially damage their trust in us.
Our tone of voice was at the right comprehension level for most users but there was still some confusion over industry terminology and phrasing.

Define

Design Requirements

Armed with the insights gained from the Discovery stage, I prepared a list of suggested redesign requirements for the new Guides content. A responsive template which would enable the quick creation of new content pages when required, and visual design that would provide a much better experience for TotallyMoney customers.

The following list was decided for the next stage:

Type styles
3 item content block
Page header
Breadcrumbs
Infographic

Design

Typography

The existing typography was inconsistent across all of the articles, and presented readers with a wall of text that was difficult to scan. My goals were to create a hierarchy of heading styles so the reader could easily scan through the content to find what they need. Below you can see an example of the old design, and my new typography styles.

Design

New typography across small, medium & large screens

Header Section

Now that the typography had been refined, I moved onto the header section. This is the most important part of the page, and from this the reader should quickly be able to get an overview of what they will be reading, and how long it would take to read. The new design unifies the header as a separate part of the content, with a clear title and summary. The time to read is added below as supplementary information, and the breadcrumbs have been tidied up at the top for much easier wayfinding.