Project - Complete overhaul of long-established price comparison website, Moneyfacts.co.uk
Product /service - Offers advice and comparison tables to help customers find financial products like mortgages and savings accounts
Duration - 6 months so far
Team - Client review board,  3 x UX /visual designers /researchers, SEO analyst site data analyst
Activities - User interviews, workshops, usability testing, site data analysis, market /trend research, UX and competitor audit, persona and journey map creation, UX design, visual design, copywriting, prototyping.
Deliverables - Personas, user story /feature map, interactive prototype, visual style and component guide
Outcome - Project is still in progress

Before and after: Moneyfacts.co.uk: Completely overhauled for better user experience and a wider target audience.

As our client had little data on existing customers, and wanted to attract a wider demographic with the redesign, we carried out a thorough user research phase. This included site data analysis, survey, customer workshops, user interviews, usability tests on the current site, and UX SEO and competitor reviews.

Customer interviews and workshops helped us understand goals and motivations for people of different ages and incomes, visiting Moneyfacts.co.uk. This was the first time our client had commissioned qualitative research and it would be instrumental in setting the new design direction.

After tests, interviews and workshops, the team had a mountain of results to organise in order to create guiding design references such as personas. For example post usability testing on the current site, we arranged findings on a simple whiteboard, looked for positive and negative trends and created a list of design recommendations. 

Whilst older, financially-savvy users were expected to be the majority of site visitors, we learned that not everyone in that age bracket was so experienced with financial products. We also learned about the differing needs of the new, younger demographic our client wanted to cater for as well. Four personas covered the key findings.

Each persona contained findings relevant to UX design - goals, frustrations, user personality type, what they need to make a purchase decision and experience with industry jargon. We also included a small journey map that showed how each persona bought financial products today and where Moneyfacts.co.uk fitted into their decision-making process.

We conducted a review of competitor sites, covering key messages and positioning, language, content and UX decisions.We used this to help inform positioning for the new site, as well as advise on best-in-class standards for IA, content and UI components.

We combined the results of our own UX review and usability tests to help our client make an informed assessment of the current site, and how well it catered for the needs of each of the four personas. For each part of the site, and in particular for pain points we had identified, we included design recommendations for what can be done to remedy the issue.

In parallel, our analyst team carried out an SEO review, advising on top searches that brought customers to the site and most visited pages. This helped inform our reorganised IA navigation and much of the language used across the site.

We began sketching a new proposed design, tailored for the expected journeys each persona would take. We showed where each persona would be likely to go, for example if seeking general advice on mortgages, or searching for a particular deal on a savings account.

The new IA /site map went through several iterations over the course of design work, evolving in parallel with UX.

We mocked up new pages using Sketch, starting in black and white to help our client understand how the research done this far had fed into the new design. For every single choice of page, component and label, the design team could show a body of evidence and clear reasons for decisions taken. Our designs included several new ideas which the client had not considered, and we discussed pros and cons with them to arrive at decisions on first release details.

As the design team defined pages and components, they also created draft user stories to help guide development, tying back every component and feature to user stories and personas. We created this as a collaborative online map with the client, via Realtime Board.

The designs were iterated over several weeks, working in daily, close collaboration with the client and with the design team guiding them through the process every step of the way. With key decisions made on pages and components, we addressed visual design and recommended a direction that aided Moneyfacts in their new market positioning. 

For visual design direction, we presented three possible routes and recommended one. As part of this work we considered accessibility and ensured all designs were to AA standard by default. as well as using colour and typography to help draw attention to areas we knew would be higher priority for some personas.

Back to Top