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
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.
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
Sketches
Wireframes
New Design
Final Designs
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.