Hospitality · Web UI/UX
Mashtra, The Olive House
A stay you can feel before you book it.
- Role
- Web UI/UX Designer
- Tools
- Figma · Photoshop
- Year
- 2023
- 6 pages + reservation flow delivered
- Restaurant given equal weight to rooms
The brief
Mashtra is a stone guest house in an olive grove above Ulcinj, on the Montenegrin coast, with Valdanos beach a kilometre away. Guests do not arrive looking for a room number, they arrive looking for a few days that feel different from home.
The site had to sell the feeling first and the logistics second, while still letting someone pick dates and reserve without leaving the page they fell for.
Decisions
The kitchen is not a footnote
Eat & Drink is a full page, not a paragraph on the homepage. For a house in an olive grove the table is half the reason to come, so the dishes are photographed and given the same weight as the rooms.
Booking that never interrupts
A reservation module with a live calendar sits inside the flow of the page. Guests choose dates while still looking at the terrace, instead of being thrown into a separate booking engine mid-daydream.
Amenities you can read at a glance
Wifi, family, restaurant, room service, bar, parking, beachfront. Drawn as one icon set on a single olive band. Seven answers to seven silent questions, without a wall of text.
You should be able to smell the kitchen from the homepage.
Architecture
Structure first. Screens second.
- Deluxe Double Room and more
- Bed tags on every card
- Top Features band
- The kitchen, photographed
- The terrace
standalone
standalone
standalone
- Live calendar
- Dates and guests, inline
The path
- 01
Feel
Homepage opens on the lit stone house at dusk. Atmosphere before information.
- 02
Look
Room cards with a carousel; the amenity band answers the practical questions in one line.
- 03
Taste
Eat & Drink shows the actual plates: grilled steak, octopus risotto, the terrace under the olives.
- 04
Wander
Gallery and About carry the grove, the coast and the story of the house.
- 05
Reserve
The reservation module takes dates on a live calendar and closes the loop.
Red route · step 05The reservation lives inside the page, so wanting a room and booking one are the same moment.
The system
A high contrast serif for everything that speaks: the house name, section titles, the invitation. It carries age and hospitality where a sans would have read like a booking portal.
Reservation module
Date range calendar and guest selection, placed inline so booking never feels like leaving.
Top Features band
Seven amenity icons on one olive panel: Free Wifi, Family Rooms, Restaurant, Room Service, Bar, Free Parking, Beachfront.
Room card + carousel
One card pattern, arrows for browsing, used across all room types.
Olive branch motifs
Drawn dividers that carry the grove through the page without another photograph.
The screens
