Skip to content

Case study · With Loco Digital

Trident Holiday Homes

Find the right house, on a phone, before another tab wins.

Project info

Year

2024

What I did

  • UX research
  • User testing
  • UX
  • UI

Sector

Travel and holiday lettings

Deliverables

  • User testing and personas
  • Analytics and heatmap review
  • Responsive UI design
  • Component library

Stack

  • Figma
  • Google Analytics
  • Hotjar
  • GTmetrix

The brief

Trident has been letting self-catering holiday homes across Ireland for forty years, booked direct rather than through the big platforms. Its website isn't a brochure for the business; it is the business. The question was how someone, often from abroad, finds the right house among so many, on a phone, before giving up and opening another tab.

It's the project of mine with the most research behind it. Before drawing a screen, I wanted to know how people used the site Trident already had, and where it let them down.

The research

I worked in four steps — understand the people, research, ideate, prototype — and the research drew on four sources: Google Analytics, Hotjar, user tests and a review of the site's speed.

For the tests, I wrote three personas from the analytics, recruited people to match them, and ran the sessions on the existing site. Each was asked to do three things: find a property, rent it, and ask Trident for help. Then to say what they thought of the content, the layout and the look. Juvo's team helped with the room, the cameras and receiving the testers.

Three personas, one county

  1. Emma, 24

    A recent graduate, on holiday with friends: a house in Wexford for four.

  2. Paul, 59

    Overworked and off in September: somewhere quiet in Wexford to switch off.

  3. Marie, 45

    Travelling with her husband to rest: a calm place in Wexford, and a real person to ask.

What the tests found

  1. The map was loved

    All three used it to choose: seeing where the houses are made the decision for them.

  2. The search let them down

    Too few results, too few filters, slow to apply, and no pet friendly option where it mattered.

  3. Book was hard to find

    On a phone, the button to book a house got lost on the page.

  4. Help was unclear

    Asking about a house was confusing. WhatsApp surprised them, and they wanted to reach a real person.

  5. The brand earned trust

    The green and white, the clean layout and the photos read as Irish, and as safe to book through.

I presented it all to Trident in a few decks; these are some of their slides.

From the research presentation

  1. 01 How I worked: understand the people, research, ideate, prototype.
  2. 02 The three personas the tests were recruited for.
  3. 03 The tasks: rent a property, ask for help, find a property — and what they thought of it all.
  4. 04 Emma's session: the map helped; the Book button and the contact options didn't.
  5. 05 Paul's session: fewer houses than he expected, slow pages, and WhatsApp a pleasant surprise.
  6. 06 Marie's session: more filters, pet friendly among them, and a real person to talk to.
  7. 07 Strengths and weaknesses, and who found each.
  8. 08 Where it pointed: the recommendations the design took on.

The analytics and Hotjar told the same story from the other side: most people came on a phone, most were new, the search was where they clicked, and almost nobody scrolled past the map on the home page. The site was slow, too, mostly from heavy fonts and images. The client's figures stay private here; the maps show the shape of it.

The old site, under test

  1. 01 The site we tested, on a desktop and a phone.
  2. 02 Clicks on the home page: the search took them, and what came after the map almost none.
  3. 03 On a phone, the three most clicked spots were all in the search; the map was hardly touched.
  4. 04 How far people scrolled on a desktop: the colour fades long before the end. Figures blurred.
  5. 05 On a phone, the same fade, sooner. Figures blurred.

A year after the new site went live, I read Hotjar again on its key pages — home, search, property and county. It confirmed the direction and sharpened it: the date field was the most used and the place field the least; the offers and the counties menu drew the clicks; and on the search page, nothing but the results did.

The new site, a year on

  1. 01 The home page: the date field lit, the place field barely, the offers busy.
  2. 02 The search page: the results took the clicks; the text above them and the sections below, none.
  3. 03 The property page: the photos and the booking form busy, the rest read but not clicked.

From findings to design

Every recommendation came from something a tester did or something the data showed, and each one went into the design.

From findings to design

  1. Phone first

    Most visits came on a phone, so the phone version was drawn first, the way an app would be, with a bottom bar for Home, the map, Offers and Saved.

  2. Dates before places

    The date field was the most used and the place field the least, so the calendar and the guests got the most work, and the place became a typed search for a town or a house.

  3. The map with the list

    Testers valued the map most, so Explore puts it beside the results, the two narrowing together, with a price on every pin.

  4. Pets in the search

    The pet friendly pages drew attention, so it became a box in the search, a filter, and a mark on every card.

  5. Offers up front

    The offers drew the clicks, so they got a page of their own, a slot in the bottom bar and a badge on every house that has one.

  6. Help beside Reserve

    WhatsApp, phone and live chat sit under the price on every property page, where the question comes up.

  7. A shorter home

    Almost nobody scrolled past the map, so the home page keeps the search, the offers and the counties, and sends the rest to pages of its own.

As far as I remember, one didn't reach the live site: a pet friendly filter on the map itself.

Where, when, how many: everything else on the site comes after those three answers, so the search was designed first and hardest. It's one component in two places, on the home page and as a bar over Explore. Each field opens in place, and every state was drawn, so nothing was left to guess in the build.

The home search, on a desktop

  1. 01 Where, when, how many, and pet friendly homes only.
  2. 02 Towns, then houses, as you type.
  3. 03 The calendar: two months, availability in three shades.
  4. 04 Guests: adults and children, apart.
  5. 05 Ready, with pets ticked.

The home search, on a phone

  1. 01 The fields stacked, Search across the foot.
  2. 02 Towns and houses as you type.
  3. 03 The calendar, a month at a time.
  4. 04 The guests.
  5. 05 Ready.

Explore is where the search lands: the list and the map side by side, narrowing together. From afar, the map counts the houses by area; closer in, every house is a pin with its price. The other filters live in one panel, pet friendly among them.

Explore, on a desktop

  1. 01 The results beside a map of Ireland, the houses counted by area.
  2. 02 A place, dates and guests set: the map closes in, and every pin carries its price.
  3. 03 More filters: price, conditions such as pet friendly, rooms and beds.

The search bar on Explore, state by state

  1. 01 Empty: destination, dates, guests, filters.
  2. 02 Typing a place: towns first, then houses.
  3. 03 A place chosen.
  4. 04 A stay chosen, the nights in green.
  5. 05 Dates set.
  6. 06 Guests, with a way to clear them.
  7. 07 Everything set, the filters counted on their button.

The map, as drawn

  1. 01 The whole of Ireland: houses counted by area.
  2. 02 Closer in, each house is a pin with its price per week.
  3. 03 A house chosen in the list, lit on the map.
  4. 04 One house on its own, on its property page.

The houses come from Avantio, the booking system behind Trident, through an integration of its XML feeds: the houses themselves, and live availability and bookings. Its data set the limits of what the search could do, and the design worked within them.

Reserving

The reserve panel lives on the property page, not behind it. The guest sets dates and guests in place, sees the price for the stay, and only then moves on. Help sits right under it — WhatsApp, phone and live chat — because that's exactly when the testers went looking for it. On a phone, the panel becomes a bar at the foot that opens into a sheet, so the photos keep the screen until it's needed.

Reserving, on a desktop

  1. 01 The price per week, and Reserve, with help right under it.
  2. 02 Reserve without dates: the fields ask for them.
  3. 03 The calendar, inside the panel.
  4. 04 The guests, inside the panel.
  5. 05 Dates and guests set: the price for the stay, and Reserve.

Reserving, on a phone

  1. 01 A bar at the foot: the price, and Set Dates and Guests.
  2. 02 A sheet with the calendar and the guests together.
  3. 03 All set: Reserve.
  4. 04 Back on the page, the bar keeps the stay, with Edit.

The pages

The phone version isn't the desktop one narrowed: it was drawn first, with its own bottom bar and its own order on every page.

The pages, desktop and mobile

Hover a screen to see the whole page.

  • 01 Home
  • 02 Property
  • 03 Reserve
  • 04 Offers
  • 05 County
  • 06 Saved

The system

Every page is built from the same parts, in one style: the house card in its sizes, the map and its pins, the search, the reserve panel, the navigation and the phone's bottom bar, each with its states. It's what I'm proudest of here — everything under one style, clear and detailed down to the last state. I love drawing products, and this one had room for it.

Parts of the system

  1. 01 The house card: offers, pets, reviews, the facts and the price.
  2. 02 A smaller card, more photos in view.
  3. 03 A wide card, for a list.
  4. 04 The phone's bottom bar: Home, the map, Offers and Saved.
  5. 05 Saved, with a count.

The hardest part was holding three things together: a great deal of data, one design pattern, and what the booking system's API could and couldn't do.

My part

At Juvo, I did the research on my own — the personas, recruiting and running the tests, Google Analytics, Hotjar and the speed review, and the presentations to Trident — then the UX and the UI of every page and component. I didn't write the build's code.

These are my design screens, not the live site.

Topics

  • Travel
  • Booking
  • Map search
  • UX research
  • Figma
  • Google Analytics
  • Hotjar
  • GTmetrix

Reactions0

Share

Comments 0

  1. Nothing here yet — start the conversation.

Who’s it from?

Pick a face

Comments are read before they appear; your email is only there if I need to reply privately.