Design principles for a payments experience

At work at OpenTable

Design principles can often take the shape of aspirational qualities or attributes — they sound great and everyone nods their head when they hear them, but they rarely serve the purpose of helping to guide and shape the outcome. The best principles are applicable to what you’re designing and help provide a framework for making decisions (More on design principles).

We’ve had lots of design principles at OpenTable, some we’ve written on the walls, others are always present in our conversations about a design (even without writing them down). Here are a few of the principles we’ve actively used as we developed a new experience for paying at a restaurant.

Look beyond friction within your product

Whenever you remove a known convention to reduce steps and make things easier, you will likely create new points of friction, often outside your product.

We removed all the back and forth involved in asking for, receiving and paying for the check by automating much of it with our app. This reduced the number of steps and time in the process, but introduced new issues.

Because there are different systems involved, diners have to let their waiter know that they are going to pay with OpenTable. That may seem like a small thing to mention, but remembering to do this and knowing when is the right time creates new burdens.

Now that the restaurant knows you’re going to pay through OpenTable — sure, people could get up and walk out unannounced — but they usually won’t. There is a general uncertainty about whether they have actually paid or if they need to tell their waiter they are leaving.

We designed subtle cues that help you know what you need to do without you needing to go look for instructions in the app. However, we also worked with the restaurant staff to identify equally subtle shifts in their interactions with the guests that would influence the perception of the service and how it works.

Honor the ceremony

Don’t eliminate the interactions that are meaningful between people for the perceived convenience of speed or fewer steps.

Asking diners to interact with an app on their phone takes their attention away from the waiter, their meal, and their companions. In addition, automatically delivering the check to your phone eliminates consistent cues that allow the restaurant to time your experience and ensure they deliver all the finishing touches.

Our team designed an experience that only requires one swipe in the app to pay for your meal, and you can do it whenever you (and your waiter) are ready. While you have immediate access to your check—and control over your tip—you don’t need to look at it for it to work. This enables the final moments at the restaurant to involve fewer transactions.

Design for no interaction

The moments between each tap, swipe or scrub are just as important to your experience.

We didn’t design the payment experience to give you anytime access to your check on the phone (though that’s there if you need it). Our main focus was to help you and the restaurant pay less attention to the transaction of money. To do this, our service has to work in the background. Automating the exchange of something that people are accustomed to doing through a physical exchange can make people nervous.

Our team spent a lot of time designing the screen diners hopefully won’t be looking at to provide confidence in the service and product experience. We wanted diners to know that the app is working, even at a glance, without needing to tap into something. We made the screen gently “breathe” and fade into the dining environment’s background to achieve this.

Win best supporting actor

We’re in support of an experience, we’re not the featured attraction.

This is one of our core principles and extends beyond our payments experience to everything we do. Our products are in service to the diners and in support of a restaurant’s ability to be hospitable.

OpenTable’s restaurant listings and reservations are one of our most valuable assets. However, when you’re at a restaurant you’re likely not thinking about other restaurants or booking them (even if we hope you are).

We completely remove the distraction of our most important revenue driver (reservations) using our knowledge of you and your reservation to know when you’re at a restaurant. We use this to feature what might be useful to you in the moment — and in service to the restaurant.

Design with seams

Don’t remove points of friction that help people have more meaningful interactions.

Know when to stop making it more seamless and simple — essentially, leave in some of the seams of experience. Seams can be felt, they identify a transition, and importantly, offer an expectation for people to know where to look to understand or interact with a transition. It’s much easier to smooth out seams or remove them later than reintroduce them.

In creating a new payment method we want to make it easier to pay and enable diners to think less about money during their meal. If the diner needs to declare their payment method intentions before their meal has started or ask the waiter for a table number to enter in the app, the diner is forced to think about payment more frequently, not less. On the other hand, if the service makes it possible for the diner to pay and leave so seamlessly the waiter doesn’t know until after it’s happened, the experience the restaurant wants to provide diners has been interrupted.
Even though we could make paying with OpenTable so seamless the diner could pay and leave anytime they like, we chose to retain a point of friction, designing the service to enable the waiter to control when they’re ready for the diner to pay and leave.

This raises an important comparison or point of inspiration that commonly surfaced while we developed this product experience — “it should be like Uber!” While the comparison works for establishing a model of having a credit card on file to automate a real-time payment, paying at a restaurant is an entirely different context than in a taxi.
While you might chat with your taxi driver, you didn’t come for the conversation, the car seats, or the pine-scented atmosphere. When you get in a taxi your objective, most often, is to get somewhere quickly (which includes getting out of the cab as soon as possible).
By contrast, when you go out to a restaurant, especially a reservation-taking restaurant, you’re there to be waited on. It is, most often, not about getting in and out as quickly as possible. You’re there to enjoy the food, the atmosphere and the well-timed interactions with the restaurant. Taking as much in-person interaction as possible out of the approach to the service misses the point and doesn’t serve the needs of the restaurant (to be hospitable!).

Light the Way

Don’t trap people, equip them to move effortlessly throughout the system.

Like win best supporting actor, this principle is present in everything we design. We’re committed to making it easy to pivot (i.e. let me change my search, my location, my mind), helping people recover from errors (without blaming them or making them feel stupid) and eradicating dead ends.

Menus and nested paths provide structures that can be clearly understood for knowing where to look for things or digging deeper. However, those those conventions won’t do when you’re designing for an in-context experience that is infrequent and time-sensitive.

We think of every page as a landing page in our payments app by showing people the alternative paths or interactions directly on this screen. The service, not just the screens need to be designed with this in mind to avoid cluttering the screen or bundling options into menus.

Open and adaptable

Recognize that the situation is complicated and may change.

There is no specific anecdote for this. Things will change. Technology will change. People will want new features. Design for the unknown future.

Many thanks to the @chloepark, @meesasun, @ladylexy, and the OpenTable design team.