Client
Panalau is a high-end eco-friendly boutique hotel located by a lake in the mountains.
Simple sitemap
Panalau’s site map includes many pages but user flow maps homepage search, catalog, and product pages:
First impression
The above-the-fold content is the first thing visitors see and it shapes their first impression and (more importantly) that of Google. It consists of a hero image, a navigation bar, some title, body copy and buttons all serving a single purpose: getting more people to stay at your hotel as opposed to driving them (or entire search engines) away to other hotels. The criteria for this section is pretty straightforward, it needs to ace the ABCDEF test: A. Appropriate, B. Bold, C. Consistent, E. Easy, D. Different, and F. Fast.
Competitors
Lets see how others are competing for our next stay. All partner sites such as Airbnb, Booking, offer many listings and hotels on white canvases. Panalau must be different from them as they only need to promote their hotel and don’t have that many listings:
When it comes to above-the-fold content of the best 5 and 7 star hotels in NYC, Paris, London, and Dubai, they tend to have a video background, slideshow gallery, or images.
Background video
Most sites (6-12, 13, 19, 22, 24) promote their hotels by showing everything at once using a full-width background video:
However, videos tend to take up lots of memory and thus use lots of data and power even when hosted on local data-centres or delivered via content delivery networks. As a result, most platforms compress video files which in turn makes them look pixelated. Consider the following blurry video and contrast it with the web font in the menu items over it:
Compression
Most videos are compressed using a ‘block matching algorithm’ that, frame by frame, removes redundancies by matching pixels with minimal motion and compressing where there’s movement. The above videos don’t have any blocks to match and are thus blurry.
One way to trick video processing is by limiting the subtle movement to already blurry and out-of-focus foreground or background elements. Videos that are shot with processing algorithms in mind will look high-res despite being compressed to a small size file:
Image slider
Some sites (14, 20-21, 23) use image sliders which some people find just as distractive as video backgrounds, especially when trying to focus on informational or interactive elements. Lots of code and high-res images tend to take time to load and parse.
Image(s)
Other websites use one large, or one or more smaller images. and that’s more useful according to Google and Google knows (what’s) best (for its users). Out of all above-the-fold elements, Google measures how long it takes to load the largest one which is, in most cases, an image. Some of my clients’ former websites used to take over 8s to load the largest element and that’s while simulating a local 4G connection and not the standard 3G overseas. Many users will bounce off of a slow website before exploring it further which will in turn signal to Google that it’s not useful or worth recommending.
We used to compress images to 72PPI but that’s no longer sufficient for newer devices with denser pixel density of 250-470ppi making images blurry on mobile. Higher PPI increases the file size, loading time, and bounce rate which is why some sites (15-18) featured one or several smaller images.
Solution
Hotels that are based in NYC, Paris, London, and Dubai don’t need to promote those destinations as they host some of the world’s most famous tourist attractions. Panalau on the other hand needs to sell the very idea of spending our vacation somewhere non-mainstream. Thus, their approach to marketing should differ at the most fundamental level. Not only does their website need to show their hotels but all nearby tourist attractions in an engaging, interactive kind of way:
Interactive design
The map moves with the cursor, helping visitors explore all nearby places of interest, lakes, the world’s largest outdoor year-round high altitude ice-skating rink, large ski-resort, astronomical observatories, mountain peaks, as well as fresh air and clear skies. This hotel isn’t just five stars, it’s all the stars under the night sky. Many young people only travel to take pictures and that’s what Panalau should show: people enjoying their stay, recharging in nature from the 9-5 sedentary lifestyle escaping sometimes stressful and overwhelming urban living. Because people inspire people.
Background image
The hero image features a true elevation map of the region which I designed based on large topographic maps from American military websites, and many architectural apps. It’s vectors and thus it won’t affect Google’s page load speed metrics. If that changes, I’ve made it 2,000 times smaller than the real 12,000KB vector map down to just 6KB. Light reflections and shadows move with the cursor and around each elevation level.
Versatile design
The design shows different things in different seasons, regions, and languages. Some attractions operate all year-round but winter activities will look entirely different. Some attractions might interest local populace, while others will appeal to the western audience.
It’s the playful interactive attractions map that people will want to explore. Their first impression will be unforgettable. All those attractions will help advertise Panalau. People may google them and find useful information along with an enticing call to action.
An innovative booking system
Panalau caters to corporate clients and event planners and offers a diverse array of accommodation types — from hotel apartments, cottages, and traditional yurts, to off-road trailer homes, and floating homes. They also offer additional product reservations during their stay from ATVs and UTVs, SPAs, saunas and private pools. This required an intricate understanding of user personas and journey mapping, as I designed for unique guest needs, such as accessibility, varying check-in/out dates, multi-generational travel.
Users can select several suites with different layouts: one for a couple with an infant and a puppy, one for two teenagers, and one for their grandmother.
Menu booking system
You can also search for hotels in the menu as well as on the home and catalog pages:
Hotel filters and pages
The catalog page will display search results, check in and out dates, number of suites and guests up top, and toggle filters on the left side.
The search results will be grouped by hotels or other categories such as rental equipment. The groups will contain available property types in specific hotels.
Users can select a specific hotel or property type to view the individual hotel or property pages, or they can select several property within the same hotel.
Hotel page design
Once users find what they’re looking for, the website will promote active stay with complementary products and services on individual hotel or property pages.
