Designing AutoSergei’s EnergyCheck

AutoSergei’s EnergyCheck 101 | CompareTheMarket | Keep Life Simples

Compare the Market’s new service, EnergyCheck, is here to help you get the best deal on your energy. With a few details, AutoSergei™ will take on the hard work for you by regularly checking the market for better prices. However, AutoSergei™ isn’t the only one who’s been busy — this is the story of how the Compare the Market UX team applied focussed research, collaboration and a bulletproof design process to create the iOS and Android app experiences.

The challenge

Remember the last time you switched your Energy supplier and were confident you’d answered all of the questions correctly, then not been overwhelmed by all of the available options, tariffs, and suppliers? No? You’re not alone.

The big challenge of this project was to create a quick and easy service that would simplify the energy comparison experience. We wanted users to feel confident about being on a great deal and totally on top of their admin.

Then we thought, wouldn’t it also be great if you had your own robot Meerkat to do all of this for you?

Background

It’s worth noting (for anyone who is not familiar with Compare the Market), that we didn’t go into this project completely blind. We already have a successful energy switching service on the web with plenty of usage data to really help shape the future of this service.

The team

Whilst there were plenty of people who played a part in this project across the business, this was the UX Design and Research core team:

UX Resource | AutoSergei’s EnergyCheck

Sketching for the best idea

I’m a really big advocate of sketching — the great thing about this stage of the process is the speed at which you can generate ideas. Some are bad, some are really bad, but every now and again there are some great ones.

Typically, I would also use this part of the process to contest ideas (note: this doesn’t have to be done alongside other designers, it can be with anyone in the business). There’s no such thing as a bad idea, just different perspectives, and values. Each person can present and justify their ideas — the chosen ones are then progressed to further rounds.

Mapping the experience

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.

Prototyping for 50 hours of research

We have the luxury of a state-of-the-art Usability Lab (and 2 amazing researchers!) in our Old Street office which ensures that we’re putting customers at the heart of what we do, by including them every step of the way as we build our products.

For anyone that knows me or has worked with me in the past, I spend a lot of time building fully interactive Axure prototypes for usability testing, to the point where participants (hopefully) think it’s a fully working application. Don’t get me wrong, there is certainly a time and place to show flat designs or sketches, but this wasn’t it.

We built 5 fully interactive prototypes, used by 50 participants, spanning 10 days of research.

Template-based design

When we had the full journey mapped out, it was very clear there were a number of screens that followed certain a certain structure. This presented us with a question: should we design individual screens and house the content within these, or should we just design templates and manage the content elsewhere? The latter would mean that when content got tweaked (and this was a certainty), we wouldn’t have to update the designs, sync to InVision and document the changes.

Work smarter, not harder, right?

Content inventory

Once we’d made the decision to only design templates and not every screen, we needed to set up a central shared document that would be the source of truth for the content. This document would contain IDs for each screen, with all of the relevant copy, validation rules and messaging.

Our other reason for creating this was stakeholder visibility. With the broad spectrum of people involved, it didn’t feel like a smart decision to be creating Excel spreadsheets, versioning them and sending them back and forth via email. The shared inventory would allow anyone relevant to view the most up-to-date content and provide feedback efficiently.

The final result

Final Designs | AutoSergei’s EnergyCheck

Keep it simple with the Meerkat app

  • Set up EnergyCheck in the app. Tell us about your energy usage and set your alert preferences.
  • Compare and buy energy on the go.
  • 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.

User Experience Designer at Compare the Market. Previously Dock9, FINE+RARE & AXA.