UX
So this afternoon I’d like to talk to you about Gatwick Parking. Gatwick Parking is part of Gatwick Airport and they offer the official parking for the airport and they have a range of products, which include Long Stay, Short Stay, Valet, Premium Parking, as well as selling products, such as lounges and equivalent to Fast Track through security. They came to us with a challenge and their challenge was: how do we increase bookings on mobile? And, when we’re talking about bookings in this case we’re talking about bookings for parking places.
Where do you start with that? It’s such a broad question. I think the first thing you have to do is try and translate what clients want into something we can work with. What the client actually wants is: where can we have the biggest impact in the shortest period of time while increasing mobile conversions?
So, with this we can start looking at the user journey. Here’s a simplified version of what one user journey might look like. We have a landing page; you choose your dates; you select your parking option; you then may select an extra, such as a lounge or Fast Track through security; and then you enter your details, confirm and pay. So where along this journey might you expect the biggest drop out to be? We found the biggest drop off was on the Parking Options page, where 67% of people dropped off. Incidentally, we do have individual landing pages that have larger bounce rates, but at this stage we don’t know what their motivations are, so we can put polls on either end of this journey to try and understand their motivations, but where we can have the biggest impact over the shortest period of time is trying to understand here on Section 3 – the Select Your Parking option – why people are dropping off. So we can analyse the user behaviour, and we can do this using click maps, scroll maps, user journey recordings, user testing, maybe some algorithmic eye tracking as well.
Here’s an example of a click map on this page and we can see that a lot of people are interacting with this Date Picker, which is strange because this seems to be the first thing they’re interacting with as well – which, as we already know from the previous step, they’ve already selected the date, so why are they coming onto this page and selecting their date again? And then the only actual CTA that’s visible is the “Apply” button. We can see part of a product, the Long Stay one, but we can’t see the price and we can’t see any button and how to select that. So what’s the solution?
Well, we hypothesised that, by reducing the Date Picker, we’d bring more focus back to the product and therefore bring the “Select” CTA into view, therefore increasing click-through rate on those CTAs and ultimately increase bookings.
So how do we go about testing that? Well, we have a version A and B. So we do an A/B test, straight split – we send half the traffic to A, which is our original, and half the traffic to B, which is our optimised version. As we can see here, B, we’ve collapsed down the Date Picker, which now brings the Long Stay product into view, we can see a price and we’ve got a “Select” button. So how did that perform? Well, by doing this we got a 6.9% increase in bookings, which is not bad. Not bad. But it got us thinking – if we have just reduced this Date Picker and been a bit more economical with space, if we’re even more economical with space, could we get a further uplift?
So we hypothesised that if we change the layout of the product and the product information to take up a smaller space, we’ll allow key information for more than one product to be visible, which would make it easier for people to compare products, which will increase click-through rates and ultimately increase bookings. And this is what it looked like. So A in this version is the winner from our previous experiment, and B is our proposed improvement. We can see on Version B we’ve now changed the layout of the products so the price goes up to the right-hand side; we’ve got a button over on the right-hand side which is good for right-handers (sorry lefties); and we’ve created a hierarchy of links so the “Select” being the more prominent and then the “Show Map” or “More Information” (which we know got a few clicks before) are now less prominent. This has allowed the next product to come into the viewport, Summer Special, and we can see the price of the next product and we can even see part of that CTA button, which indicates to people that there’s more information that if they scroll they can find more. We found this had an uplift of 11.1% which is even better than the previous experiment, but combined we had an uplift of 21%.
So what’s the moral of this story? Okay. Well, page length matters. People will scroll but only if there is a reason to do so. We’ve got to think beyond just responsive. Traditionally, when we talk about making a website mobile-ready, we simply collapse all the content down and stack it on top of each other, but now instead of having a large desktop screen where we have a lot more space to promote information, we’re now looking at a very small mobile screen, where we’re trying to get people to do exactly the same thing but with a lot less space to do it in. Thank you very much!