With ever-changing travel restrictions, UK city breaks have been high on the agenda for many Brits this year. Whilst browsing for a city break ourselves here at Strafe we came across Roomzzz; they offer serviced apart-hotels in major cities across the country. Stylish space, useful facilities and all the essentials you need to enjoy a stay in your chosen destination.
Whilst the apartments they offer look great, we weren’t so keen on the user experience during the booking process. In the 6th instalment of our Reimagined series, we explore how Roomzzz could improve the booking experience on their website with a few small updates that will really make a difference to conversion.
Roomzzz was analysed and reimagined by:
-
Mary-Joy Ashley
Designer
-
Sarah Warsaw
Copywriter
-
Alex Whelbourne
Project Manager
So, where do you wanna go?
The main feature of a typical booking site is a clear search function. You insert location, dates and number of guests, giving the user clear results of the options available to them. Whilst this is built into the homepage on roomzzz.com it’s not the focus, it sits at the bottom of the page, obscuring the view below the fold.
A static banner with copy and three ‘buttons’ is the main body above the fold. Each button looks to be clickable yet there’s no indication where on the site they will lead you to or why you should go there. You can see on the heatmap (pictured below) that users’ eyes are drawn to this section of the homepage over the main booking feature.
Also featured is a Trip Advisor logo which has been designed to match the Roomzzz branding. In styling the logo this way, the objectivity of Trip Advisor giving them this ‘badge of honour’ is lost.
When engaging with the booking interface, we suggest disabling the ‘book now’ button until the date or a location category has been filled, otherwise, a search with an error can appear.
The three buttons do not have a clear CTA, as a user we're not sure which one to click or where to navigate to next.
The heatmap here clearly shows that users' eyes are drawn towards the centre of the homepage, rather than the main booking bar at the bottom.
Design Tip
Give users a clear call to action (CTA) when they land on a homepage, guide them through the journey you have envisioned for them.
Read more: Do I need a UX designer? How UX design will improve your conversions
Let’s explore...
When considering who will be browsing this site, we’ve identified three types of users:
- A user who knows exactly what they want and can complete the filters easily
- A user who is researching their options and browsing the site
- A user who is familiar with the brand and has stayed at Roomzzz Aparthotel before
Each user is likely to browse and move around the site in slightly different ways. In our case, we were user type two, just browsing. To help us choose our location and hotel we have two places to explore.
Firstly, the main navigation bar ‘Our Aparthotels’ offers a drop-down allowing you to explore each of the locations via the list, a map view or a summary page. We head to ‘York’ to view the options there.
A dark blue, sub-navigation bar shows the user all the areas of the page you can explore, including, facilities, reviews and location – each link takes you an anchor point on the page.
This works well until you click on ‘gallery’ or ‘virtual tour’, these links take the user to new pages, disrupting the flow. A user now doesn’t know if they’re on the same page or another page, making navigation less clear. Whilst important for SEO purposes, the browsing experience should be cohesive.
Via the navigation bar you can browse by choosing a city first.
The dark blue, second navigation shows all the sections of the York Aparthotel page you can view.
Design Tip:
Use a clear indicator on the second navigation bar to show users whereabouts they are on the page, for example here, a pink underline would work well.
Secondly, the main navigation bar offers ‘Travel Guides’, however, this taxonomy is not clear, this clicks through to a blog (see below). Our initial expectation was a map that allows us to explore things to do in each city, helping us choose a destination. Whilst there is a drop-down option to filter results by city, the taxonomy sets an expectation for the user that isn’t met.
The blog posts about each city could also be added to each Aparthotel City page to give further information about each Roomzzz destination.
The blog does not immediately meet the expectation of a ‘travel guide’.
Design Tip:
Use clear taxonomy in your navigation to help users easily find what they are looking for.
Ready to relax?
The next step in the booking process? Finding a room!
Depending on how our users navigate the site, they can find themselves on a slightly different booking page. See the images below.
Filling the date, location and number of guests via the homepage take you through to a booking page organised by room/apartment type. Whereas browsing via location takes you to similar looking pages, yet this time it is organised by rate type rather than by room.
Whilst it’s not 100% clear, there is an option to switch between views, however, having browsed the site on a number of different occasions this toggle wasn’t always there (see image 3 in the slider below).
In this view, the booking page is organised by room/apartment type, however, you can switch to rate.
In this view, the booking page is organised by rate type, however, you can also switch to room view.
In this example the navigation doesn’t have the rate/room view toggle at all.
Design Tip:
Include the ‘promo code’ at the check-out stage, rather than the initial search stage of the booking process.
Each viewing option has slightly different pricing, determined by the room type and whether or not a user has a ‘membership’ to Perkzzz. If you’re not clear what Perkzzz is, the naming of each option is quite confusing.
Once through to the final stage of booking, there are a number of up-sell options available which is great to see. You can even email yourself the booking link to look at again later on. However, unless the user is already a member and logged in, there is no option for Roomzzz to follow up with ‘abandoned cart’ emails automatically.
The final booking stage has up-sell and customisation options.
Roomzzz Reimagined
Let’s assume that the main purpose of this site is to convert bookings, whilst the sub-purpose is to capture customer details and encourage sign-up for the Perkzzz membership.
Our vision is to make this booking process smoother and more streamlined. There are a lot of views and browsing options within the website, addressing all types of needs for Roomzzz’s users, which is great. Saying that it’s important to ensure that the site does not get too confusing and turn customers off.
Here are some of the subtle design changes we would propose to Roomzzz to ensure a clear and intuitive booking process:
Homepage
We’ve opted to use the ‘F’ map design principle. This approach mirrors the way your eyes travel across and down a web page, scanning for important and relevant details. We’ve made the booking search bar the main focus of the page to instantly engage users, right in their eye-line.
Picking a Destination / Hotel
To navigate between sections on each destination page e.g. York, we have added new anchor points for “virtual tour” and “gallery”. If a new page is required for these sections, we suggest including a snippet of information and a CTA button. This way users are kept within the same page and can easily navigate between the sections they are browsing.
We also added a clear pink indicator, so users know exactly where they are on the page.
Making a booking
Within the booking process there are a number of amends we’ve made to ensure the user journey is much smoother:
- Perkzzz is the free membership that Roomzzz offers gives members a reduced rate. We’ve made the Perkzzz login button clearer at the top of the page.
- The main filter navigation is much cleaner. You can now clearly filter by destination, room type, booking rate type, dates, guests and number of rooms.
- The top-line filter menu is now sticky on scroll, all the way down the page.
- To easily view the price difference between a standard rate vs getting the membership, we’ve added a toggle that would appear ‘on’ automatically if a user was logged in.
Design Tip:
Put the urgency banner in the bottom right corner so that it sits out of the ‘F Map’ and the main eye-line of the user. This helps encourage the user to read more of the site rather than skim. You can see we’ve moved it from the left to the right in the new design.
What is Perkzzz?
Adding a pop-up during the booking process with the details of becoming a member might help customers understand the value of signing up and getting discounts. This should appear before a user gets to the room booking page, in our example we have ensured that it pops up when a user clicks ‘book now’, to give them the chance to sign up straight away and received the discounted price.
It’s the small things
The objective of sites like Roomzzz.com is to ensure it is easy for users to find the dates, price and location they want. Hotels and Apartments are usually listed on other sites such as booking.com, so whilst this helps with sales the ultimate goal is to remove any other competition from the booking experience. Ideally, you want to have potential customers only browse YOUR Aparthotel options directly on the site.
Whilst many of the design updates we have suggested are small, collectively they will create a smoother user experience on Roomzzz.com, ensuring customers quickly find their preferred Aparthotel and convert with ease.
Read more: Reimagined Series: Gousto