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
A stone guest house in an olive grove above Ulcinj, a kilometre from Valdanos beach. Nobody arrives looking for a room number. They arrive looking for a few days unlike home.
Sell the feeling first, the logistics second, and never make anyone leave the page they fell for.
- 6
- pages designed
- 7
- amenities iconified
- 3
- iterations of the rooms page
- 1440
- desktop frame, 5351 tall
How this project was made
The artifacts on this page, in the order they were produced. Each pill jumps to its section.
- 1
Discover
- Not part of this project
- 2
Define
- 3
Design
- 4
Deliver
- 5
Evaluate
What mattered
The decisions that shaped everything below.
The kitchen is not a footnote
Eat & Drink gets a full page. For a house in an olive grove, the table is half the reason to come.
Booking that never interrupts
The live calendar sits inside the page, so dates get picked while you are still looking at the terrace.
Seven answers, no paragraph
Wifi, family rooms, restaurant, room service, bar, parking, beachfront. One olive band, seven silent questions closed.
User flow
The steps a person takes to finish the one job this design protects.
- 1FeelThe lit stone house at dusk. Atmosphere before information.
- 2LookRoom cards, then the amenity band in one line.
- 3TasteThe actual plates: grilled steak, octopus risotto, the terrace.
- 4WanderThe grove, the coast, the story of the house.
- 5ReserveA live calendar, in the page, closing the loop.
Red route.The reservation lives inside the page, so wanting a room and booking one are the same moment.
Colour
The palette and what each family is allowed to do.
- Olive#617064
- Lime wash#FFFFFF
- Ink#242424
- Charcoal#424242
- Stone#636363
- Ash#A8A8A8
Type
The typeface, shown at the sizes it ships at.
A high contrast serif for everything that speaks. It carries age and hospitality where a sans would read like a booking portal.
- 1
Reservation module
Dates and guests, inline, so booking never feels like leaving.
- 2
Top Features band
Seven amenity icons on one olive panel.
- 3
Room card + carousel
One card pattern across every room type.
- 4
Olive branch motifs
Drawn dividers carrying the grove without another photograph.
UI screens
The shipped screens, with the details worth a second look numbered.
Outcomes
What shipped, and where it lives.
- 6 pages + reservation flow delivered
- Restaurant given equal weight to rooms
You should be able to smell the kitchen from the homepage.