From vision to reality. Creating a new hotel.

Hotel

Back in 2011 I worked with branding agency Winkreative who had been approached by property developer José Antonio Uva. Winkreative were tasked with helping communicate his vision for the transformation of an estate in Portugal’s Alentejo region. The estate, São Lourenço do Barrocal had been in his family for over a century and was to become a destination for modern country living. This journey was just beginning —the estate was standing in ruin—but it would culminate in the opening of the hotel at the start of 2016 five years later.

 

The back story

Bought from the King in 1820 the estate was a self-sustaining home to a small rural farming community, but it now stood derelict. It is set in a vast and beautiful landscape near the fortified hilltop town of Monsaraz and alongside the Alqueva dam. The grounds are peppered with rounded rocky outcrops barrocais, olive trees, wild flowers, vineyards and long-horned cattle. The region has seen settlers since neolithic times, a number of stone monoliths stand within the grounds. It’s fair to say this place has history and a story to tell, one of family, culture, community and harmony with the landscape. It’s past, in a way became the brief for its vision for the future.

 Monsaraz village

 

The plan

At the heart of the estate the ‘Monte’ the old village centre would be transformed into a hotel and some of the surrounding estate would be carefully divided into plots of land for private residences. Future owners of the plots would need to agree to a carefully considered vision for a harmonious community inspired by a visit to the Sea Ranch in California. There would be no picket fences, no enormous white villas, the land would remain open. Buildings would be hidden amongst the trees and stone outcrops each property would be carefully positioned to have an uninterrupted view. Architecture would follow a guiding scheme developed by Pritzker prize winner Eduardo Souto de Moura.

 Plan model

 

The hotel

To create the hotel the existing ruined buildings were painstakingly restored, original terracotta roof tiles sourced from all over the country. Vaulted arched ceilings and walls were repaired by a team of Portuguese craftsmen who lived on site for the duration of the build. Converted interiors would be transformed, oil pressing rooms into event spaces, a disused bakery into a winery, store rooms became spa and bar.

What was previously the village street would become a row of hotel rooms and family cottages. These all opening out onto the same central cobbled road. The interior design would incorporate a blend of carefully curated Portuguese antique furniture, local ceramics and textiles. Contemporary lighting design and hand crafted beds and desks came from selected collaborators. The best of the old and the best of the new. The intention was not to be boutique and fashionable but to be authentic, honest, homely, welcoming and unique whilst still being luxurious. The best it could possibly be whilst remaining true to it’s surroundings.

Beyond the main street area a new building would be constructed for the restaurant. The seasonal produce for the menu would come from an ambitious walled vegetable garden surrounded by olive and lemon groves. The swimming pool and stables sit between the hotel and the garden. As well as relaxation, activities and learning would be an important part of the hotel experience. Feeding mind, body and soul, ‘Do-lecture’ style events are planned along with workshops, retreats and festivals.

Like José’s fond childhood memories of visiting the estate, São Lourenço do Barrocal would become a place for families and friends, somewhere they would want to return to.

 Construction site

 

Website phase one

The purpose of the first version of the website was to introduce the estate and set out the plans for the future. A new identity was created by Winkreative alongside a beautifully illustrated book about the estate for potential investors. A series of films were made by Graham Clayton-Chance to tell the story and capture the spirit of the region, showcasing the crafts, landscape and the people. There were also interviews with local producers and architects John Pawson, Eduardo Souto de Moura and landscape architect João Gomes da Silva. This initial exercise was used to help secure funding from the European commission and ultimately got the project underway. 

 

Five years later

José approached us to help build the next generation website in preparation for the opening of the hotel. A full hotel website that could now take bookings. The main challenge was that it was April and the extensive construction works wouldn’t be finished and ready to photograph until December. So we worked closely with José to build a site structure that reflected what the hotel would become. With only one example room constructed it required a degree of imagination to picture it. We carried out card sorting exercises to define and work out how to organise the content. We pretty much sketched out every page of the site in order to understand what was important and what could be left out.

 Card sorting

 

Tech behind the scenes

The booking engine and PMS (property management system) would be a large focus of our research. A booking engine is required to take the transaction and communicate between the website and the PMS—where the bookings and customer profiles are stored and the day-to-day activities of running a hotel are managed.

We used one of our other clients InsightBee to carry out research on the booking engine and PMS market. The report we received surfaced all the key players and helped us refine our search for the right partner. What we found was that the PMS and booking engine don’t necessarily need to be from the same provider. There are some very large established systems out there that have been around for a long time and are embedded in many hotels operations. Many of them are showing their age, bloated with features, overly technical and built on old frameworks. There are surprisingly few new players out there and the off-the-shelf booking systems we shortlisted still allowed for little or no customisation. They often look dated and somewhat detached from the experience of the main website. Few were responsive and often loaded a separate mobile experience which looked nothing like the main website.

It was important to us that there would be a seamless and responsive flow from the room pages right through to the completion of the booking. After long calls with a number of suppliers we found Portuguese company Guest Centric were able to supply us with an API allowing us to design and build the booking process as we saw fit. We chose to build the site on Zend Framework allowing us to build a multi-language custom CMS and easily integrate with the booking system API.

We also designed and integrated a Shopify e-commerce shop to be integrated within the main site so they could sell all the products that had been carefully sourced and used throughout the hotel.

 Website booking screens

 

Visual design

With our structure and technology defined we created a visual design system that gave us variety and flexibility in our layouts. For a site with many pages it’s important that not every page feels the same but that there are some underlying rules to tie everything together. A modular approach to each page allowed us to do this. We had to complete the build of the website whilst the hotel was still under construction, so it was ready to go live as soon as the first rooms were ready in time for the Experiences show in December. Over 50% of the site contained placeholder images and content that represented our best guess as to how it would be in the end. The imagery we used helped to define the art direction of the shots and act as a brief for the photographer.

 Barrocal website screens

 

Open for business

Since the site’s launch in December 2015 the hotel is now fully open and the site has steadily blossomed in pace with the change on the estate. It’s great to see it flourishing as new video, images and sections are added.

The site will continue to evolve over time but right now it needs time to settle and get in harmony with the pace of life in the Alentejo. We hope the experience reflects the reality, as a place where life is calm, beautiful and thoughtful.

bar interior

 

“Every Interaction has a very good combination of state-of-the art web design and a narrative, journalistic approach. They know how to tell content-driven stories and how to put it into a technologically-advanced website concept.”

– José A Uva, Owner, São Lourenço do Barrocal

 

Swimming pool

 

“Every Interaction has been the most valuable partner regarding our website’s UX & Design, delivering us smart and thoughtful solutions for all the everyday challenges that come up in the demanding luxury hospitality industry. They are trustworthy partners and part of our team – we hope to keep working with them in future projects.”

– Susana Lourenço, Marketing Director

 

Restaurant

View the case study  |  Read more about São Lourenço do Barrocal

Client September 12th 2016

You might also be interested in...

Product Design

The ‘Product’ is the website, service, application, interactive thing being worked on by the business. The practice of Product Design is similar in a lot of ways to UX Design. It involves the coming together of many specific design disciplines...

Call to action (CTA)

A call to action is a marketing term that refers to a prompt that invokes a response leading to a sale. When referring to a call to action (CTA) in the digital design world we usually mean the interactive element that leads to the next step in the experience - something that needs to be clicked or tapped.

User testing

User testing refers to a technique used in the design process to evaluate a product, feature or prototype with real users. There are several reasons why you might want to undergo usability testing, the most common is that it allows the design team to identify friction in a user experience they are designing, so that it can be addressed before being built or deployed.

WYSIWYG

WYSIWYG (pronounced WIZ-ee-wig) is an acronym for "What You See Is What You Get". It helps identify an an interface that allows user input resulting in an output that is rendered in a similar way. For example; a word processor application interface might resemble a piece of paper,so when printed the user can see how the output will appear.

Content Management System

A content management system (CMS) is an tool that allows a website editor/administrator to manage the content that is displayed. Websites are made of HTML and CSS to create pages. Pages can be hard-coded but would require technical development skills to make changes. A CMS usually allows a person without coding knowledge to amend existing and add new content to a website using a WYSIWYG interface.

Responsive Web Design

Responsive web design refers to a web page that dynamically adapts its layout to fit the size and orientation of the device on which it is viewed. A responsive design allows for a more optimised user experience across desktop and laptop computers as well as smartphones and tablets of varying sizes.

User Stories

User stories allow the functionality of a product or service to be expressed as written descriptions of an experience as seen from the users perspective. The writing of user stories creates a list of design and development tasks to complete in order to create any required functionality.

User Interface

A user interface (UI) is a conduit between human and computer interaction - the space where a user will interact with a computer or machine to complete tasks. The purpose of a UI is to enable a user to effectively control a computer or machine they are interacting with, and for feedback to be received in order to communicate effective completion of tasks.

Personas

A persona in UX Design is the characterisation of a user who represents a segment of your target audience. On a project you might create any number of personas to be representative of a range of user needs and desires. The solutions you design must answer these needs in order to deliver value to your target audience.

Card sorting

A great, reliable, inexpensive method for discovering patterns in how users would expect to find content or functionality. Card sorting is used to test the taxonomy of data with a group of subjects, usually to help inform the creation of the information architecture, user flow, or menu structure on a project.

Brainstorming

A technique used to generate ideas around a specific topic. Often done in groups, but can be done individuals. The process usually involves writing down all ideas around a topic onto paper, a whiteboard or stickies often implying some kind of association.

Minimum Viable Product

An MVP is a product that has the minimum set of features to prove the most essential hypothesis for a product. Businesses building a new product can create a Minimum Viable Product to prove that an idea is viable and warrants further investment. A further benefit being that the next stage of development can be informed by feedback obtained from testing that MVP.

Sitemap

A sitemap is a diagrammatic representation of a hierarchical system. It usually depicts the parent-sibling relationship between pages in a website, showing how sub pages might be arranged underneath their parent groupings. This arrangement forms a map of the site.

User journey

A user journey represents a sequence of events or experiences a user might encounter while using a product or service. A user journey can be mapped or designed to show the steps and choices presented as interactions, and the resulting actions.

Prototype

A prototype is draft representation built to test ideas for layout, behaviour and flow in a system. Prototypes are an indispensable tool for resolving a large number of potential issues in a concept or business before too many resources are deployed to put a design into production.

Wireframes

A Wireframe is a visual schematic that conveys a basic level of communication, structure and behaviour during the design of a system. Wireframes are low-fidelity designs that bypass including a detailed user interface or visual design, conveying just enough to get across the core idea.

Usability

To say something is usable is a qualitative statement about how easy that thing is to use. Usability is an assessment of how learnable a system is and how easy a user finds it to use. The usability of a system or product is a key factor in determining whether the user experience is a good one.

Information Architecture

Information architecture is the design and organisation of content, pages and data into a structure that aids users understanding of a system. A more organised system enables users to more easily find the information they require and complete the intended tasks.

UI Design

User Interface Design is the discipline of designing software interfaces for devices, ideally with a focus on maximising efficiency, responsiveness and aesthetics to foster a good user experience.

UX Design

The practice of User Experience (UX) Design is the coming together of many specific design related disciplines to improve the usability, responsiveness, uptake and aesthetics of a product or service.

User Experience

A general term that covers all aspects of a user's participation while engaging with something that has been designed. Usually when talking about User Experience in the digital design field it refers to the interactions, reactions, emotions and perceptions while using an app, service, website or product.