Above the Fold Examples by Industry: Hospitality
We’re here to talk about the good, the bad, and the ugly of above the fold designs.
We gave you a brief overview of what above the fold is, why it’s important, and why the approach to above the fold design is changing. Other than that, we didn’t give you a whole lot of concrete direction on design. If that felt like a cop-out, this post is why we didn’t. In this post, and as an ongoing series, we will be giving you above the fold examples by industry. Doing it this way will allow us to show you how different an above the fold approach can be by industry, and hopefully it will give you the understanding of how it should be applied to your site as well as give you the confidence to be creative with your own above the fold design.
The hospitality industry’s goal is to get travelers to stay at their hotel. So, it’s fair to assume that the main initiative their site should be to convince the audience to stay at one of their hotels. There may be peripheral campaigns such as signing up for one of their credit cards, but the goal remains as booking guests. There are different ways to approach the challenge of converting the audience to a hotel guest, so we’re going to look at some different above the fold designs starting with the good.
AirBnB represents a massive shift in the hospitality industry as a whole. Their business model of having private, independent citizens essentially be the hotel is a giant paradigm shift. Likewise, their above the fold design reflects a significant change in approach. By virtue of private parties acting as inn keepers, AirBnB creates a more personal, unique lodging experience, differing dramatically from traditional hotel stays. Their above the fold design represents a similar personal feel.
AirBnB created a minimalist above the fold design, even changing their typically colorful logo white. They did this so the centerpiece introduction of the page is a specific, interesting location. AirBnB focuses their marketing on the idea that you are able to stay at far more interesting and diverse places if you stay with an AirBnB host rather than a traditional hotel. Because their page loads with an image of a location a typical traveler has never seen before, AirBnB’s above the fold design embodies that diverse and unique lodging experience.
To tie it all together, the bottom right of the page (in an unobtrusive manner) directs the audience to “Over 300 unique places to stay in Oregon,” in order to make them feel like an insider. They want the audience to feel like they’ve have found a hidden gem location. AirBnB wants to plant the seed of adventure in traveling.
VRBO fills the same market niche created by AirBnB, so their above the fold design also represents a paradigm shift in UX design. But VRBO has tried to blend traditional hospitality site design with the independent lodge hosting model. The result is below.
Unlike AirBnB, VRBO has put the booking information front and center. While still highlighting unique getaways, VRBO puts specific emphasis on the lodging in conjunction with the location to create a dream getaway, whereas AirBnB has historically put emphasis on the uniqueness or convenience of the location. To achieve this, VRBO has directly approached this strategy by calling out the lodging in the headline of “Beach house? Condo? Cabin? Your perfect vacation awaits.” And they have followed this by providing the audience lodging options that are in very stark contrast to one another.
Because VRBO has made such a quick impact on this market segment, AirBnB has actually had to pivot their strategy and now provides “A selection of places to stay verified for quality and design,” that they have branded AirBnB Plus. You know you’re good when the competition has to change course because of you. VRBO is good.
Now on to the fun part: the bad. These once industry leaders are falling behind with their business model, and their marketing efforts are reflective of a failing mentality. The above the fold designs show a lack of understanding of the consumer, the market, and the overall user experience when it comes to booking lodging.
Right in your face you see an advertisement for a credit card. Not only is a credit card the first thing you see, it’s a credit card with a LIMITED TIME OFFER! The background image is of a a sky with the top corner of a cabana to one side and a palm tree to the other — it doesn’t really make any sense and inexcusably it’s of very poor resolution. From a UX standpoint, the method of filling out the travel information with the search bar half in and half out of the image is . . . well, it’s bad.
This is an above the fold analysis, but in this case, we’re going to scroll further to illustrate a point.
If you scroll down below the fold, it continues with more information on rewards, points, rates, and membership info. They even have a promotion for Hertz car rentals. They seem less like a hotel group and more like a travel agency, and that’s what AirBnB and VRBO get right; they focus on travel and personal experience, not savvy consumership.
We’re just going to make the jump straight to the ugly above the fold design. Like a band-aid, we’re just going to rip it off and get it over with.
Oh, boy. Motel 6, your above the fold design is ugly. Not only is it ugly, it’s kind of annoying. It makes you feel bad about the idea of looking for a place to stay on Motel 6’s website.
Where do we start? How about the pun in all caps right in our face? If the pun isn’t ironic, don’t use it. You know what? Don’t use puns. Let’s leave it at that.
Next, it’s a boxed site layout. It does not provide an immersive above the fold experience. It does nothing to motivate the audience to act. Motel 6’s above the fold design relies on the viewer to know who they are and to already have an agenda before arriving to their site. They are not worried about conversion because they believe they have a captive audience.
Furthermore, the margin between “Features and Deals” is closer to the top fold than the actual features and deals, and this is a personal aesthetic — some suggest it’s a clever trick to induce scrolling, but I don’t like tricking people — but it is unsightly for content to be cut off half way between the folds.
And lastly. A hamburger menu on a desktop. Unless you’re a creative, or your business provides a creative or abstract service where quirkiness is appreciated, do not use a hamburger menu outside of mobile and sometimes tablet. Which also brings up the case of Motel 6’s above the fold design on mobile: it’s just a map of the U.S. with dots of vacancies all over it. So, at least they are universally bad in their above the fold design. There’s something to say about consistency.
Does your business need to improve its above the fold design? Does your design adequately speak to your industry and effectively reach your audience? We can tell you. To see how we can help, contact us to start a discussion. We can provide your business with an audit. We can provide your business with actionable items. We can build your site for you. Reach out!