top of page

Guides Redesign


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.

Project Summary


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.


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.


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


  • Miro

  • Sketch

  • InVision

  • Pen & paper

Design Process



User Testing

For the benchmarking, I conducted remote user testing via 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?


  • 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.



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



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.

Screenshot 2022-12-06 at 21.32.52.png
Screenshot 2022-12-06 at 21.32.52.png

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.


Old Design



New Design

Final Designs

Apple iPhone 11 Pro Max Space Grey.png

Like what you see?

Let's chat.

Thank you for reading my case study!

Want to work with me? Feel free to contact me! Or just say hello on my social media.

bottom of page