top of page
tm_header.jpg

Guides Redesign

TotallyMoney

Apple iPhone 11 Pro Max Space Grey.png

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.

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

  • Figma

  • Pen & paper

My Design Process

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.

Discover
Define

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
Screenshot 2022-12-06 at 21.32.52.png
Screenshot 2022-12-06 at 21.32.52.png
Artboard.jpg
content_guide_sml.jpg
content_guide_med.jpg
content_guide_lrg.jpg

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.

before.jpg

Old Design

Sketches

Wireframes

New Design

Final Designs

Apple iPhone 11 Pro Max Space Grey.png
content_sml.jpg
Death_to_Stock_Tactile_4.jpeg

Like what you see?

Let's chat.

bottom of page