Our offices close from 24 Dec –  4 Jan

Please note: Our offices will be closed for Christmas from Friday 24th December until Tuesday 4th January

This page showcases the emerging booking experience using the re-organised structure of services arranged into categories that are meaningful to the customer. Please read the explanations and try out the functionality.

NOTE: All users can now book via the front end as I’ve created code to display the correct booking option based on the users logged-in status and user role. This will improve the user experience and reduces the number of services to be managed in the back-end by 50%.

As non of you has a tenant user role the payment option presented in this demo will always be Stripe. You can check out using the card number 4242 4242 4242 4242 with any future date and 3-digit security code.

Booking Catalogue

This section demonstrates the catalogue booking view. Services are organised in categories reflecting use-case. Clicking on the category card opens a panel displaying the services available in that category. The service cards open a detailed view of that service where an overview of rooms providing that service can be displayed.

Navigate to book a service and at that stage the available rooms are displayed with the cost for that room + service combination.

Notes:

  • The service cards provide access to all rooms providing that service, so this isn’t the view to provide detail on a particular room.
  • The detail text on service cards is for demo purposes only.
  • The categories, services and rooms/desks displayed can be adjusted depending on where this view is used.

Booking Button

This section shows how the new category/service structure works via a single “book now” button. In this example “hot desks” are not included.

This approach is ideal where a customer knows what they want to book. It could also be displayed in call to action cards across the site – alongside a link to a catalogue booking page.

Single Room

This section demonstrates how booking of a single room works. In this case The Dart Room. Note that The Dart is only available in a conventional meeting room format, so the “category” step is omitted. If multiple categories were available they would display as per the previous section. 

The use case for this is on a detailed room page, which could include layout plans, detail of AV equipment etc.

Notes on Booking system

  • All users can now book via the front end as I’ve created code that displays the correct booking option based on the users logged-in status. This will reduce the number of services to be managed in the back-end by 50%.
  • Prices are set at the room level by service. This means a different price can be set for different layouts (categories) in the same room.

catering

I thought I’d include the demonstration of how catering might be booked. One additional benefit of separating this from booking of the rooms is to make more conventional use of the “extras” feature during booking (for example, to book an upgraded AV solution).