Designing ‘Your Bills’ Feature

Jason McCarthy
Jan 24 · 7 min read

Compare the Market’s new service, Your Bills, is here to keep on top of your bills and regular payments — this is the story of how the Compare the Market’s UX & Research teams applied focussed research, collaboration, and an iterative design process to create the iOS and Android app experiences.

Before I get into the detail of how we designed Your Bills, I want to rewind a few months.

Compare the Market enters Open Banking arena

Back in October 2018, BGL Group announced the signature of an agreement to purchase Saverd Ltd, the company behind the personal finance app Bean.

Bean is a digital personal finance manager that gives customers the ability to find, track and manage their bills and subscriptions in one app by linking to their bank accounts.

Thanks to new Open Banking regulations that came into force in January 2018, it is becoming easier for people to share their transactional payment data securely with third-party providers who are developing innovative propositions.

Price comparison hasn’t really changed for the past 10 years; this acquisition will allow us to innovate and help our customers compare, switch and save even more money.


What is Your Bills?

Through YourBills, Compare the Market can help you to keep on top of your bills and regular payments by helping you to better understand your spending and potential saving opportunities. It is a free to use service and you can remove your accounts at any time.

To use our service you’ll need to give your consent for us to access your financial data. This consent lasts for 90 days and will need to be refreshed — this ensures that your account is secure and that you’re in control of who is accessing your banking data.

While Compare the Market will be able to view your financial data, we cannot move any money, make payments or perform any other action on your account. If you decide you no longer wish to use this service you can revoke consent and you can remove your accounts at any time, either in-app or directly with your bank.

Research

Before, during and even after the acquisition of Bean we were actively doing research in our London usability lab exploring potential Open Banking capabilities and how these would translate to Compare the Market’s customer’s being able to compare, switch and save.

Some examples of the types of questions we were looking to answer were (in no particular order):

  • Do people know what Open Banking is?
  • Is Open Banking trusted?
  • Would people trust Compare the Market accessing their data?
  • What do people expect after connecting accounts?
  • Do they know the permission details they’re being asked for?
  • Do people need an aggregated view of their finances?
  • What potential features resonate best with customers?

After spending more than 40 hours in our London usability lab with Nick, our Senior Researcher, using 6 different prototypes, we ended up with 400+ pieces of valuable insight we could use going forward to start to design out the user journey for customers who want to connect their bank accounts and benefit from the Your Bills feature.

Flows & Wires

Planning and designing a journey that uses Open Banking is a little bit different as there are OBIE (Open Banking Implementation Entity) Guidelines in place, which bring together regulatory requirements and customer insight to create the Open Banking Standard for third-party providers, such as Compare the Market to follow.

These Guidelines cover the full end to end authentication journey that the customer follows from within the Meerkat app, through to authentication within the provider, and then completion back in the Meerkat app.

This said, I still followed the process of mapping out our own flows and wireframes as there is more to this feature than just connecting accounts inside the Meerkat App — I am designing flows and experiences that we don’t own several stages of.

When planning and designing a journey, user flows are critical for a number of reasons. For me, the most important are:

  • Faster iterations. Comprehensive user flows give us designers (and non-designers) a way to make changes faster. This is especially helpful when working on a native app experience where there are typically more screens to deal with.
  • Better communication. We can keep the discussion focussed on the flow, not on moving pixels around our screens.
  • Assisting developers/testing. Development teams will always have a source of truth for the screen logic, which also allows us to reference screen IDs for test cases.

Axure Prototypes

For years we’ve all had it drummed into us that we should never give anyone access to our bank account, and suddenly out of the blue for a lot of people, Open Banking comes along allowing third-party providers access.

Open Banking is designed to bring more competition and innovation to financial services and was set up by the Competition and Markets Authority on behalf of the UK Government, but ultimately for anyone not familiar with the concept, we are going to be asking customers to connect their bank account/personal accounts to our app.

With this in mind I started to build out an interactive prototype to demonstrate what exactly would happen when someone chose to connect a bank account, for 2 reasons; to use in research and also to use internally. Compare the Market has never done anything like this before.

A prototype that feels like it’s a fully working application, this can be shared around the business with fairly little handholding as to what is happening, it’s also the first time a lot of our customers have ever seen/used something like this.

In total, I built 6 different fully interactive prototypes in Axure. The reason for choosing Axure, over a basic clickable prototype was to allow the end-user to be able to select any bank/provider and the rest of the journey will relevant to them. For example, the way a Nationwide customer authenticates is slightly different from how a Monzo customer would.

From there we also wanted to tailor the rest of the journey to the user testing in research, for example, if someone wanted to add 4 different bank accounts they could and all of the following screens would reflect this. If we were to do this with a basic clickable prototype, we would need to design a screen for every single permutation, where Axure can handle all of this dynamically.

UI Development

Keeping the customer at the heart of what we do is something you will hear a lot around Compare the Market. We embraced this during the UI phase of this project by including our users every step of the way. Every single screen and UI component has either tested positively or a bi-product of direct feedback from our customers. During the UI phase of this project, we were putting iterated designs in front of customers every couple of weeks in our London usability lab

The launch of this feature will be app-only and available on both our iOS and Android platforms (Although Android will launch slightly later than iOS). We made a decision a couple of years back to design natively for both of these platforms, which in reality means double the amount of design work, but we felt that having an experience that felt native to the platform would outweigh any extra design work needed to accommodate both teams.

The best way to summarise the amount of UI design work done on this would be to put it into some numbers:

Final iOS screens: 76
Final Android screens: 70
Documented design iterations: 208

Keep it simple with the Meerkat app

  • Connect your accounts to keep on top of your bills and regular payments, helping you to better understand your spending, and potential saving opportunities.
  • The home of AutoSergei, who automatically checks for better car deals before you need to renew,
  • Easy insurance price comparison is also available across car, home, travel and more.
  • Tap to redeem your 2 for 1 with Meerkat Meals and Meerkat Movies when you buy through us.

I hope you enjoyed gaining a little insight into the work of the UX team here at comparethemarket.com, stay tuned for more!

Thanks for reading, Jase.

PS. We’re recruiting

We’re building the greatest UX team in the world at comparethemarket.com and you would be downright silly to miss out. We are looking to hire a couple of UX Design Managers to manage, mentor and grow our designers.

UX Design Manager

Compare the Market

The people behind comparethemarket.com and the Meerkat App

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store