Platform: Web (Responsive)
Role: Product Designer
Year: May 2017 - December 2018
Internal Team: Guilherme Valerio, Nick Durrant, Cerys Branton
Development team: External developer
Improve landing page conversion & align visuals with the developing MSE style
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.
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’
4. Even more copy! A further explanation of the features
3. Too much dense copy explaining the benefit
Building the narrative
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.
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.
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
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.
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