MoneySavingExpert

MoneySavingExpert.com is one of the top editorial website for British consumer finance information. Its personality lie in the language and tone in the guides, articles, and blogs written by the 'experts on moneysaving' and the users’ interaction with the MSE forums and social media. I joined the in-house design team at MoneySavingExpert.com and closely worked with the product, tech and editorial teams with a focus on brand evolution, accessibility and design systems. I was responsible for new product features, design projects and daily tasks; UX research and user testing.

2016
Product Design, UX Design, Responsive Web Design
Problems with MoneySavingExpert.com
Reading Experience
In terms of scalability and MSE target audience being the UK population it would make sense to prioritise accessibility in the design. For example, with very important guides including rich content, becoming long pages with over 1000 words, it should be necessary to revise these page designs to ensure the user’s reading experience on any sized screen is enhanced, and do not marginalise users with disability.
Too Many Elements
Hundreds of different design elements exists throughout the website, creating too many focus on too many different areas of the page. There is a competing heirarchy that reduces focus on what is really the most important and relevant subject on the page. On the homepage, above the fold, there is a lot of repetition of links and information between what's in each widget.

Solution
Design that is built for scale, necessary so that development resource is not exhausted on current structure that can be limiting. A design system effectively allows businesses to make decisions quicker on new features and change design elements on the website more easily while maintaining consistency. It is necessary for the MSE website and its growing portfolio of products to have a focused, accessible, universal design language that will be central in keeping users engaged with the content, educational and useful information and tools.
With the team, we came up with three main goals to present with our concept:
1. Create a discovery hub for new users
2. User engagement below the fold
3. Consistent content hierarchy
Results
▸ Foundation for a design system that scales
▸ Visual design concepts for the direction of the brand
▸ Re-platform to Adobe Experience Manager
Tools and Product Forms
The majority of MSE tools and products have forms that users are often required to fill out. One of the popular tools is the Loans Eligibility Calculator that enables people to make a safe soft search for affordable loans most suited to them.
Problem
Each tool have different styles, structure and very little consistency between the forms. There are other ways to have each tool be distinct from one another, than just having new page designs. Instead of having various different design elements, which can be found throughout the site, how can we reduce creating new designs every time for each new widget, feature and page for existing and new tools?
Solution
In addition to and of solving the initial problem, and as part of the main initiative on creating a design language for MoneySavingExpert, I wanted to address the following in the form designs:
Accessibility — Forms should be capable of functioning for all people including the visually impaired.
Responsive forms — Forms should adapt to the smallest mobile screen size and be usable.
Page hierarchy — MSE should have flexible form modules that can be customised with consistent, familiar form elements and reordered so that it can meet requirements of both MSE's different tools and products.
Back to Top