It was the best of times it was the... okayest of times.
In the beginning of 2020, OpenTable was building out a new product called Experiences. Teams were excited. Goals were set. Momentum was building. Then, the pandemic happened.
The organization quickly adjusted by offering financial support through programs like Open Door and built products restaurants needed now, like Takeout. We still believed Experiences would provide value to restaurants especially in these uncertain times and began to pick the project back up. This is a tale of two designers working across two marketplaces, restaurant and diner, to deliver a cohesive experience in the middle of a global pandemic.
Enter Experiences
OpenTable has been the leader in restaurant reservations for over twenty years. We saw an opportunity to expand beyond reservations with something called Experiences. Experiences is a new product area for OpenTable but there’s a good chance you’ve already been to one. Think of a restaurant offering a seasonal Summer menu highlighting produce at its prime. It might look something like this:
You see an ad for this Experience on Instagram or on the restaurant's website. You make a reservation which requires prepayment, much like a concert ticket. And now, you eagerly await the day. You arrive at the restaurant and are guided to a softly lit gazebo, you sit down in anticipation of what's ahead.
We wanted to bring Experiences to life at OpenTable for both our diners and our restaurants. It has enabled restaurants who want to showcase their unique offerings to diners so that they can stand out against other restaurants, while allowing diners to discover new and exciting things to do in their city. It was released in July 2020 and has been incredibly successful in helping restaurants rebound from the pandemic. Check out Experiences in your city by visiting opentable.com/experiences!
Sharing a Figma file
We use Figma for all product design work at OpenTable. Figma allows us to draw rectangles with beautifully rounded corners and move those rectangles 8 pixels around the screen, but more importantly it allows us to collaborate with the right people at the right times.
We used Figma to create one shared file between restaurant, diner, and brand teams while creating our user flows. We had a page in Figma to set context and document problem statements, understand users, and create story maps. These story maps were a useful tool to see the full end-to-end flow from restaurant to diner.
Collaborating on components
One piece of shared data was the Experience price in the product. Darren was working on displaying prices for Experiences in our Restaurant iPad app, which is used most often by hosts. How might we provide the most up-to-date pricing information for hosts to take action on? Luckily, Briana had thought through similar layouts for showing and calculating prices for diners.
Both sides of the marketplace were sending and receiving information in real time, resulting in a cohesive product.
We worked together to create a consistent pattern for showing price which also helped ensure that hosts and diners were seeing similar data so that if a problem did arise they both had the right context and information. Both sides of the marketplace were sending and receiving information in real time, resulting in a cohesive product. Having our files in one place allowed us to quickly riff on designs together which always led to a stronger result.
Delivering the same message
As the headline suggests, we shared our designs and learnings as a team. By the end of our zillionth presentation we could finish each other's sentences and were definitely operating telepathically. We could easily explain the nuances of a General Manager in a restaurant creating an Experience and elaborate on the varied ways a diner could book that same Experience.
By the end of our zillionth presentation we could finish each other's sentences and were definitely operating telepathically.
With both diner and restaurant design in sync we could quickly gain alignment across the organization. We were able to paint the full picture to our engineering teams and product leads that weren’t as close to the project. We also kept a Confluence page up-to-date with updated designs and milestones so that our product and engineering partners could drop-in at anytime throughout the project to get context. We got positive feedback from engineering leads about this presentation process, it seemed to instill confidence that work was complete and thorough.
A wonderful fact to reflect upon
We found that our design work benefited tremendously from working in the same file, it gave us easy access to share ideas and also gave engineers one place to see the full story.
Designing together led to presenting together which allowed us to tell our stories better and instilled confidence among our product development partners. This project allowed us to extend our reach in the diner and restaurant product areas and helped us grow as designers.
