08 Nov 10 Years of Hotel Website Design Trends with the Wayback Machine
We take a look back at hotel websites from 2007, 2012, and today so we can project where hotel website design is going by understanding where it’s been.
Most people haven’t heard of one of the internet’s most magical websites, the Wayback Machine. It allows you to surf back years and see what any website used to look like throughout the internet’s (relatively brief) history. It’s kind of fun…but it also can be informative and insightful. With a little help from the Wayback Machine, we took a look at how hotel web design has matured over the last 10 years and included screenshots of three hotels’ websites from 2007, 2012, and 2017, and consider where it could be headed next.
West Coast Boutique: The Argonaut (San Francisco, CA)
Perhaps the easiest-to-identify difference here is the consistently growing space for an image. In 2007, it was confined within body text, by 2012 it’s more prominent, and, in 2017, it spans the width of the website, and is on a slider, so the image changes every few seconds.
There’s also a tagline front and center in 2017 – “An Iconic, Coastal Inspired Boutique Hotel,” and then in slightly smaller text, “In San Francisco’s Historic Ghiradelli Square.” The information hierarchy is clear, and as visitors to the website, we naturally understand what we should be looking at. In the earlier iterations (especially 2007), here and across the web, the visitor’s time was taken for granted – the mindset: “of course they would read the text.” Now, with our phones competing for our attention every few seconds, that’s far from a sure thing. So designers must be efficient and economical in how they speak to the visitor.
Hotel Web Design Takeaway: Think of the one thing you most want visitors to do – the one action you want them to take – and optimize for that. No competing headlines or buttons. Make the message concise and the “next step” obvious.
Global Brand: Marriott (Worldwide)
Marriott’s website in 2007 has a single pictorial graphic that only occupies about 10 percent of the screen. The rest of website is text, and almost has the look of a directory. By 2012, they were playing with the en vogue “card” format – the booking element and those behind it could be manipulated and moved based on mouse movements. Making mouse movements a main component of your UX isn’t a mobile-friendly idea, though.
It’s also interesting to see how much information Marriott was asking for from the user in 2007 and 2012: city, state, country, check-in and out dates, number of rooms, and guests per room. That’s a lot to ask from someone who’s only on the home page of your website. The 2017 version is significantly more welcoming: a large image as the background and only two input fields for visitors (destination and departure/return dates). This snappier form is an easier way to get visitors in their funnel.
Hotel Web Design Takeaway: iPhones were around for five years by the time of the 2012 iteration, and yet the Marriott website was woefully mobile unfriendly. They reduced the fields, buttons, and text on their homepage dramatically just in the last five years, and that’s a change that’s welcome to both mobile and desktop visitors. Cut out the unessential and strongly consider your mobile users during your next website redesign if you haven’t already.
East Coast Boutique: The Liberty Hotel (Boston, MA)
Look at that wall of text in 2007 – that’s a lot of words! 358, to be exact. In the 2012 version, you’ll notice that the 2012 version of The Liberty’s website doesn’t even render properly in a modern browser due to its reliance on Adobe Flash, which was finally killed by Adobe last summer. The death of Flash started with the introduction of the iPhone, which Steve Jobs famously made as a Flash-unfriendly device.
Meanwhile, the 2017 version of the website is very strong. It gives visitors a full-screen view of one of their rooms, but has navigation options tastefully positioned in the corner, with a “reserve” button in the upper right-hand corner, and the local temperature at the Boston-based hotel down below. It’s a thoughtful, human-centric design.
Hotel Web Design Takeaway: The Liberty gave their website a facelift even as a Starwood-owned hotel – the CTA simply connects to the Starwood backend reservation system. So, even if your hotel is owned by a larger, likely slower-moving company, you may still be able to hire a marketing agency to re-make the frontend of the website and get it looking just as you want without having to touch your reservation system.