At compare the market.com we’ve always focused on customer needs when designing and building our products. Over the last couple of years we’ve introduced more User Centered Design principles.
Wikipedia describe User Centered Design as follows:
‘User-centered design … is a framework of processes … in which the needs, wants, and limitations of end users of a product, service or process are given extensive attention at each stage of the design process. … [It] not only requires designers to analyse and foresee how users are likely to use a product, but also to test the validity of their assumptions with regard to user behavior in real world tests with actual users at each stage of the process’
In short, this means validating everything with real customers – from early ideas through to a final finished product or feature. It means understanding and analyzing customer behavior every step of the way and updating your plans as you go, based on what you learn.
One of my responsibilities is to look after the strategy and delivery of our MEERKAT MOVIES app. MEERKAT MOVIES is comparethemarket.com’s reward for customers, offering 2 for 1 cinema tickets for a whole year when you make a qualifying purchase through us. Our apps for iOS and Android allow customers to redeem their weekly code to take a friend to the cinema.
In December 2015, we introduced movies content and cinema listings to our app, but we knew that the navigation we had at the time meant that these features weren’t as easily discoverable as we would like. When we looked at our data, we found that customers who did find this content were massively more engaged with the app.
We took this as an opportunity to think about redesigning the app, bringing movies content to the heart of the new experience. We hoped this would inspire customers to visit the cinema, and then help them plan their trip and book tickets. Our remit was to build the best cinema-going app in the UK. We took a user centered design approach to the new design.
Card sorting exercise
Working with our partner design agency, we asked a group of customers to tell us what was important to them when planning a cinema trip. We had 50 different feature ideas that we’d come up with, and invited customers to tell us if we’d missed anything by adding their own cards. We then asked customers to sort the cards in order of importance to them.
Some of the features we used in our card sorting exercise
Information architecture
With this insight, we felt we had a good understanding of the opportunities we had to help customers and the features that should form the basis of the new app. We started to think about what the initial ‘Home screen’ could show, and from there, how customers would access other features and information. We created a map of how users could move across the app:
To validate this with customers, we produced simple wireframe versions of the features that might appear on an individual screen. Although we were already starting to think about what the design of the app might look like, at this stage we were keen to keep the focus on the content rather than the design. To ensure that we were getting the content and context right, we put the wireframes on a mobile phone.
After testing these designs with customers, we made iterations and started to move towards testing completed designs. Every week or two we would bring more customers in and iterate our designs based on the feedback.
Internal alpha programme
Once development started on the app, we built up an internal community of staff across comparethemarket.com who had early test versions of the app on their device and would provide feedback. Over 80 members of staff helped from across the business to test the app in real-world scenarios. Their feedback helped us refine and improve what we were building.
Testing before we release
We ran a final round of Usability Testing before our release. We were pleased to find that our approach of involving customers every step of the way as we designed the product meant that the finished version performed well when participants used it.
Of course, we also discovered that we could make things better for customers and make the app easier to use. As an example, we’d substantially changed how a customer redeemed their weekly MEERKAT MOVIES code. We discovered that many participants were confused about how to find their code during testing. We’d carried out previous rounds of testing where the vast majority of participants had redeemed their code without any issues, but to our dismay, in our final sessions, almost every participant missed it. We had a big problem, and were launching in about a week.
The morning after testing, our entire Mobile team grouped together in front of a big screen to brainstorm how to fix this without disrupting our release plans. We came up with a solution together, which we then built into a new test version of the app by lunchtime. We then ran around our offices, showing the app to as many people as we could. Thankfully everyone spotted the new label and was able to redeem their code.
It’s tough to miss how to get your weekly code now!
Learning from real usage (and sometimes getting it wrong)
User centered design allows us to get a lot of things right first time. However, with over 2 million downloads; we’re always looking at how customers are using MEERKAT MOVIES to plan their next cinema trip and redeem their code, to identify opportunities to improve the experience.
As an example, we found that when customers visited the screen where they retrieved their MEERKAT MOVIES code, they would often exit the app immediately afterwards. In retrospect, it’s easy to see that we weren’t giving the customer any ‘action’ to take after redeeming their code. So, we added a new button for them to see what’s on at the cinema and inspire them with reasons to use the code they had redeemed. The result was that the number of people exiting from that screen went slightly up rather than down. We’re now using a combination of analytical data and user centered design to understand more about the behavior of users on that screen, and we’ll come up with a new version soon.
Before and after. Why didn’t this have the impact we’d hoped for?
What’s next?
comparethemarket.com’s London teams will soon be moving to brand new offices in the heart of Old Street. I have been working with the project team building out the new office to design and plan a dedicated Usability Lab. The lab will consist of two rooms, with one-way glass between them. We will be able to run 1-to-1 product testing sessions and small focus groups.
The plans for our new Usability Lab
As talking directly to customers is such a key component of user centered design, we’re hiring a full-time Usability Researcher to support us in planning, running and reporting on our usability research (and to own and run our new lab!). We’re excited about the opportunities that this will bring to test more of our products, with more customers, more often.
Our approach to building the MEERKAT MOVIES app is just one of the many examples of how we’re involving customers and using data to build our products. If you’re interested in learning more about how we apply user centered design at comparethemarket.com, or if you’re a Usability Researcher looking for an exciting new role, get in touch.