DESIGN REVIEW
Search Experience Mockup
Interactive mockup — not yet live
This page shows the proposed 5-step conversational search experience. All steps are fully interactive — click through them, switch holiday types, and explore the branching logic. Nothing here is wired to the live homepage yet. Once you approve the UX, I'll integrate it.
INTERACTIVE PREVIEW
The search journey
Click through all 5 steps. The form is fully interactive.
DESKTOP
WEATHER-MATCHED HOLIDAYS
Find the weather
you're looking for
Real climate data. Honest confidence scores. No guesswork.
Let's find your perfect holiday.
What type of holiday are you looking for?
MOBILE
WEATHER-MATCHED HOLIDAYS
Find the weather
you're looking for
Let's find your perfect holiday.
What type of holiday are you looking for?
BRANCHING LOGIC
How questions adapt
Switch between Beach, Ski, and Walking to see how Steps 2 and 3 change.
Holiday-type branching
Switch type to see how Steps 2, 3 and the affirmation adapt in real time
STEP 2 — ACTIVITIES
"A beach holiday — wonderful."
STEP 3 — WEATHER FIELDS
- Ideal air temperature
- Max rainy days
- Beach preference
- Min sea temperature
TEMPERATURE DEFAULT
24°C – 30°C
Ideal for your chosen activities
Note: Step 4 (Travel Preferences) is identical for all holiday types — airport, month, budget, and flight time are universal.
UX RATIONALE
Design decisions
Design decisions
Key UX choices for your review
Conversational tone
Each step opens with a warm, personal line — never "Step X of Y". The heading adapts to the chosen holiday type on Step 2.
Context-aware questions
Step 2 activities and Step 3 weather fields change completely based on the holiday type. A ski search never shows sea temperature. A beach search never shows snow reliability.
Gold progress bar
A thin 5-segment bar at the top fills as you advance. Completed segments fade to 50% opacity so the active segment always reads clearly.
Warm affirmations
"A beach holiday — wonderful." / "Ski & snow — excellent choice." These micro-moments make the experience feel curated, not automated.
Results preview on Step 5
Before navigating to /results, users see a 3-card preview with match rings. This builds anticipation and confirms the search worked.
Mobile-first
The form card sits below a compact hero strip on mobile. All tap targets are 44px+. Native selects for iOS picker wheel. No z-index/touch issues.
READY TO PROCEED?
Does this feel right?
If you're happy with the flow, tone, and branching logic, just say "looks good — implement it" and I'll integrate this into the live homepage.