Dan Collins
Dan Collins Creative
CC tile.jpg

Credit Club

CC Banner.jpg

Company:  MoneySavingExpert
Platform: Web (Responsive)
Role: Product Designer

Year: May 2017 - December 2018
Internal Team: Guilherme Valerio, Nick Durrant, Cerys Branton
Development team: External developer


 

The challenge

Improve landing page conversion & align visuals with the developing MSE style

 
CC conversion rate.jpg

The aim

60% of Credit Club’s traffic was on mobile, yet when it came to entering the registration funnel from the landing page mobile performed 30% worse than the desktop counterpart. Our goal was to increase the number of users who entered that funnel.

Alongside this MoneySavingExpert was in the midst of small shift in its visual style, this was an opportunity for us to not only improve the landing page but also bring the CreditClub visual style inline with the MSE style.

 
Showing on desktop as mobile scroll was too long for a gif…

Showing on desktop as mobile scroll was too long for a gif…

Why it wasn’t working

There were some very clear issues with the landing page

  • The main user benefit was not clear

  • The content was primarily written for SEO & there was LOADS of it

  • The videos, although informative, were extensive (some longer than 7mins)

  • Credit Club’s credit provider Experian had a heavy visual prominence, making it unclear who was providing this product.

  • There were multiple levels of navigation, the first of which all took the user off site.

 

 

Break it down

Focussing on the 4 main problem areas

 

2. Product features were cluttered and dense

1. Too much copy above the ‘fold’

CC - Mobile - P1.png
CC - Mobile - P2.png
 

4. Even more copy! A further explanation of the features

3. Too much dense copy explaining the benefit

CC - Mobile - P3.png
CC - Mobile - P4.png
 

Building the narrative

 
Drawn wires.png

Reduce, Re-use and Re-work

We knew the main task for us was to reduce the sheer amount of content that was on this landing page. However, with that said, we were still aware that it actually held a lot of great pieces of information, nestled somewhere in there were some great gems. These led us down the right track as we began to build the structure of the new page.

Along side this, we had recently developed a new feature in the product and wanted to be able to promote this on the landing page. This meant we now had to consider adding more content, whilst overall stripping it back.

We took a step back and looked at what the main benefits were to the user and used these as our building blocks to the landing page.


 
HP IA.png

Benefit led sections

We broke down the page into clearly defined sections, allowing us to talk to each benefit in further detail. After many rounds of iterations we landed on these as the main sections (seen on the right)

We felt that the first section had to have a clear and prominent hook, this is where we re-used the old tagline and brought it forward to be the main message on the page.

When talking with users in the lead up to Credit Monitor we found that the FREE messaging was still a very important aspect of the product which we leveraged both on this landing page and throughout the Credit Monitor product.

 

Adopting a new style

 

Understanding the brand, the market & our users feelings

Prior to this project I had been conducting a wider piece of work looking at the current Credit Club brand and where it sat in amongst our competitors. I began by doing a simple brand audit of those competitors to analyse if we needed to put more emphasis on distinguishing ourselves as a brand whilst still keeping connected to MoneySavingExpert.

To help back this up, we had some data available from a UserZoom study which delved into how Credit Club currently made our users feel. I was able to lean into this research and create an initial direction for us to head in, which not only kept the connection between MSE and CC but also made the user feel confident and comfortable with the product.

As previously mentioned, one aspect we began to explore was the tag line, however ultimately we decided to stick with the original tag line to keep a clear familiarity with the product.

Please see the slides on the right.

 
New homepage desktop.gif

Putting the pieces together

Here you can see the end result (desktop).

However, the journey to this point was not smooth. We had built a version prior to this, with a variation in the ‘Your credit profile’ section. We released this variation to 50% of the population with an A/B test, good thing we did too.

This variation caused some major problems for us. The scroll kept getting users stuck as it wasn’t immediately clear how to navigate down through the page, this initially caused a dip in desktop conversion.

Desktop conversion dropped by -15%, whereas mobile had a solid increase of +15% conversion rate. The reason for the difference was purely the “your credit profile’ section, the mobile design didn’t use the same mechanism and therefore didn’t cause any issues.

Although a stumble with our progress it still ultimately proved that we were on the right track - especially for our main target mobile conversion.

 

The end result

 

All’s well that ends well

Results.jpg

I am very happy to say that we achieved our goal of improving conversion rates on mobile, with an added bonus of improving conversion across all devices. Along with this I got to completely refresh the landing page and adapt the visual style to link with the shift that was going on within MoneySavingExpert.

We took an overwhelming & dense landing page, just there for SEO to an engaging product landing page which broke down the benefits to the user in bite sized chunks.

This was a fun and fast paced project to work on, given the opportunity to re-visit the project I would like to refine and develop the imagery alongside the MSE Graphic Designer.

CC Mobile home page.gif
 

Key takeaways

 
  • Working in a small knit team really helped with achieving the pace needed for this project.

  • Working with a UX writer to build the content hierarchy so that it told the correct story was a must.

  • It doesn’t have to be difficult to work with developers overseas (external resource). In fact this worked incredibly smoothly.

  • Making mistakes is totally fine as long as you can roll it back & learn from the mistake then make amends