Credit Club

2016 · UI Design

MoneySavingExpert’s Credit Club is a completely free credit scoring tool, built to help people better understand their credit card & loans product eligibility. The project was run between both MoneySavingExpert & MoneySupermarket, in conjunction with Experian (offering, for the first time ever, the Experian Credit Score completely free for life). I was appointed as design lead on the project, and worked from inception to launch of Credit Club in 2016. Credit Club builds upon MoneySavingExpert’s stable of eligibility calculators (for credit cards & loans) to use a ‘soft search’ on people’s credit files, ensuring it never impacts a user’s ability to get credit.
Project aims
1. To provide a free credit score. For life. 
The most obvious hook to Credit Club was offering users their Experian Credit Score (and eventually full credit file) for the low low cost of free. At launch, the only other way to do this was through Experian’s 30-day trial of CreditExpert (a service costing £14.99 monthly after the trial*).
2. Introduce MoneySavingExpert readership to the concept of 'affordability’. 
We were keen to better educate the MSE reader base on the factors that actually affect whether or not you’re offered a credit card or loan. Many still believe it is solely your credit score that determines this, but in reality, lenders assess applicants on their ‘affordability’ as well. Credit Club was to serve as an introduction to this aspect of applying for products, offering a unique affordability check to help users work out how much they could afford to borrow, using calculations based on their income and estimated spending. 
3. Educate users to help improve their habits when applying for product. 
MoneySavingExpert strives to offer content that allows readers to better their own understanding of their finances. Arguably, Credit Club’s most important purpose was to educate people on how applying for credit cards & loans actually works as there is a large degree of misunderstanding surrounding this process. Many people end up in what is known as the ‘rejection spiral’, where they’re constantly applying & being rejected even though they may have what looks like a solid credit score. Over time, all these applications have a negative effect on your eligibility, leaving black marks across your credit file. 
*Experian have since launched their own free credit scoring tool, CreditMatcher, which provides users with a free credit score & product eligibility calculator. But no affordability check.
Landing page
"Everyone should take time to manage and boost their credit score – it’s a crucial part of looking after your money properly. Yet the world of credit ratings is rife with misinformation and misunderstanding."
· · ·
Credit Club was intended to combat this misunderstanding by providing more transparency about the other criteria involved when lender’s consider someone for a product. To this end, the product was to offer users the following:
Their Experian Credit Score. A score based on the information held within someone’s credit file. A simple overview of how someone is doing.
An ‘Affordability Check’. A calculation powered by MoneySavingExpert, this checks three main criteria: the user’s debt ratio (how much they owe compared to their income), credit utilisation (how much of their available credit they're using) and disposable income (an estimate of their free cash after living expenses). Those three things, along with a user's credit report, influence lenders' decisions.
Their ‘Credit Hit-rate’. Another unique metric by MoneySavingExpert, this shows the percentage of a basket of top deals a user will likely get. This is intended to be a quick measure of how well someone is likely to do in the real world if they apply for credit.
Their credit cards & loans eligibility. Applying for products leaves a mark on your credit file, so these eligibility calculations instead perform a ‘soft’ search on a users file, and comparing it to some other data given during the registration process. The results allow a user to better gauge their likelihood of acceptance for products (given to them as a percentage per product) thereby cutting down on the amount of potential rejections they may suffer.
Factors affecting their credit profile. The key factors affecting a user's credit and affordability scores are, and how to improve them. This was to act as a precursor to Credit Club offering user’s their full credit file, as well as providing some additional MSE style editorial content.
Dashboard page
Design Approach
During my time at MoneySavingExpert, many of the projects that we worked on (as well as early concepts for Credit Club) were often attempts to radically change the site’s visual identity - fonts, colours, frameworks, etc... Whilst the urge to make a clean break from the legacy design of MSE is understandable, the form it took was often without much direction - it was redesign for the sake of redesign. I was keen not to throw the baby out with the bathwater for Credit Club. I aimed to evolve what already existed, to see if I could maintain what we all (perhaps flippantly) referred to as the ‘charm of MSE’ but do so in a way that could be scaled to the other products & pages of MoneySavingExpert.
For this project, there were two touchstones I was using as visual reference: the Credit Card Eligibility Calculator and the Cheap Energy Club.
Reconciling these two products involved looking at the wealth of styles MoneySavingExpert’s stable of pages (which often used similar elements but with a huge breadth of variation). Whilst the various parts of MSE look quite different, with different grids, widths, font sizes, styles, and on and on, there are a few common denominators, such as:
Fonts. The pairing of Museo Slab (in a multitude of weights) and Helvetica Neue appears across the majority of MSE’s responsively designed pages. I chose to champion a light weight of Museo Slab (300) for use on the Clubs platform - I wanted it to be a visual identifier that the user was on a Clubs page (compared to the guide & news pages of MSE that use a much heavier weight (900) of the brand font). As the 300 weight of Museo Slab isn’t particularly legible at smaller sizes, the 500 weight was paired with it for use in smaller headings. 
Colours. I’d previously worked on a refresh of the extensive colour palette MoneySavingExpert employs as part of the mobile optimisation of the main site. For Credit Club (and the wider Clubs platform) I wanted to reduce the amount of colours used (down to a primary colour, with one or two accents) - this strategy was to be another unique visual identifier for the Clubs platform. 
With the said, to ensure some consistency with the rest of the brand, I chose to retain some familiar elements, tweaking them to construct a more harmonious palette. These elements ranged from using a blue hyperlink colour across Credit Club (something that the stakeholders of the company were very keen to keep), to revising & updating the Credit Card Eligibility Calculator palette (both the navy blue/turquoise brand combination, as well the colours chosen for the ratings palette, seen in use across the dials of the dashboard & the eligibility of products). 
Grid & viewports. With consistency in mind, I made the decision to keep the 1000px width of the main MoneySavingExpert pages, and use a similar 12-column, nestable grid (albeit with some slight revisions that I collaborated on with the lead developer of the project). Whilst this made the desktop design quite slim, I felt it was a justified sacrifice to make the Credit Club more visually in tune with both MoneySavingExpert & the Cheap Energy Club*. 
One dramatic difference in Credit Club is that it runs on four viewports - most of MSE’s pages at the time had only a single breakpoint to differentiate between mobile & desktop devices. My intention was to build the product on a more robust, responsive foundation, allowing users to access the Credit Club across a whole range of devices (hopefully this would also prevent the business having to play catch up at a later date, as did occur with the mobile optimisation project). 
*Worth noting here that the Cheap Energy Club actually uses a 960px desktop width (common in designs from its time). I felt that if we were given the opportunity to use the front-end framework we were building for Credit Club, to redesign Cheap Energy Club, the marginal difference in widths would ensure some consistency between the new & old.
Constructing a pattern library off of the back of the basic styles above was the next step; we’d enjoyed success using this technique to consolidate huge swathes of discrepancy across MoneySavingExpert in the past. For this project, it allowed us to quickly iterate ideas & pages based upon simple templates, removing the need (mostly) for individual page designs across all viewport sizes. The team could instead build out pages using only a single viewport design, or in some case no design, where I would instead give a rundown of what modules to use where whilst the editorial team at MSE provided the wording.
The ability to change page layouts quickly & efficiently was vital, as the editorial copy was almost ever-changing - with three interested parties involved (MoneySavingExpert, MoneySupermarket & Experian) the editorial of Credit Club was changing almost all the way up to release. Thankfully, as team, we found a work around using templates & patterns to alleviate this issue.
Sample UI components from the pattern library... use as part of the registration journey
Credit Club is one of the most ambitious projects MoneySavingExpert has undertaken. It's a multi-company, multi-team effort that, over the course of 10 months, started life as a one-time-use calculator, before evolving into a full, account-based credit scoring tool. More than this, based on the work done by the design & development teams, the project has provided MoneySavingExpert with a new, scalable framework that can be extended across the entire Clubs platform in the future.
We successfully launched Credit Club on September 8th, 2016. As of February 2017, the product now offers users their full credit report, absolutely free.

You may also like

Mcenery-West Film
Only God Forgives
EVE Online: Daedalus
Children of Icarus
Space art
SalaryFinance / Learn
Illegal Architect
Back to Top