Case Study – villa-andrea.info / restaurant-olivetree.info

| Autor:

PROJECT: Web development & marketing for villa-andrea.info & restaurant-olivetree.info

CLIENT: Villa Andrea, Šutić LLC, Kamena 46, 21325 Tučepi, Croatia

DURATION: 12 weeks

Company Šutić LLC is the manager of the family Hotel Villa Andrea, which is among the first 10 hotels in Croatia to carry the plaque “Friend of the environment”. Hotel Villa Andrea has years long history of receiving prestigious awards and acknowledgments for their service and ambience designed in line with tradition and authenticity.

Besides the hotel service (with all the accompanying segments), company Šutić runs a successful restaurant “Olive Tree”, providing their guests with a memorable gastronomical experience.

Once you get to know all of the benefits Hotel Villa Andrea and Restaurant Olive Tree provide for their guests, and how that separates them from similar competition on Adriatic, you will then realise the importance of following up with that perfection through their online marketing. Perfectionism, subtlety, attention to details and clarity of communication are just some of the imperatives by which we were guided through the web development process.

  • Blanša Marijančević, manager of Hotel Villa Andrea and Olive Tree Restaurant
    Our cooperation with the WebConstructors team was very successful. They are very meticulous and effective, and take special care in understanding and acknowledging client`s ideas. I would also mention an exceptional support on every step of the way, and a very dynamic adjusting to the client`s requests and needs. Also, I loved the easy going communication, non-complicated problem solving for different situations, and a very honest and genuine approach to clients.

Project specifics

Villa Andrea is, through the words of its owners, a small piece of heaven on the dalmatian coast – a high end family hotel with exceptional accommodation and top gastronomical service presented through the accompanying restaurant Olive Tree. During this project, we also developed the new Olive Tree website.

We had our hands completely untied in our ideas for creating a visual and functional solution for both of these projects. The only thing we had to account for, was the existing client`s content already present on the previous websites (together with the new additions to the content). Website itself was completely modified to accommodate 3 different languages (english, german, russian and croatian).

We integrated an existing online booking solution into the new hotel website. The existing integration was quite rudimentary, so we decided to increase the user experience. More on this topic in the remainder of this case study.

Challenges

Challenges we faced mostly revolved around the idea how to present this gorgeous hotel and restaurant as attractively as possible, and yet keep a certain level of subtlety, dignity, elegance and serenity. We knew we had to produce highly attractive design – but at the same time, we were very aware that the pinnacle of the website was supposed to be the hotel & restaurant – not the design itself.

For this reason, we went with the minimalist design direction – a clean design with plenty of information and photography – a design that is there to support the content. A big help was the fact that we were provided by truly gorgeous photos created by a professional photographer. The photos really made the site stand out and present the hotel and restaurant in the best way possible.

We also placed a great deal of attention into website usability (ease of use, site speed, information accessibility, internal content and link structure), because we knew that these websites will spend most of their time presenting the hotel and restaurant in the very competitive markets of Western Europe (target audience is located in Germany, Switzerland, Sweden, Great Britain, Norway, etc.) and Northern America (USA, Canada).

Strategy

From the start of development, the goal was not just a redesign – but also the improvement of online marketing our client previously had in place. In this purpose, we created a multilingual newsletter form, which we placed on the top of the website, hidden and collapsable on click. We segmented the subscription into two lists right on the form – the guests, and agencies. The point was to provide the client with the possibility to segment these two target audiences and create strategic communication with two very interesting target audiences they normally do business with on a day-to-day basis.

Unlike many domestic competitor’s tourist objects, hotel Villa Andrea places an accent on the additional offerings (sporting and entertainment activities, etc.), which is of high quality and diverse. These offerings were strategically scattered through the entire website, so that visitors have a chance to review them as often as possible, while browsing the rest of the site in search of information or accommodation.

Just how important it is to distinct the most important part of the offerings is clearly visible on the new homepage of the Olive Tree restaurant. The homepage is put together in such a way that all of the most important information about the restaurant are visible and accessible inside the first few seconds a visitor lands on the site.

Corporate and visual identity

While planning the design and concept for both of the websites (hotel and restaurant) we were faced with a challenge of creating a meaningful connection between the two sites (being as the services both objects offer are complementary). The connection was supposed to be twofold – it was supposed to bring consistency of visual and corporate identity, while still creating a differentiation in terms of keeping both of the sites unique and authentic.

Latest blog posts

Nothing found. Please check back soon!

Homepage – villa-andrea.info

If you take a closer look at the homepage, you will find that it is separated into seven segments, with each of those segments being revealed as you scroll down the site. Some of the more distinctive and notable segments are:

a) main menu – created in the “mega-menu” fashion. Unlike your standard website navigation bar, this menu houses multimedia content (more specifically, photos), and provides a higher level of interaction and usability than a regular menu would.

Mega menu

b) “Our rooms” – a segment where the most important information is contained – the core business of the hotel. We are of course talking about the accommodation units, i.e., apartments. Apartments are presented through the usage of tabs (mini navigational bar underneath the titles is used to flip through the tabs). In terms of content, we decided on presenting the apartments through images (loaded “on-demand” via AJAX to lower the hits on the server while loading the already quite heavy homepage), textual content and a booking form with a calendar. When a visitor chooses a desired booking period, upon clicking the button, he/she is directed to the third party booking engine with real time availability and payment system in place.

Villa Andrea - apartments section

c) Rewards – within this segment we created five animated laurels with prizes. We decided to place this section rather high on the homepage, to show that the client is not only highly rated by visitors, but by the professionals from the same field. The goal was to show that our client provides their service with the utmost professionalism, passion and dedication.

vijenci

d) Video background – in the segment where we presented the Olive Tree restaurant that operates within the hotel’s building, we decided to use a highly attractive video of the restaurant and the spectacular wine cellar. The aim was to increase the dynamics and appearance of this part of the homepage.

Video background - Hotel Villa Andrea

 

Together with placing the video on the hotel’s website, we also decided to use it to showcase the gastronomical offerings of the restaurant Olive Tree. This is why the homepage of the restaurant starts with the video. Video was embedded via HTML5 with the help of videojs script to make it compatible with older browsers.

 

Video background - restaurant Olive Tree

e) Animations and interactivity

Animations we implemented (especially on into the homepage) aimed at accentuating particular segments. On the homepage, this is mostly noticeable through the revealing of particular elements while the user scrolls down the page (it’s also worth noting at this point that by scrolling upwards the elements move back into the starting position, while downward scrolling reveals them once again, and so on back and forth, which increases website dynamics for the entire time the user is present on the page). As usually, we used the fabulous GSAP animation platform that works just as great on mobile devices, and of course, on all the desktop and mobile operating systems and platforms.

We paid special attention to hover effects, in order to make the site more intuitive and let the visitor know exactly where to scroll through the page and where he/she can go from any given page. Of course, hover effects also contribute to the overall aesthetics of the site. We also made sure that the hover effects are consistent in look and feel throughout the entire website, in regards to animation speed and transition type. This way we wanted to keep usability on a consistent level through the entire website.

f) Newsletter – we placed newsletter opt-in at the very header of all the pages on the site. At first glance, the entire newsletter section is hidden, but collapsible on click. We provided our client with the ability to segment e-mail lists into hotel guests and partner agencies, in turn making possible the separate sending of e-mail marketing campaigns to both target audiences. The entire e-mail marketing system was integrated directly into WordPress, which means the client can create and send e-mail campaigns and newsletters directly from the administration dashboard.

Newsletter

Hotel rooms – administration and front end appearance

Hotel Villa Andrea utilizes a third party booking engine, which up until now was not correctly integrated into the website. We changed this in several ways, some of which include adding a booking calendar for each individual accommodation unit. This also brought the ability to send direct inquiry about the availability of each unit onto the booking engine. This was not possible on the old website.

Booking calendar

Individual accommodation unit pages were completely standardized, from backend and frontend both. This means that, together with the front-end design, we adapted the backend as well, to make it possible for the client to manage units in the easiest and fastest way possible. Each unit was also given a unique ID that designates its location in the booking engine.

Booking engine integration (Protel)

The new hotel website utilizes a third party booking engine that goes by the name Protel. Protel is used over 11.000 hotels worldwide (in over 80 countries). It is a type of software that is specialized for hotel industry and related sectors, which makes it an ideal and complementary app to go along with the hotel website.

The booking engine itself provides the benefit of checking accommodation units in real time, together with booking and payments (also real time). Visitors can also book different types of activities, gastronomical offers, etc. that are present in the hotel’s portfolio.

By integrating the booking engine into the website, we gave visitors the ability to:

1.) check accommodation unit availability in real time. By integrating the booking calendar, we shortened the procedure for checking the unit’s availability by two steps. The old website did not allow checking of the availability for the particular unit from the hotel’s website, and did not provide the ability to enter dates before landing on the booking engine.

2. ) On the homepage, adn in the mega menu, visitors can check the availability, and book one of many additional activities provided by the Hotel Villa Andrea and Restaurant Olive Tree

Booking engine

Multilingual

Multilingual system we integrated into the website represents one of the most advanced solutions available for WordPress on the market. Not only is it possible to simply create and manage multilingual content within a single administration dashboard – it also provides advanced multilingual SEO capabilities, which in turn gives the client the ability to optimize the website for ranking on different regional Google search results. The way this works, is through allowing website administrator to enter separate meta tags, alt tags and h-tags for each language version.

  1. multi2
  2. multi1

E-mail and social network marketing

Since the client was happy with the outcome of the project, we were hired to do long term promotion for the hotel in regards to its gastronomical and hotel offerings. We tailored a strategy for bringing new guests and booking accommodation units during the 2016. We based the strategy on e-mail marketing and social network marketing.

Client's Instagram account

Faster website

We did some work on the page load time, since the homepage itself if quite heavy and contains a lot of multimedia content. Parallax animations and other transitions that use JavaScript load a couple of additional JS files, which increases HTTP requests number. This is why we did the following in regards to page speed:

 

  1. Web site utilizes varnish caching on the server
  2. Implemented caching on the CMS level through a WordPress plugin that creates static HTML versions of each subpage on the site.
  3. Utilized browser caching – browser caching downloads static files from the website (CSS and JS files) on the visitor’s computer. When visitor browses the site after the static files have been downloaded, the browser automatically serves the local files (if they are not changed or expired on the server) eliminating the need to download them again.
  4. Utilized GZIP compression to further  reduce the amount of downloaded textual content
  5. Minified and concatenated Javascript and CSS files (removing unnecessary characters and merging same file types together to reduce HTTP requests and increase download speed
  6. Utilized AJAX loading of slideshow images on the homepage. This means the images are loaded on demand (two photos in advance per slide transition) so that not all images are loaded during initial page load, which would drastically slow down the page load time.

End result is that villa-andrea.info received 86/100 score on pingdom.net with the page load time of 3.27 seconds (which includes the download of video background), which is a good results in its own merit. But, it you think about the amount of content on the homepage, the end result is actually great. You can find the test here: http://tools.pingdom.com/fpt/#!/GNhig/villa-andrea.info

Restaurant Olive tree received the score of 86/100 with the page load of 2.96 seconds, which is awesome, considering the video background and the large amount of images at the bottom of the homepage. You can find the test here: http://tools.pingdom.com/fpt/#!/cXlyT7/restaurant-olivetree.info
Bear in mind that the page load times would be even faster if there were no video backgrounds. If you analyze the tests on given links, you will find that both sites (minus the video backgrounds) load under half a second (Olive Tree) and just over a second (Villa Andrea).

Project summary:

  • we created two websites together with design and concept planning from scratch. We also handled the content structure and uploading
  • we created a large number of interconnected web channels to improve the effectiveness of the presentation, to increase user experience and build trust
  • we tailored WordPress back end to make it as easy as possible to manage the site in the future without any technical knowledge
  • we created additional 3 language versions on both of the sites, and uploaded and styled large amount of content (textual, photos, videos, PDF brochures, etc.)
  • we gave mobile users a great deal of attention and made both of the sites responsive, created web view Android apps and published them in the Google Play store
  • we created a months long plan of promotion on social networks (Facebook, Instagram, Foursquare) to try and get more visitors to the hotel to book accommodation units in pre and post season.