2026
Mossgrove Lodge
Sell the slow morning first — then make booking direct the easy choice.
A slow-travel eco-lodge site that sells the feeling first and books direct: immersive scroll, room stories and a clear booking flow.
A self-initiated concept, designed like a real product.
The brief we set ourselves
Design the website of a small forest eco-lodge that sells the feeling before the room, tells every cabin as a story, and turns «I'll book it on a travel site» into booking direct — with the perks that only the lodge can give.
Who it is for
Couples and remote workers aged 28–50 looking for a quiet nature retreat two hours from the city — people who choose by photos and atmosphere, then compare the price.
What we designed
An immersive home with a glass booking bar, a cabin story page with a sticky booking card, the date step with a busy-day error, and a mobile page of seasons and experiences.
Design facts from the concept files — not business results.
02ResearchGuests fall in love on the lodge's site — and book somewhere else.
We looked at where boutique stays are going, how much of an independent hotel's business goes through travel agencies, and how hotel and eco-lodge sites on Behance and Dribbble balance atmosphere with booking.
We looked at where boutique stays are going, how much of an independent hotel's business goes through travel agencies, and how hotel and eco-lodge sites on Behance and Dribbble balance atmosphere with booking.
- Market
Boutique hotels were put at $28.5B in 2025, projected at $50.5B by 2033 (CAGR 7.5%).
DecisionA growing, design-led segment: the site has to look as considered as the stay itself.
- Direct booking
For independent hotels, online travel agencies account for 63.4% of bookings (Cloudbeds data across 90M bookings).
DecisionMake direct booking the visible default: the booking bar sits on the hero, and «book direct» perks appear next to every price.
- Patterns
The hotel sites we collected either sell mood with full-bleed photography and hide the booking, or show a booking engine with no atmosphere at all.
DecisionKeep both on one screen: the photo stays full-bleed, the booking bar is quiet linen glass over it, and the price is always one line away.
Patterns we borrowed
- Boutique hotel sites
- A full-bleed hero photo with a booking bar on top and a serif headline
- Editorial magazines
- A drop cap, a guest-book quote and a hairline amenity list on the cabin page
- Booking engines
- A two-month calendar with the selected range, booked days and a step indicator
- Travel apps
- A sticky bottom panel on mobile with the offer and one «Check dates» button
What we left out
Photos, names, logos and copy of any real lodge or hotel. Mossgrove has its own name, mark and photographs made for the concept, without people or brands in the frame.
Moodboard references
From a booking form with a picture to a stay you can almost smell.
Every «before» is generated from the very same page markup, reduced to outlines, readable labels and grey word-bars — no colour, photos or glass. Drag a handle to compare.
- 01
Hierarchy
Feeling first, decision second: the headline and one photo fill the first screen, but dates, guests and the price for two nights are already on it.
- 02
Grid & density
A wide 12-column page with lots of air; the cabin story keeps a 7/5 split so the booking card stays next to the text; mobile stacks the same parts for one thumb.
- 03
States
Selected cabin and range in the calendar, booked days struck through, a «last cabin» dot, and the error state: trying to add an already booked Saturday — with an alternative cabin offered in place.
- 04
Glass, measured
Linen glass (white 74%, 30 px blur) over the forest; muted text darkened to #3A4137 because the original lichen grey dropped to about 2.6:1 over dark pines.
- 05
Book-direct perks
Breakfast basket, late check-out and a sauna session appear on the hero bar, the cabin card and the order summary — the reason to book here, always next to the price.
- 06
Real-looking data
Fourteen cabins, two-night totals with a dog stay and a 5% direct discount, autumn experiences with times and prices — real lengths in every row.
Moss for the decision, cedar only for warmth.
Moss carries every booking action (7.7:1 with white text); cedar is 2.7:1 on fog — kickers and small warm details on large text, never body copy. Cormorant Garamond sets the quiet, luxurious headlines, Manrope the booking interface.
A spaced MOSSGROVE / LODGE wordmark where the «O» is a ring with a sprout; at small sizes the ring with two leaves — moss and cedar — works alone. Picked from four sketched directions as the quietest one.
#3F5A3C
vs bg 6.54:1 · label 7.67:1
#B9874B
on bg 2.7:1
#1E241D
on bg 13.53:1
#EFEDE6
text on it 13.53:1
#F8F7F2
text on it 14.77:1
#5C6458
on bg 5.24:1
Accent / bg 2.7:1 — cedar is for kickers, rules and warm details, never for body text or signal icons.
Cormorant Garamond 500Mossgrove Lodge
Cormorant Garamond 500Couples and remote workers 28–50 seeking nature retreats
Manrope 400 · 16/26A slow-travel eco-lodge site that sells the feeling first and books direct: immersive scroll, room stories and a clear booking flow.
Manrope 600 · 12hospitality / eco-lodge
From the first misty photo to the chosen weekend.
Home
The cabin in the fog as the whole first screen, the glass booking bar with book-direct perks, then an intro with three numbers and two cabin cards with galleries.
Cabin story
Fern Cabin: a 1 + 2 gallery, a drop-cap story, a guest-book quote and amenities — with a sticky booking card that adds up the stay and lists what only booking direct gives.
Choose dates — the error state
Step 2 of 4: a two-month calendar with the selected stay, booked days and the last free cabins, a clear message when a booked Saturday is tapped, and the order summary.
Seasons · mobile
The forest floor photo, a glass season card «The forest exhales.», season tabs, autumn experiences with prices and a sticky «Check dates» panel.
Component sheet
Logo, the date-range booking bar on glass and solid, room card with gallery, season tabs in three states, perk list, location block, buttons and inputs with an error, and the footer newsletter.
SereneOrganicMisty
06SEOFound by people looking for a quiet weekend — not only by those who know the name.
A small lodge competes with travel sites for every search. The SEO plan for this concept: check what search engines can actually read on a photo-first site, map the intent behind «cabin in the woods» searches, give every cabin and season its own page, and keep the heavy forest photography fast.
A small lodge competes with travel sites for every search. The SEO plan for this concept: check what search engines can actually read on a photo-first site, map the intent behind «cabin in the woods» searches, give every cabin and season its own page, and keep the heavy forest photography fast.
Search snippets as we would write them — titles and descriptions drafted from this concept's own page copy, shown without any search engine's branding.
- 01
Audit
Before writing a single title: what a crawler sees on a site that leads with photographs.
What we check- Indexing: sitemap, robots.txt and canonical tags on cabin and date URLs
- Booking steps (dates, guests, summary) kept out of the index with noindex and parameter rules
- Cabin names and stories as real headings and text, not baked into images
- Alt text and descriptive file names for every cabin and season photo
- Name, address and phone identical on the site and the lodge's local listings
- 02
Keyword map
Searches grouped by intent, and each group assigned to exactly one page, so the pages never compete with each other.
Example clusters · no volumes, conceptRetreatforest cabin retreatcabin in the woods weekendquiet getaway for twoAmenitycabin with saunadog-friendly forest cabincabin with wood stoveSeasonautumn cabin breakwinter cabin with fireplaceBrandmossgrove lodge bookingmossgrove lodge offers - 03
Site structure
One page per cabin and per season, so every cluster has a real landing page — and structured data that says what each page is.
Page planStructured dataLodgingBusinessAccommodationOfferFAQPageBreadcrumbList/Home/cabins/Cabins/cabins/fern-cabin/Fern Cabin/cabins/<cabin>/13 more cabin pages
/seasons/Seasons/seasons/autumn/Autumn/seasons/winter/Winter
/experiences/Experiences/book/Booking steps · noindex
- 04
Speed & Core Web Vitals
The first screen is a full-bleed forest photo, so speed work starts with that one image.
Targets · 75th percentile of visitsLCP< 2.5 sHero photo in AVIF / WebP at the right width, preloaded; no slider on first loadINP< 200 msBooking bar and calendar ready without a heavy booking script up frontCLS< 0.1Fixed image ratios and reserved space for the glass booking barThresholds are Google's published «good» values for Core Web Vitals — targets for the build, not measured results.
Questions & answers
Is Mossgrove Lodge a real product?
No. Mossgrove Lodge is a self-initiated concept by Omnisense — a brief we set ourselves, with no client and no business metrics. The lodge, cabins, prices, dates and guest quotes are sample data.
Who is the site for?
Couples and remote workers aged 28–50 looking for a quiet nature retreat two hours from the city — people who choose by photos and atmosphere, then compare the price.
How does the site encourage booking direct?
The booking bar sits on the hero as quiet linen glass over the photo, and «book direct» perks appear next to every price.
What did you design?
An immersive home with a glass booking bar, a cabin story page with a sticky booking card, the date step with a busy-day error, and a mobile page of seasons and experiences — plus a component sheet, logo, palette and type system.
Did you plan SEO too?
Yes. The plan checks what search engines can actually read on a photo-first site, maps the intent behind «cabin in the woods» searches, gives every cabin and season its own page, and keeps the heavy forest photography fast.
