Designing a Website for Renting a Holiday Home

The Challenge

In 2016, my client – a one-woman-business – decided to rebuild a historical stone house in Croatia with the aim to host vacationers and offer seminars around topics like health, nutrition and spiritualism.
Being represented on standard holiday platforms wasn’t a solution since she wanted to tell the house’s unique story and provide a personal and complete experience. So I was tasked to design a website which helps her to manage bookings and attract guests she would like to welcome in her house.

The Approach

RESEARCH

Understanding my client’s needs

Understanding business and user needs and bringing them together is what UX design is all about. But sometimes business and user are not so far away from each other, especially if the business is a person who seeks to attract like-minded people with similar values and lifestyles.

By continuously asking questions, I didn’t only get a better understanding of my client as a business, but also as a human and representative of a target audience, that has particular goals, interests and motivations.

Competitive research to identify user needs

Resources for user research upfront were limited so I checked out the competition to find out which information and features users might expect when facing the task of booking an accommodation. Travel and booking websites have evolved over several years and best practices have emerged about how to convert users into customers, so why not learn from their experience?

Tracking UX patterns to learn what generates trust and usability

Studying competitors’ websites didn’t only reveal strategies for content and information architecture, but it was also a way to identify common UX patterns early on.

Trust is one of the most important drivers for high investment decisions like booking a holiday stay. To build trust into a site, the experience has to be familiar to users, which is achieved by using elements they know from previous experiences. Familiarity also supports usability and task completion as users don't have to learn from scratch how the website works.

check-availability
A calendar and a date picker are the most familiar and easy ways to check an accommodation for availability.

INFORMATION ARCHITECTURE

Analysing user tasks and scenarios

Based on research and the website’s goals, I analysed the tasks users want to get done when they come to the website. I wrote these tasks in form of user stories to think through the experience from the user’s perspective before translating these into features. Prioritising stories to identify primary user goals finally led to the site’s information architecture.

Mapping the site’s interactive flow

As soon as it’s clear what information and features need to be provided to fulfil user needs, these elements need context and a destination. When I brought all features and information together, I ended up with a overly complex solution with multiple levels and links. To make sure the user doesn’t get lost on the site, I reduced complexity by grouping subpages and giving these groups labels that reflect the user's mindset.

stickies_mini
Mapping the site’s structure and system logic on stickies helped to keep the focus high level.

If there are no resources for co-designing the information architecture with actual users (e.g. using card sorting methods), competitive research can provide good insight: I analysed how other sites are structured, what content they group together and how they named their categories. Again, familiarity is king here.

sitemap
Early site map created with Slickplan

After mapping the site’s structure on stickies, I used Slickplan to quickly mock up a site map and built flow charts for the most important user flows using Gliffy.

CONTENT STRATEGY & INTERACTION DESIGN

Designing flows, not pages


All the steps the user goes through to complete a task need to be connected to a meaningful journey that is easy to accomplish. Having designed user flows first, it was now a lot easer to design for the whole experience instead of single pages. This enabled me to anticipate different states and create better copy.

flows-3_mini

Bringing storytelling into the design

What my client didn’t want was a website which only focuses on conversion and sales. Instead, she wanted to tell her story and attract like-minded people who value the house’s historic origin, natural environment and calm atmosphere – in short: no party tourists.
At the same time, the website should support accessibility on different screen sizes.

Designing for gestures

Both requirements led to the decision to create a homepage consisting of content blocks from which the user can access (almost) any subpage. This approach didn’t only help draw the site’s storyline, the resulting long scroll also provided an intuitive way to discover the site’s content, especially on mobile devices.

content-blocks-homepage_compressed
First draft of the homepage: Content blocks provide a teaser and quick access to the site’s key pages.

The importance of language in user interface design

When designing flows and stories, you’re designing a conversation with the user rather than a static UI, even in a low-fidelity stage. Since I worked on the project on my own, being a designer and copywriter in one person therefore became inevitable. Instead of using Lorem Ipsum, I wrote out labels, headlines and copy as early as possible to have control over the user experience.

TESTING

Early testing using a paper prototype

Designing content and text early also pays off when it comes to user testing. I tested the website’s most important flow (request a booking) using a paper prototype to learn what I need to improve before moving on to mid-fidelity.

You can read more about my lessons learned about creating and testing a paper prototype on my blog.

paper-prototype
Testing with a paper prototype and a smartphone dummy

User testing and iterating on the fly

In another round of testing I conducted in-person user testing sessions with 8 users of different ages and tested a mid-fidelity prototype of the site’s major elements. While unmoderated testing would have given me insight on usability only, moderated sessions gave me also the possibility to investigate the usefulness of the presented features by asking follow up questions and encouraging thinking aloud.

prototype-user-testing
The course section of the website prototype I tested with users.

I tested with 8 users by following the rule of 5 and iterated on the fly by sorting out obvious issues identified during the first tests to present users with an improved prototype in the following tests. In this way, user testing was kept effective under limited resources for testing.

Insight-based improvements


Besides small usability issues which were a fix quick, the moderated sessions also revealed needs and uncertainties that needed a new solution.


The first thing guests want to know is if the house is a relevant option for them to not waste time on something that doesn’t match their needs. They evaluate this mostly based on capacity, pictures and number of rooms. Users don’t want to look for these details hidden inside the site’s information architecture. They want them straight away.


So I filtered the most important information and put them on the homepage, including a link where users can find more information. 
Talking to users didn’t only help me realise where this information should be placed, but also what details are most important for them to make a decision and move on.

house-key-facts
I added a ‘key facts’ section to the homepage to help users find directly what they are looking for.

VISUAL DESIGN

Designing for my client and the site’s users, not for myself


For the visual design it was important to keep in mind that what I consider beautiful isn’t necessarily what my client is expecting or what her customers feel attracted by.
 In this project, I had to leave the modern, flat, geometric visual language I introduced during the wireframe stage to keep things simple. Instead, I had to tell the story my client wanted to tell by both verbal and visual language.

style-board_mini
Style board for the visual design

IMPLEMENTATION

Creating a style guide and specs document to ensure smooth developer hand-off

Defining a design language that helps the client get a feeling of the site’s look and feel is just one side of the coin. At the same time, a style guide needs to give developers a solid foundation for implementation by providing the technical specifications necessary to translate the design into code.

color-palette
Whereas the style board shown above served inspirational purposes, the colour palette for the developer needed to contain more technical details like hex codes and css attributes.

Creating a style guide is also a good way for designers to achieve consistency. During mocking up multiple pages and states, colours get easily duplicated and fonts might not be updated if wireframes from a lower fidelity stage are reused.

I used Craft by inVision, a plugin for Sketch, which creates a page in your Sketch file containing all colours, fonts and text styles used in the design. While some manual work is necessary to get rid of all inconsistencies, Craft makes these inconsistencies visible and therefore easier to remove.

The Solution

solution-perspective-view_mini

Although UI patterns of holiday and travel websites are already explored and matured, designing a completely new website with the purpose to both sell and tell was an exciting task that required lots of UX and prioritisation work upfront.

However, the key lessons learned lie in the tiny details of collaboration with my client:
I learned how to better communicate design decisions, how to choose my battles wisely and that design is a partnership that requires the client’s input and commitment.

The holiday home is still under construction and the website is currently in development.

TOP LESSONS LEARNED

Be a good communicator and listener

What the client wants isn’t always what is most useful and usable for the user. Instead of blaming clients for their wishes, the designer’s job is to provide clear arguments against them and find out what the client really wants. The same is true for convincing clients of aspects you find important, but the client doesn’t. Note down the things you want to discuss and collect your arguments before you enter a call. Then stay calm and go through each of your points.

Don’t argue about design elements that have a low impact on UX

Clients often have a strong opinion about their website’s look and feel before the project even starts. And that’s fine. The end product is going to represent themselves, so it’s absolutely natural that they have an emotional stake in it. So don’t get stuck in discussions on small details with a low impact. Instead, use your UX knowledge to evaluate if a decision is really worth a battle. Be cooperative and see how you can translate your client’s vision without compromising on usability and UX.

Always assume that small copy won’t be read.

The fact that people generally don't read on the web (except blog post or articles) is one of Steve Krug's most important UX principles. I haven't really believed it until I experienced its truth during the user testing sessions I conducted for this project. If you want to say something important, use a heading. If you want people to click a link, put it in a button shape. Icons also work well to draw people's attention to a piece of information.