B2C travel platform for solo female travellers

Faraway travel website: Cape Town hero and primary navigation.

Situation

Faraway is a small-group travel brand for women travelling solo – starting with a flagship Cape Town + Garden Route trip in November 2027. Everything about the operating model was decided before the site existed: single rooms as standard (not the upgrade), groups of 10 (never 20+), a seven-seat minimum before departure, flights inside the price, one host who is on the trip.

The build constraint was awkward. There was no first-trip photography. No participant testimonials. No brand history to lean on. The visible host – Cynthia – is real, but the trust the site had to earn had to come from somewhere else.

Task

Decide what a bookable travel site looks like when the honest evidence base is thinner than the brand's ambition – and build it so the craft carries the trust the social proof can't yet supply, without ever fabricating.

Action

System workflow

Arrival

Visitor lands at faraway.no. Cream-cream-sage palette carries the brand while photography is scarce.

Hero

Desktop: Framer Motion clip-path reveal on scroll, useReducedMotion honoured. Mobile: separate MobileHero component, viewport-fill.

Itinerary

Ten days of Cape Town + Garden Route. Typed content in trip.ts, no CMS. Every day: title, place, narrative.

Leaflet map

Eight sage pin icons with day numbers in Playfair. CARTO light tiles. FitOnMount invalidateSize then fitBounds with 40px padding.

Pricing

toLocaleString nb-NO for thousands separators plus kr suffix. 49 500 kr single, 44 000 kr shared, 7 500 kr deposit.

Booking

Ten seats, seven minimum, six remaining. Interest board of twelve future destinations gates future departures.

QA gate

Playwright at 320 / 360 / 390 / 1440 px on every push. HTTP 200 plus zero horizontal overflow. Regressions fail CI before they fail a phone.

Architecture

Next.js 16 App Router, deliberate simplicity. No CMS. All trip content lives in a typed trip.ts module: itinerary array (day number, title, place, narrative), map points (eight lat/lng stops for Cape Town → Cape Point → Stellenbosch → Hermanus → Oudtshoorn → Knysna → Plettenberg Bay → George), pricing (49,500 NOK single, 44,000 NOK shared, 7,500 NOK deposit), seat count (10 seats, 7 minimum, 6 remaining), inclusions, weather advisories, physical demand.

Interactive itinerary map. react-leaflet with a CARTO light tile layer; custom pin icons in the brand's sage colour with day numbers rendered in the Playfair display serif; a dashed polyline connects stops; FitOnMount invalidates map size (critical for a dynamically-imported map) then fits bounds with 40px padding. Tooltip on hover names the day and the place.

Scroll-driven hero. Framer Motion clip-path reveal that opens the frame as the user scrolls past – desktop and mobile as separate components (Hero.tsx, MobileHero.tsx), not responsive shrinking. useReducedMotion honoured so the animation degrades to a static frame for users who ask it to.

Twelve-destination interest board. A voting board (Marrakech, Douro Valley, Sri Lanka, Naxos, Andalusia, Cusco/Machu Picchu, Namibia, Iceland, others) is the mechanism by which future departures get greenlit – a destination only ships when the board's vote count justifies it. Currently aspirational, not audited as real member activity; the PRODUCT.md says so explicitly.

Alternatives considered and rejected:

A generic bookings-CMS setup (Sanity, Contentful, Payload). Overkill for one flagship trip; adds a per-edit review cycle that a trip.ts file doesn't.
Stock adventure-travel photography. Would have earned distrust the first time a prospect noticed. Better to ship less imagery and let typography and layout carry the brand.
A single generic hero that scaled from mobile to desktop. The mobile hero and the desktop hero want different things (viewport-fill + immediacy vs slow scroll-driven reveal); one component doing both would compromise both.

Implementation

Typography and colour as the brand. Inter (weights 300–600, ss01 + cv11 stylistic sets for character disambiguation) for body; Playfair Display (weights 400–700, liga + dlig for ligatures) for display. A tokenised palette – cream, ink, paper, sand, sage, moss, ochre – with sage-on-cream tested to WCAG AA (~5.1:1 contrast). Ligatures and stylistic sets are enabled deliberately; they are the difference between a serif that reads as intentional and one that reads as default.
Playwright QA at production widths. Every viewport a real user might arrive on – 320, 360, 390, 1440 – tested for HTTP 200 and zero horizontal overflow. Mobile is a first-class target, not a shrink.
Semantic structure over ARIA workarounds. <section>, <ol>, <ul>, <h1>–<h3> used honestly; decorative ticket-stub punches marked aria-hidden. Tap targets ≥ 44px; focus rings retained.
Norwegian pricing format. toLocaleString("nb-NO") for thousands separators and the kr suffix – the pricing feels native, not a US bank error.
Vercel Web Analytics wired. Anonymised visitor data only; no custom telemetry, no third-party trackers. A B2C marketing site, not an AI product – the observability surface is minimal by design.

Verification

Playwright suite runs npm run qa across the four widths on every push.
No fabricated evidence. The PRODUCT.md names what does not exist yet (real trip photography, verified Reisegarantifondet backing, second/third departures) and instructs future work not to invent it. This is the discipline that keeps the site honest.
Cynthia is the trust anchor. Her real photograph, real name, and real biography carry the credibility the brand cannot yet claim structurally. The operations/development/design team stays off-page by policy.

Result

Faraway destination-interest board with destination cards and interest controls.

Live at faraway.no within a week of the split from demo-hub.
Flagship trip real and bookable – Cape Town + Garden Route, 6–15 November 2027, ten seats total, seven-seat minimum.
Zero horizontal overflow at any tested viewport. Playwright enforces this every push, so a stylesheet regression fails CI before it fails a phone.
The site earns its distinct feel from typography, colour, and animation choices – not from placeholder testimonials or stock heroism.

Second-order effects: the "craft as credibility" discipline hardened a rule that now travels across products – when the honest evidence is thinner than the ambition, the answer is better craft, not fabricated proof. The PRODUCT.md template with an explicit "what doesn't exist yet" section is being adopted by the next couple of client products.

What we would do differently: wire a lightweight interest-board persistence (Supabase, one table) before launch rather than treating the board as visual. The votes are aspirational for a good reason – the audit trail isn't there yet – but that same audit trail is exactly what would let the brand credibly say "82 women asked us to run Douro Valley next; we're taking deposits now."

Skills evidenced

B2C product craft – typography-first design, responsive-native (not responsive-shrinking), motion that honours reduced-motion preferences.
Interactive maps with real data – react-leaflet + Leaflet with custom pin markers, size-invalidation on dynamic import, semantic tooltip colour.
Frontend polish under a "no CMS" constraint – hard-coded but typed content, ready to graduate to a schema-backed CMS when the volume justifies it.
Bilingual-aware detail work – Norwegian pricing format, Nordic-understated voice, positioning ready to translate.
Accessibility and QA discipline – WCAG AA contrast tested, Playwright QA gate on production widths, tap-target sizes verified.

Portable lessons

When social proof is thin, craft is the substitute. Every design decision is either earning trust or spending it; ligatures and pin colour are earning it just as much as testimonials would have.
Refuse to fabricate on the marketing side. A PRODUCT.md that lists what does not exist yet is the discipline that keeps the site trustworthy as it grows. The temptation to invent is highest when the site is newest.
Mobile-native means separate components, not responsive shrinking, whenever the two experiences want different things. The mobile hero and the desktop hero have different jobs; one component doing both compromises both.