Four Seasons unveiled its new website earlier this month, with many eyebrows raised as a result of the reported $18m pricetag. 

While this seems like a lot of money for a site relaunch, it is an international brand, and the $18m may cover more than just a redesign. 

The important point is whether or not this website will help it achieve its aim of improving its online revenues, which currently stand at 12% of overall sales.

With the help of some user testing videos (kindly provided by whatusersdo), I’ve been looking at the user experience on the new Four Seasons site

While the site contains some great imagery and content, there is plenty of room for improvement, and it’s a big fail on accessibility

Homepage

Thanks to some stunning photography, and the amount of homepage real estate devoted to it, the site looks great. 

The page is simple enough too, as visitors can easily see the various options, to search by continent, or use make a reservation. 

Four Seasons has kept the page relatively sparse compared to some travel brands, eschewing the destination ideas, special offers and promotions that are common to travel sites. 

The three testers were all impressed with the quality and range of imagery on the site. 

Navigation & hotel selection

At first glance the navigation looks like it will be simple enough, but Four Seasons hasn’t done enough to help users search effectively, or narrow the choice of destination. 

If I attempt to select a destination from the reservation tool, I have a long scroll to find a hotel: 

Unless the user already has a clear idea of the hotel and destination, they are going to have to do a lot of browsing to check out the various options. 

Let’s say I fancy a holiday in California (which would be nice), I have a number of possible options, but I need to navigate back and forth far more than is necessary.

If I go to the North America page to check out the hotel in Santa Barbara, and then want to see information about San Diego, I need to head back to the homepage, select continent, then the destination. Too many clicks.

A better option would be to add more filters and search options so that visitors can look for hotels according to region, or other factors such as proximity to beaches and local nightlife, hotel facilities, or availability on the chosen dates. 

For example, there are three hotels in LA. If my initial selection is fully booked on my chosen dates, then why not recommend another in the same city that is available? 

I didn’t initially see these options (too busy looking at pictures), but there are links at the top of the screen, one of which (find a hotel or resort) allows you to search by interest – beach, skiing, family etc. 

This is a useful addition, but the option should be incorporated into the reservation selection, and used along with other information (such as desired destination) to help users narrow their searches.  

Lots of scrolling

The images that dominate every page do look good, but they also mean that users have to do plenty of scrolling to find the information they want.  

One tester found this annoying, as since the majority of the screen is taken up with images, they have to scroll to see more info, even to see the booking calendar in full.   

Hotel pages

Again, the quality of the photography does convey the luxury brand values very well, and makes the hotels very appealing. 

There is a lot of information provided here, both about hotel facilities and the destination itself. The addition of reviews from TripAdvisor and comments on both Facebook and Twitter is also useful. 

Booking process

One of the testers had trouble with the reservation tool. First of all, the dates are presented in US format, which could be confusing for users from other countries. 

Would it be so hard (and this applies to currency as well) to detect the visitor’s location and adapt dates, currency etc to them? 

As you can see in the video, the tester also had difficulty selecting the check in and check out dates. This took more than two minutes, which would be enough to deter many customers. 

The various room / suite options are well presented. Users can scroll down the list and expand to view more details on a specific result.

 

If the hotel is unavailable on the date you selected, then you get this error message:

This is quite an odd error message, and suggests a lack of attention to detail in messaging, and it does little to help the customer. 

Having converted the currency to sterling on the results page, it is a little annoying that it switches back to Euros on the confirmation page. 

Also, the payment options are below the fold, and there is no clue to suggest where I need to go next to complete the booking.  This should be obvious. 

Mobile 

The press release which accompanied the redesign says the site has been fully optimised for mobiles and tablets.

Sure enough, having found the website on Google, the homepage of the mobile site looks OK. Nice picture of the Arc de Triomphe and a simple menu layout:

However, each of the four main links here take you to pages which have not been designed for mobile, such as this ‘find a destination’ page: 

It isn’t great on an iPad either. It doesn’t quite fit on the tablet’s screen, and the links are so close together that it’s too easy to click on the wrong one. 

Also, the booking calendar tool is very small on an iPad, and it’s very difficult to click accurately.

Considering the fact that Four Seasons talks up the importance of the iPad and its wealthy users, it could have done more to tailor the experience to the tablet. 

Accessibility

There are also some serious accessibility issues with this website, which make it very difficult to use for visually impaired users. 

Jamie Sands from User Vision has helpfully identified some serious accessibility issues. It would be a very long post if I included all of them, but here’s a sample:

Missing or inappropriate alt text on images

Most of the images have either no alternative text, and those that do have inappropriate text which either didn’t match the image, or was reused for multiple photos. 

Inaccessible navigation

The booking engine (and therefore the whole site) is useless to keyboard users since, when tabbing through the features, the calendar itself is not accessible. 

Other accessibility issues (and there are plenty) include: 

  • New windows open without warning.
  • Error messages not optimised for disabled users. 
  • Small navigation elements. 
  • Poor colour contrast.

According to Jamie, it’s an accessibility disaster:

The site fails on at least one aspect of all  four of the current WCAG 2.0 principles (Perceivable, Operable, Understandable, robust). In general, this site does not seem to have been designed with accessibility in mind and a full audit to establish the level of barrier to accessibility is recommended. 

Conclusion

The Four Seasons website looks great, and contains some extensive and very useful content on each hotel, but there are many flaws. 

For such a big project, there isn’t much evidence of user-centred design here, as there are numerous usability issues which could irritate and deter customers. 

These include key elements ‘hidden’ below the fold, a less than intuitive booking engine, not enough filters to help narrow hotel selection, and a poor mobile site. 

Perhaps the worst thing of all is that, as outlined above, the site appears to have been designed without any consideration for accessibility. This is not only bad form, but it’s also bad business. 

For example, in the UK alone, there are 10m disabled people, roughly 18% of the population, many of which will have problems using this site. This is a large audience to exclude from your site. 

If this website did cost $18m as reports suggest, then it seems shocking that providing a great user experience was not high on the agenda, and that such a large project did not seem to consider whether the site would be accessible. 

As UX expert Tom Stewart commented ”despite the umpteen millions it cost, it still appears to have been designed by a photographer (they are stunning) and a computer programmer”