Back
Flight search redesign
Flight search redesign
Team
Fareportal
Industry
Travel / Online travel agency
Role
Mobile design manager
Skills
  • User Interface
  • User Experience
  • Information Archtecture
  • Prototyping
  • Micro Interaction
  • Front-end
  • @Fareportal

Flight search redesign

Making flight search easier to understand without losing the rest of the home experience.

  • 4.8% ⬇️ Bounce Rate
  • 2.6% ⬆️ Flight Search Rate
  • 3.1% ⬆️ Initial Funnel
Project background

The challenge

Product issue
High bounce rate from landing screen (Fig.1)
User Test Finding
"I don't see what I can do here..." (Search)
Product goal
  • Increase flight search rate
  • Reduce bounce rate
Design challenge
How might we make it easy to tell and discover a future story without writing an entire article?
Project
Fig.1: Landing screen
Project
Fig.2: Search screen
Key Stage #1

Reframing the problem

Search needed to be obvious, but there're other things needed to be on the page. ↳ How much of the screen should search occupy?

Flight search (primary action by chance)
Help majority of users see where to start right away.
Everything else (secondary by choice)
Leave enough space for post-booking and marketing content.
Project
How important the search is?
Key Stage #2

Exploring the trade-off

Option A — Full search
  • Give users the complete search interface immediately
  • Trade-off: Secondary content was pushed below the fold, reducing its visibility
  • Open wireframe
Option B — Minimal search
  • Reduce search to a smaller entry point to preserve more space
  • Trade-off: The reduced UI was less recognizable as a travel search experience
  • Open wireframe
Project
Fig.3: Option A
Project
Fig.4: Option B
Key Stage #3

Converting the trade-off

Turning it into an interactive crossroads: expanding as the user needed more information

Option C - Expandable search
  • Initial state: communicates the concept of travel search
  • Engaged state: user's action will define path (Typing VS. Scrolling)
Project
Fig.7: Option C search view
Project
Fig.6: Option C initial view
Project
Fig.6: Option C initial view
Key Stage #4

Final design

Visual design
  • Color distinguishes IA and status of interaction
  • Animation emphasizes visual cue
Interaction sequence
  1. Initial view
  2. Searching: user enters location > search section enpanded
  3. Exploring: user interact other components > moves toward to each path
Open interactive prototype
Project
Fig.7: Search view
Project
Fig.6: Initial view
Learnings

"Design around the user's level of intent."

This project reinforced something I continue to use in my product design work: An interface doesn't always need to show everything at once.

When users are still deciding what to do, clarity can come from showing less. As their intent becomes clearer, the interface can reveal more context and detail.