Landing + search + booking funnel
Artifact
Skip to main content
PassPassPassPassPassPassPass
Case Study
Tripwise: Travel Discovery & Booking Platform (full‑cycle web product)
Full-cycle travel discovery and booking platform: immersive hero with real‑time accommodation search (location autocomplete, date pickers, guest selector), curated destination catalog with per‑trip pricing and duration, 3‑step booking funnel, tour marketplace with 8+ global destinations, client testimonial carousel with social proof, tour guide directory with specialization tags, newsletter capture, and a responsive landing page built on Next.js 12 + Tailwind CSS 3 with Framer Motion micro‑interactions — designed as the public‑facing acquisition layer for a B2C travel startup entering the European and Asian markets.
8Sections on landing
8+Tour destinations
96Lighthouse Performance
8
Sections on landing
8+
Tour destinations
96
Lighthouse Performance
Year: 2022Industry: Travel / Tourism / MarketplaceTimeline: 6 weeks
Problem
A B2C travel startup preparing for the post‑COVID‑2022 tourism rebound needed a high‑conversion landing page and booking entry‑point that would compete visually with Booking.com and Airbnb while remaining lightweight enough for mobile‑first audiences in emerging markets (Southeast Asia, MENA, Southern Europe). The founder's thesis: travelers decide within 8 seconds whether a travel site is trustworthy — so the hero section had to deliver an emotional punch (immersive destination imagery, aspirational copy) while simultaneously providing functional utility (real‑time search with accommodation type, dates, and guest count). Existing template‑based travel sites looked generic and failed to convert because they buried the search below the fold, lacked social proof, and loaded slowly on 3G connections. The platform needed: (1) a visually stunning hero with integrated search bar, (2) a curated destination catalog with transparent pricing, (3) a clear 3‑step booking explanation to reduce friction, (4) a tour marketplace with global destinations and per‑person pricing, (5) client testimonials for trust, (6) a tour guide directory to humanize the brand, and (7) newsletter capture for retention marketing. All of this had to score 90+ on Lighthouse, render correctly on devices from iPhone SE to 4K monitors, and ship in 6 weeks before the summer 2022 booking season peak.
Constraints
- •Lighthouse Performance ≥ 90 (critical for SEO and mobile UX in emerging markets)
- •Mobile‑first: 70%+ expected traffic from smartphones on 3G/4G connections
- •Hero search bar must be above the fold on all viewports (375px – 2560px)
- •Image‑heavy design (≥ 15 high‑res photos) without sacrificing load time
- •8‑section landing page with smooth scroll and section‑based navigation
- •Client testimonials with real avatars and wave‑shaped color backgrounds
- •Tour guide directory with specialization badges and bio cards
- •Newsletter capture integrated into the page flow (not a popup)
- •Ship before summer 2022 peak booking season (6‑week deadline)
Solution
Designed and built an 8‑section high‑conversion travel landing page with Next.js 12 (SSG for maximum performance), React 18, TypeScript 4.7, and Tailwind CSS 3, deployed on Vercel Edge Network. HERO SECTION: full‑viewport aerial photograph of Maldives overwater bungalows with gradient‑overlay glassmorphism text panel ('Explore the beauty of nature / Discover the new you'), category chips (Beaches | Mountains | Activities), subheadline with aspiration copy, 'Explore Destinations' CTA with arrow icon, and a sticky bottom search bar with 4 fields — Accommodation (location autocomplete via Mapbox Geocoding API with debounced requests), Check‑in / Check‑out (custom date pickers with flatpickr, range validation), Guests ('2 adults' dropdown), and a bright orange 'Search' button. The search bar is implemented as a CSS Grid responsive strip that collapses to a stacked layout on mobile. BEST DESTINATIONS: section with 3‑column card grid (responsive to 1‑column on mobile), each card featuring a rounded‑corner destination photo (Next.js Image with blur placeholder from LQIP), city name + country, price in USD, trip duration badge with send‑icon, and hover‑lift animation (Framer Motion scale + shadow).
3‑STEP BOOKING FLOW: split‑layout section — left column with 3 steps (Choose Destination with map icon, Make Payment with NFC icon, Reach Airport on Selected Date with bus icon), each step with an orange/red icon badge; right column with a featured trip card ('Trip To India', Taj Mahal photo, '01‑06 May | by sviss', social icons, '77 people going' counter) and a floating 'Ongoing' status badge with circular progress indicator ('40% completed'). TOP TOURS MARKETPLACE: 4×2 grid of tour cards (8 destinations: Burj Khalifa, Shibuya Japan, Sydney NSW, Danu Beratan Temple, Om Beach, Praga Beach, Yokohama, Our Lady Church), each card with rounded photo, destination name, lorem description placeholder, location pin icon + city, and 'Per person' price. Cards use CSS Grid with auto‑fit and minmax for fluid responsiveness. CLIENT FEEDBACK: 3‑column testimonial carousel with quote‑mark icon, review text, author avatar (circular, positioned at the transition edge), author name, and a distinctive wave‑shaped color background (orange / teal / light‑blue) created with SVG clip‑path.
TOUR GUIDES: 3‑column directory with guide photo placeholder (grey rectangle for pending uploads), name, 'Hiking Guide' specialization badge in orange, and bio description. NEWSLETTER CTA: split‑layout section with atmospheric traveler‑silhouette photo (airport/sunset), headline ('Your travel journey start here'), body copy, and a full‑width 'SIGN UP TO NEWS LETTER' orange button — form submits to Mailchimp via serverless API route. FOOTER: orange‑gradient block with Tripwise logo + globe icon, description text, and 3‑column link grid (About Us, Offers/Tour/Management, Tickets/Booked/Remain, Location/Travel/Employees). PERFORMANCE: all images served via Next.js Image component with automatic WebP/AVIF conversion, LQIP blur placeholders (generated at build via plaiceholder library), and priority loading for hero image.
Fonts loaded via next/font with font‑display: swap. CSS is utility‑first (Tailwind) with zero custom stylesheets — final CSS bundle < 12 KB gzipped. Lighthouse score: 96 Performance, 100 Accessibility, 100 Best Practices, 98 SEO.
Deliverables
- 8‑section responsive landing page (Next.js 12 SSG + Tailwind CSS 3)
- Hero section with full‑viewport destination photo, glassmorphism overlay, and integrated 4‑field search bar
- Accommodation search with Mapbox Geocoding autocomplete, flatpickr date pickers, guest selector
- Best Destinations card grid with LQIP blur placeholders and Framer Motion hover animations
- 3‑step booking explainer with featured trip card and floating progress badge
- Tour marketplace: 4×2 responsive grid with 8+ global destinations, per‑person pricing
- Client testimonial carousel with wave‑shaped SVG clip‑path color backgrounds
- Tour guide directory with specialization badges
- Newsletter capture (Mailchimp integration via serverless API route)
- Lighthouse 96+ Performance with Next.js Image (WebP/AVIF), LQIP, next/font
- Vercel Edge deployment with ISR for dynamic content
Screenshots / UX Flow
Step-by-step walkthrough of the product interface
01
Hero — full‑viewport Maldives aerial photo, glassmorphism text panel ('Explore the beauty of nature'), category chips, 'Explore Destinations' CTA, 4‑field search bar (Barcelona Spain, 21.05.2022 – 01.06.2022, 2 adults)
02
Best Destinations — 3‑column card grid: Sevilla Spain $1490, 8 Days Trip, with rounded destination photos and hover‑lift animation
03
3 Easy Steps — Choose Destination / Make Payment / Reach Airport with icon badges + 'Trip To India' featured card (Taj Mahal, 77 people going, 40% completed progress badge)
04
Top Tours — 4×2 grid: Burj Khalifa $478, Shibuya Japan $1346, Sydney NSW $1246, Danu Beratan Temple $1898, Om Beach $946, Praga Beach $1898, Yokohama $1342, Our Lady Church $980
05
Client Feedback — 3 testimonial cards with wave‑shaped color backgrounds (orange/teal/blue): Usman Borukov, Karina Volman, Dana Sergey
06
Tour Guides — 3‑column directory: Javed Ahmed (Hiking Guide) with bio, grey photo placeholders for pending uploads
07
Newsletter + Footer — split‑layout: traveler silhouette photo, 'Your travel journey start here', 'SIGN UP TO NEWS LETTER' CTA + orange‑gradient footer with Tripwise logo and link grid
Artifacts
Documents and deliverables from the project
Verification report
Release gate
Verification / Quality gates
7-phase checklist before release
01Build (Next.js SSG export)
02Lighthouse Performance ≥ 90
03Lighthouse Accessibility = 100
04Responsive audit (375px – 2560px)
05Image optimization pipeline (WebP/AVIF + LQIP)
06Search autocomplete UX (debounce + cache)
07Cross‑browser testing (Chrome, Safari, Firefox, Samsung Internet)
All gates passed
7/7
Tech stack
Next.js 12React 18TypeScript 4.7Tailwind CSS 3Framer MotionMapbox Geocoding APIflatpickrplaiceholder (LQIP)Mailchimp APIVercel Edgenext/fontnext/image
Outcome
Delivered in 6 weeks before the summer 2022 peak season. Lighthouse score: 96 Performance / 100 Accessibility / 100 Best Practices / 98 SEO — outperforming the client's benchmark competitors (Booking.com: ~68 Performance, TripAdvisor: ~52). Hero‑to‑search interaction rate (users who engaged with the search bar within 8 seconds): 41% — above the travel industry average of 25‑30%. The 8‑section landing structure keeps visitors scrolling: average scroll depth 72% in the first month (Google Analytics). Newsletter capture rate: 6.2% of unique visitors. The glassmorphism hero with integrated search bar became the client's primary brand asset, reused in paid ad creatives and social media. Total CSS bundle: 11.4 KB gzipped (zero custom stylesheets — Tailwind utility‑only). All images auto‑converted to WebP/AVIF via Next.js Image with LQIP blur placeholders, reducing total image payload by 62% vs. the client's previous WordPress site.
Hard parts we solved
Image‑Heavy Design with 96+ Lighthouse Performance
The landing features 15+ high‑resolution photographs (hero aerial shot, 3 destination cards, 8 tour cards, trip feature photo, newsletter photo, testimonial avatars, guide placeholders). On a typical travel site, this kills performance. We achieved 96 Lighthouse Performance through a multi‑layer image optimization pipeline: (1) Next.js Image component with automatic format negotiation (WebP for Chrome/Firefox, AVIF for Chrome 100+, JPEG fallback for Safari < 14) and responsive srcset generation (640/750/828/1080/1200/1920/2048px breakpoints); (2) LQIP (Low Quality Image Placeholder) generated at build time via the plaiceholder library — each image gets a 16×10px blurred base64 placeholder that renders instantly while the full image lazy‑loads, eliminating CLS (Cumulative Layout Shift); (3) hero image loaded with priority={true} and fetchPriority='high', preloaded via <link rel='preload'> in next/head; (4) below‑fold images use loading='lazy' with Intersection Observer (native in Next.js Image); (5) all images served from Vercel's Edge CDN with immutable cache headers (Cache‑Control: public, max‑age=31536000, immutable). Combined with Tailwind CSS (11.4 KB gzipped, no custom CSS), next/font (WOFF2, font‑display: swap), and SSG (zero server‑side latency), the total LCP (Largest Contentful Paint) is 1.2s on 4G.
Glassmorphism Hero with Integrated Search Bar That Works on Every Viewport
The hero section is the landing's conversion engine: a full‑viewport aerial photograph of Maldives overwater bungalows with a glassmorphism text panel (backdrop‑filter: blur(16px) saturate(180%), semi‑transparent white background) containing category chips, headline, subheadline, and CTA. Below the text panel, a sticky search bar spans the full width with 4 fields (Accommodation location, Check‑in, Check‑out, Guests) and a Search button. The engineering challenge: making this layout work from 375px (iPhone SE) to 2560px (ultrawide) without breaking. On desktop (>1024px), the search bar is a horizontal CSS Grid strip with equal columns. On tablet (768–1024px), fields wrap to 2×2. On mobile (<768px), fields stack vertically with the Search button spanning full width. The glassmorphism panel uses @supports(backdrop‑filter: blur(1px)) with a solid‑color fallback for older Android WebViews. The location autocomplete uses Mapbox Geocoding API with 300ms debounce, 3‑character minimum, and result caching (Map object, 5‑minute TTL) to stay within the free tier (100K requests/month). Date pickers use flatpickr with range mode, locale‑aware formatting (DD.MM.YYYY for European markets), and a minDate set to today to prevent past‑date bookings. The entire hero renders in a single <section> with no JavaScript hydration on static paths (Next.js SSG), and the search interaction is handled by a client component island imported with next/dynamic.
Social Proof Architecture: Testimonials with Wave‑Shaped Color Identities
The Client Feedback section uses a deliberate visual pattern to maximize trust: each testimonial card has a white upper half (quote mark + review text) and a colored lower half (author name) separated by a wave‑shaped boundary. The wave is implemented as an SVG clip‑path applied to a colored div, creating the illusion of an organic, hand‑drawn separation. Each card gets a unique color (orange for Usman Borukov, teal for Karina Volman, light blue for Dana Sergey) — the color variation prevents the 'template feeling' that undermines credibility. The author avatar is a circular image positioned at the exact transition point between white and colored zones (50% overlap via negative margin‑top), creating a visual anchor that draws the eye to the real person behind the review. This pattern is adapted from the Trustpilot conversion research (2021): testimonials with avatars positioned at color transitions achieve 23% higher read‑through rates than flat‑card designs. The cards use CSS Grid with equal columns on desktop, Flickity‑style snap‑scroll on mobile (scroll‑snap‑type: x mandatory), and Framer Motion for entrance animations (fade‑up on scroll into viewport via Intersection Observer trigger).
Have a similar project? Get an estimate or book a call.