Blue House & Grótta · Team lead, UX/UI and branding · 2024
Two guesthouses in Iceland. Two brands, one way to book.
Two Icelandic guesthouses on one interface: both brand identities, the websites, the booking flow, the guest emails, a help center and a chatbot, designed with the team I led at Siciliamia.
Rebuilt from the Figma file and the two brand books for this case study.
- brand identities I created
- 2
- pages across the two brand books
- 38
- help articles for guests
- 18
- visits in the heatmap analysis
- 5,667
Overview
Blue House B&B and Grótta Northern Lights are two guesthouses run by the same owner on the Seltjarnarnes peninsula, five minutes from Reykjavík and next to one of the city's best spots for the northern lights. They share three houses, a self-service breakfast and one booking engine, and sell their rooms on the big booking portals as well as on their own websites. At Siciliamia I led the design team that worked for them. I created both brand identities and their brand books, and with the team we redesigned the two websites on one shared interface, the booking flow, the emails guests receive, a help center and a chatbot, starting from what the site's analytics showed.
Opportunities
Book direct
How might we make booking on the guesthouses' own websites clearer than on the big portals?
Two brands, one team
How might we give each guesthouse its own identity while one small team keeps a single interface?
Fewer, better emails
How might we tell guests everything they need after booking with fewer emails and less text?
Answers before questions
How might we answer what guests ask most before they have to write to the team?
Approach
- 01
Two identities, one peninsula
Blue House is a house inside a circle, in deep navy with greys and a soft sand. Grótta is the lighthouse at the tip of the peninsula, in deep and northern greens with a touch of aurora pink. I built both brand books on the same structure, from logo, symbol and type to colour, photography, stationery and tone of voice.
Pages from my two brand books. - 02
One interface, two coats
Both websites run on the same layouts and components. Logo, colour and photography change; the structure stays, so the team designs each page once and dresses it in both brands, across four breakpoints from desktop to phone.
- 03
Read the data first
In February 2024 we went through the site's heatmaps and visits: 3,552 on desktop with 80% engaged, 2,074 on mobile with 73.86% engaged, and only 41 on tablet. Half of the visitors never scrolled past the hero and about 17% reached the end of the home page. Day Tours was among the least clicked buttons, nobody opened Support, Forum or Feedback on mobile, so those links went and the map and FAQ moved into general information, and with the cookie banner guests met two pop-ups on arrival.
- 04
Dates, guests, room, done
On the phone the booking starts on the home page: dates, guests and one search button. Dates open as a full calendar, guests as three steppers, the results only list what is free on those dates, and each room shows the price for the whole stay once the dates are in.
- 05
The same steps on a desktop
On desktop the fields sit in one bar over the photo of the house, the rooms list below with refundable and non-refundable prices, and the room page keeps the stay at hand in a side panel, with states for rooms that are taken, partly free or need an enquiry.
- 06
Fewer, better emails
Guests received a long chain of automatic emails full of text, and most of them scrolled straight through. The brief was to send fewer and still say everything, so the templates were redesigned around icons, short blocks and links to the site: confirmation, breakfast, payment, house rules, northern lights tips and the review after the stay.
- 07
Answers before questions
A help center in Zoho Desk gathers 18 articles, 11 about the houses and 7 about Iceland. Puffinbot, a chatbot we designed for both houses, greets guests, offers 13 topics and answers with links to those articles, then asks how it went.
Puffinbot rebuilt from the chat mockup and the script in the file. - 08
Built to hand off
As team lead I set how files reached the engineers: a checklist before every handoff (delete what is unused, name layers in one convention, give every component its states), a component library with guidelines for developers, and the brief to connect the booking page to Beds24, the guesthouses' booking engine.
Impact & Outcomes
- Both websites are live at bluehouse.is and grottanorthernlights.com, one interface in two brands, and their booking pages carry each brand's colours, icons and price promise.
- Two complete brand books, from logo and colour to stationery, email signatures and tone of voice.
- Led the design team from analytics and research to handoff, with one checklist and one component library for both brands.
Screens from the Figma file.
Next case · Karma
Rate the player, not just the match.