Casa del Aire
I designed and developed a website for a rural accommodation business, creating an immersive experience that reflected its essence and encouraged direct bookings.
Context
The client lacked a standalone digital presence, limiting how they communicated their value and depending entirely on external platforms. They needed a website that reflected the warmth of the place and encouraged users to book without intermediaries. My role covered both design and development end-to-end.
Problem
The previous setup didn’t showcase the charm of the accommodation nor build trust outside third-party platforms. The challenge was to deliver a coherent, emotional, and conversion-driven experience.
Research
Analysis of Airbnb listings
To define a clear, conversion-focused structure, I analyzed how Airbnb organizes information in property listings and which patterns help users make decisions. The goal was to understand what content is truly relevant when evaluating a rural home and how to present it in a trustworthy, easy-to-navigate format.
Key Insights
Content divided into clear sections
Services, space description, house rules, location, images, and reviews. This reduces cognitive load.
Content divided into clear sections
Services, space description, house rules, location, images, and reviews. This reduces cognitive load.
Content divided into clear sections
Services, space description, house rules, location, images, and reviews. This reduces cognitive load.
Content divided into clear sections
Services, space description, house rules, location, images, and reviews. This reduces cognitive load.
Design Decisions
Clear sections
The content was organized following best practices observed in the research: property description, services, gallery, reviews, location, and access to the floor plan. Each block is visually separated to reduce cognitive load.
Business impact
To reduce cognitive load, answer typical pre-booking questions upfront and increase guests’ confidence to book directly.
Sticky CTA
I introduced a sticky CTA component that keeps the “Book Now” action always visible, making it easier to drive direct reservations without relying on Airbnb or Booking.
Business impact
Reducing friction at the moment of decision and increasing the likelihood of direct reservations instead of platform bookings.
Immersive gallery
I designed an image modal that allows users to explore the property in detail, sliding through photos with their corresponding title and description. This creates a more emotional and high-quality perception of the house.
Business impact
To create a more emotional, high-quality perception of the house, reduce uncertainty about the space and support higher willingness to book at the listed price.
Design System
Typography
Image of the living room fireplace, where you can see the comfortable sofas on both sides.
Image of the living room fireplace, where you can see the comfortable sofas on both sides.
Image of the living room fireplace, where you can see the comfortable sofas on both sides.
Image of the living room fireplace, where you can see the comfortable sofas on both sides.
Image of the living room fireplace, where you can see the comfortable sofas on both sides.
Image of the living room fireplace, where you can see the comfortable sofas on both sides.
Color
primary-100
#F1E8DF
primary-200
#E49342
primary-300
#CB731A
primary-400
#AA5D0F
primary-500
#693709
primary-600
#190D02
Icons
Components
Impact
I compared the first month of performance of the new website with the previous period, when the property relied only on Airbnb and Booking. Using the client’s booking and inquiry records, I tracked two key metrics, direct bookings and contact requests, to assess how the new experience improved conversion and reduced dependence on third-party platforms.
Direct Bookings ↑
15%
Contact Request ↑
22.5%
Learnings
This project showed how combining immersive storytelling with clear conversion goals can make a hospitality website both engaging and effective. It also reinforced the importance of performance and a tight design-to-development workflow.
Storytelling
I learned how to use narrative to support key actions (inquiries and bookings), aligning visual storytelling with clarity and business outcomes.
Building through code
Developing the site myself (CSS, JavaScript, VS Code, GitHub) deepened my understanding of technical constraints and helped me better balance aesthetics, usability, performance, and feasibility.