Own project · demo brand/2026
Cabañas Pinar Alto
A demo landing with online booking for three cabins in the Sierras de Córdoba: live availability, the group total instead of the nightly rate, and a deposit paid without talking to anyone.
(01) Overview
Cabañas Pinar Alto is a demo brand I created from scratch: three wood and stone cabins in the Valle de Calamuchita, an hour and twenty minutes from Córdoba. For it I built a working demo: a long landing plus a complete booking flow, designed around the brand's logo and a design system derived from it. Prices, occupancy, reviews, bus times and contact details are sample data, so the experience can be judged the way a real guest would live it.
Client
Own project · demo brand
Year
2026
Services
Design, Development, Strategy
Deliverables
Product strategy brief, Landing and booking flow demo, Design system, Design system documentation
(A) The Challenge
Small lodgings like this usually close bookings by chat, and every step loses people: a question sent on Sunday at 11 pm gets answered on Monday, when the guest has already booked elsewhere. Platforms solve that but keep a commission on every stay. The demo had to show a booking that closes by itself, at any hour, on a phone.
(B) The Approach
- 01
Dates before anything else
The date search sits on top of everything: in the hero, and as a bar that stays with you on mobile while you scroll the page.
- 02
The group total, never per night
The price is never a nightly rate left for the visitor to multiply. The panel adds season, the Friday and Saturday surcharge and cleaning, then shows the 40% deposit and the balance due on arrival.
- 03
The road also sells
How to get there is treated as a sales section: a four-step route, bus times, fares, GPS coordinates and what happens if you arrive late.
- 04
Both ends at once
To make the idea tangible for the owners, confirming a simulated booking shows both ends at the same time: the WhatsApp notification the owner would receive and the message with directions for the guest.
cabins with their own calendar and live total
deposit calculated live, balance on arrival
landing sections, from date search to closing call
(02) Brand & Design System
The logo is my own design: a cut-paper mark with the roof and chimney, the sun peeking out and, under the roof, the sierra and three pines, drawn with soft, slightly uneven shapes and no sharp points. Its terracotta roof became the only interface accent, and the sun and pine colours stay inside the brand. Around it, a mud and mountain palette (deep green, sand, burnt wood) and lots of vertical air, because space communicates calm better than copy. Fraunces, a humanist serif, separates lodging from cheap rentals and sets the name; Inter carries the interface. The symbol works on its own in the header and as the browser icon.
Palette
Typography
Fraunces
Total del grupo · $ 852.000
serif de titulares y cifras · Inter para la interfaz y el texto
(03) The Product
Three cabins, the detail on demand
Each card shows capacity, size, bedrooms and bathrooms, a photo strip that opens a full-screen viewer, and the lowest nightly rate. The detail expands in place with what is included, and Check dates jumps to the calendar with that cabin already selected.
The group total, not the price per night
Two months side by side with sold nights hatched and high season marked. Picking a range fills a panel with the nights at their average rate, cleaning, the total for the group, the deposit and the balance, plus the bus fare for everyone if they travel without a car.
Three steps and it is confirmed
Your details, summary and payment, confirmation. The summary repeats cabin, dates, season and guests, offers Mercado Pago or bank transfer, and asks to accept the cancellation policy before paying, as Argentine e-commerce rules require.
Both ends of the booking, at the same second
A booking code to copy and two phones: the owner's, receiving the new booking with the deposit credited and the calendar already blocked, and the guest's, receiving the directions to the gate. This is the screen that explains what is being sold.
The road as part of the plan
A four-step route from Córdoba to the gate, six daily buses with notes, the transfer from the village, GPS coordinates to copy, what to do if you arrive at night and a map to close the section.
(04) The Outcome
A ten-section landing and a three-step booking flow that anyone can click through as a guest would. The calendar marks sold nights, respects each season's minimum stay and won't let a range cross an occupied night, so the demo always looks lived in. The floating WhatsApp button writes the message with the chosen dates and total, for guests who still prefer to ask. Alongside it, an 11-section design system page that documents colours, type and components so the brand stays consistent as the site grows.