[Edit: We won an award for this piece of tech! Read more about it here.]
Since launching back in October, the 'Choose your table' functionality on the relaunched M Restaurants website has been making industry headlines. It is, perhaps, the first restaurant website in the UK that allows you to pick your table, airline style, when making a dinner booking. Here's how I went about setting it up (it's simpler than you think).
One of the benefits of going freelance full-time this year has been that I can dedicate some serious time to my favourite clients. Last month I took a 6-week period out of office jobs, working day and night on two new websites for M Restaurants. Cabin fever aside, I am really proud of the results.
The award winning, multifaceted venue, which houses two 100-cover restaurants, launched in the city a year ago with my logos above the door. Since then, they've been so successful, that a new venue is launching in December over in Victoria, which will incorporate a wine store, as well as a HUGE restaurant.
Martin Williams (former Gaucho MD and founder of 'M') needed an online offering for his new M Wine Store, as well as being able to incorporate the new restaurant venue into the existing mrestaurants.co.uk site. It was Martin who came up with the idea to introduce the table picking functionality, and tasked me with making it a reality.
"With M's promise to not kick you off your table until you are good and ready to leave, this is a seriously great service."
There were a number of low-tech solutions that immediately came to mind. I was given an overhead table plan of the restaurant, and I dived straight into Illustrator to make a pretty version for the website. The idea was to create simple hotspots over a jpeg of the table plan that a user could click on to reveal table numbers to quote while booking. This would work, but the user would have no real indication of where the table sat in relation to the rest of the restaurant. Also, the restaurant has these incredible blue booths that are brilliant for small parties. This flat jpeg wasn't doing them justice.
Thankfully, Stacey Anderson (M's awesome marketing manager) had worked with a Google Street View photographer before. She commissioned Annalisa Banello to shoot 360 degree panoramic stills of the entire restaurant, and had it added to Street View! Once it went live, we had this to work with...
Armed with a feature that now allows the user to explore inside the restaurant, I went about researching a method to add an overlay to the street view map so that I could add interactive elements.
The results weren't fruitful. I'm a designer by trade, with a pretty good handle on HTML/CSS. But some of the code needed to add hotspots that would track the position of the tables within the restaurants was way above my skill set. I also had one week left on my deadline to get something more adventurous built.
Luckily, after a conversation with Annalisa, she directed me to an LA-based company called Walk Into. They specialise in online tours using trusted Google photographers. Usually, the company is used to create virtual walking tours for tourists. Elements can be placed on top of the street view panoramas to highlight things like statues or buildings and create notes about them. The site then generates an embed code to allow you to publish to your own site. This was perfect for our needs. It's free until Dec 2015, after which it's $30 per year.
I went about adding the table numbers and colours to the inside of our restaurant. I won't lie, this bit sucked. The reference points are 2D only, which use X and Y positions relative to the photograph. So for each position you can view a table from (each time you press the arrow to move) within the restaurant, I had to add a reference point with a table number and a phone number. You also need to scale the hotspots so that the ones in the background look far away. There are 14 bookable tables. IT TOOK FOREVER!
Armed with the embed code, I plonked this onto our website. Unfortunately, because the content is being served from an external source, I wasn't able to figure out a way to hook this up to our booking system. We use OpenTable at M Restaurants, so other than setting up an OpenTable booking form for each individual table in the restaurant (which you're not allowed to do, I checked) I would need to add a contact form underneath, with a list of table options for the user to pick from. I added this simply, but the majority of bookings for M come by phone, so as long as the telephone details were on the street view map we'd have our bases covered.
The result is a sexy looking table picker, that allows the user to see exactly where they will be sat. Coupled with M's promise to not kick you off your table until you are good and ready to leave, this is a seriously great service, and one that sets M's hospitality apart from the rest.
See the table picker live here »
Coverage:
Evening Standard: M Restaurants let customers reserve seat, airline-style
Hospitality Technology: M Restaurants Launches Airline Style Choose a Seat Policy
Eat Out: M RESTAURANTS REVAMPS TABLE BOOKING POLICIES
Drinks Business: M RESTAURANT LAUNCHES AIRLINE-STYLE SEATING POLICY
