Over the last six months at OpenTable, we’ve been looking at offers in our UK product and how we could better merchandise them to our users. OpenTable offers a varied from discounts to 2 for 1 dining and 7 course tasting menus. They are great for our diners – enabling them to try a new restaurant, discover a great value deal to share with friends or simply offering them a more affordable experience at a restaurant with a celebrity chef.
Some of the challenges we faced on our Opentable.co.uk site were about how, where and when to expose offers to our users and avoid making them overly pronounced or disruptive to the existing experience. Our ambition was to bring change, make offers more visible and to test if there was a bigger appetite for them with our diners.
We wanted to share some of our learnings and the principles we’ve applied as a result from this piece of work. The process of how we display offers will be ongoing, we’ll revise our solutions and keep testing them so that we can ensure that our users can discover and enjoy offers when dining out.
Don’t hide/mix your UI elements
One of the initial tests we ran was to move a ‘search for offers only’ checkbox outside of the search field rather than clicking in the search field to reveal the checkbox. It felt logical: the two elements perform different functions and aren’t related – so by hiding one within the other was unintuitive. By exposing the functionality we increase the ability for users to engage with it, which hopefully delights our users when they find a deal they didn’t set out intentionally to find.
When your user is making a selection don’t distract them
In the search results a user is shown a series of dining time slots and hovering over these time slots would reveal additional details about the different offers available. At this point, the user wasn’t able to select an offer, we still required the user to click the timeslot and then select and offer to book. As a piece of UI it was distracting and not something a user would expect. It goes against the principle that at the point your user is making a selection don’t give them additional options to read and so distract them from the task they are about to complete.
Additionally, we want to make sure we have functional parity across all devices: the hover state isn’t available on touchscreen devices and so it was an obvious choice to remove it.
Beware of changing perceptions unintentionally
From a designers point of view, the easiest way to get a new element to stand out is by styling the element differently to it’s surroundings, whether that be through colour, font styling or layout. But while it’s far more noticeable, how much does it detract from everything else?
Beware of adding additional colours – it can change the user’s perception of how your site functions. In one of our tests we looked at allocating a specific colour for offers (green) to make it more visible but once applied, it made users feel that only offers were available and other time slots were unavailable:
Now on reflection, it seems obvious that adding green against red changed people’s perceptions to a stop/go mentality seen in traffic lights so you can understand why this didn’t test as well as we’d have liked!
Conclusion
While these key learnings may not be rocket science, they are definitely valuable especially when trying to strike a balance between increasing the visibility of a feature and not risking changing the perceptions of how users think your site works and therefore detracting from the core purpose of your service.
As we go forward we’ll add updates about our other learnings, not just about offers but across our whole product, so check back soon!
