How we ‘Broke the Rules’ of the Hotel Industry
The new Apollo Hotels website is 🔥
Enjoying the unique skyline of Amsterdam at a height of 85 meters with a drink or taking in the fresh, salty air at IJmuiden. All of this is part of the Apollo Hotels experience. Known for some of the most prestigious hotels in The Netherlands, Apollo Hotels decided to change the look and feel of all their hotels. They want their guests to feel like guests again and not like strangers.
With a new approach for offline and online, comes a new website. At the kick-off of this project it became clear that Apollo Hotels wants anything but a conventional website. They want the best user experience for their users without it taking away from the smooth looks of the website.
Features
We are super excited to launch this website with all its new features. And I want to mention two important features in particular:
- The design; from the start till the end, it’s anything but conventional
- The booking bar; making booking a room easier and in less clicks than booking.com
Design
With the new look and feel of Apollo Hotels comes a new way of presenting the hotels to their guests. Apollo Hotels’ new proposition is breaking the rules. Think of a Playstation 4 included in the room and staff that is wearing jeans with a shirt. They offer breakfast 24/7, have top restaurants and bars in their hotels and the hotels are situated on A-locations for a decent price.
Our job was to show the online user that Apollo Hotels is different from other hotels, which we did by doing the same as they do: by ‘breaking the rules’. The rules of a grid, in this case. A normal grid would be lined out with columns (the blue lines in the image below) and spacing (the spaces between the blue lines). We normally then align the content blocks of the website with the columns:
But not this time. This time we re-arranged the blocks on the grid:
This goes for all elements on the website. An example is the footer with USPs (unique selling points), where we also worked with the the height of the blocks. Here you can clearly see that the two red blocks are aligned in the middle of a column which is something we normally wouldn’t do.
We also worked with smaller block of images, for example:
As you can clearly see, we changed the way we use our grid and therefore we ‘broke our own rules’. This is one of the ways in which we show how the website stands out from others.
The booking bar
The centerpiece of the website is the booking bar. This is an essential part of the website in which we have put a lot of effort to make sure it can compete with booking flows of their competitors. We have looked into how many clicks other sites, likes booking.com for example, need before a person can close the happy flow of a booking. A happy flow is a flow in which everything works like it should. It is the ultimate flow for the user to walk through.
The booking bar is not the complete booking flow because the actual booking happens at an external site, which belongs to the booking engine Apollo Hotels works with, called Travelclick. Because we can’t provide the user with the complete booking flow, we wanted to make sure that the user would end up at the right page in the external booking flow. This lets the user book a room with the least amount of clicks.
We have divided the booking bar into 4 sections: location, number of guests and rooms, arrival and leave date. All the information about the hotels, guest occupancy per room, lowest price and availability of rooms is retrieved from Travelclick via a SOAP XML API (which, and the tech people among us will know, is not the fastest way to retrieve data). To make sure we provide the user with a fast booking bar, we cache all this data for all the hotels up to 2 months and refresh this every 15 minutes. If you book a room outside those 2 months we will get the data straight from Travelclick so this might take a little bit longer. As we know from analytics this will happen to only a few percent of the visitors. Now let’s walk you through the 4 sections of the booking bar.
Location
First you choose your preferred hotel. You can do so by scrolling, searching for name or location. Because the hotels are grouped by name, the website will also find all the hotel in the same location/area. Pretty cool!
Amount
Your second step is choosing the number of guests (adults & kids) and rooms you want to reserve for. We keep track of the most chosen combination and this will change the default automatically, so most likely you won’t have to change anything in this step. Notice how the number of rooms automatically changes if you reach the maximum of occupancy of the biggest room of that specific hotel.
Arrival
The system automatically selects tomorrow and the day after as arrival and leave dates. This is what the majority of the users of Apollo book. Yet again you are able to skip a part, making it possible to book a room in just 3 clicks:
- Open the bar
- Select hotel
- Press reserve button
But if you want to change your arrival date, the calendar will automatically show the availability and lowest price for a room, per day. The orange triangles indicate the lowest price for the next two months.
Leave
If you click on an arrival date, the booking bar will automatically shift to the leave dates. Here you will see till what date you can book, so if for example: the night of the 9th of December is fully booked, you’ll be able to book until the 9th. The rest of the dates will not be clickable.
Some famous last words
All work paid off when we were able to say: “Houston, we have lift off”. The same famous words that have been said during the launch of a space shuttle in the Apollo program. The website has been launched and now our work really starts. We will keep supporting Apollo Hotels with the development of their website and we will keep improving the user experience for the guests of Apollo Hotels.
Check out their awesome website here.
