Kupibilet 2024 Flight comparison · Interaction architecture
Flight details redesign for easier comparison
Opening a long itinerary pushed other flights down the results page. I helped redesign how travelers inspect a route without losing their place in the comparison.
- conversion to opening route details
- +1.12%
- conversion from results to checkout
- +2.75%
My role & the design decision
Move detailed reading into a dedicated layer, while keeping the selected flight and checkout action available.
My contribution
I explored the route-detail structure, reviewed booking patterns, helped compare prototypes, and documented the chosen component for reuse.
Collaboration
Research and product helped evaluate the alternatives; analytics and engineering contributed to measurement and implementation.
Reading one flight changed the entire results list
Travelers compare departure times, transfers, baggage, and price across several options. The old card expanded in place. That kept details close to the fare, but a complex journey could occupy most of the screen and push the next option out of view.
The problem was the relationship between two tasks: scanning alternatives and checking one itinerary. Giving both tasks the same space made the list harder to navigate.
Before · Expanded result
A closer view, with a clear way back
A dedicated details layer creates a boundary around the reading task. Closing it returns the traveler to flight comparison. The cost is an additional layer to open and dismiss, so its navigation and next action need to be explicit.
Alternative considered
Expand the result
Keeps itinerary information beside the fare, with no separate view to dismiss.
Trade-off. Long routes change the list’s height and move competing options out of view.
Selected direction
Open a details layer
Gives complex itineraries room without expanding the results list.
Trade-off. Adds an open-and-close step. The selected flight and route back must remain clear.
The survey helped explain the preference
The retained survey includes 16 responses for each rating question. Variant 1 received higher ratings for reading transfers and finding the price. Comments in that column describe a separate window as easier to understand.
These ratings support the direction, but they do not measure checkout behavior or establish statistical significance. The survey and the reported conversion results answer different questions.
Mean rating out of 5 · 16 responses per question
| Question | Variant 1 | Variant 2 |
|---|---|---|
| Reading transfer information | 4.25 | 3.25 |
| Finding the price | 4.25 | 3.69 |
A long journey still needs a short path to checkout
The route may include flights, rail legs, overnight transfers, or a change of transportation. I organized those details as a sequence, with transfer information between the relevant legs.
The selected pattern uses fixed navigation and a persistent checkout area around scrolling content. That keeps route identity and the next action available while the traveler reads.
- Keep the route clear
- Keep the itinerary and transfer conditions clear while details scroll.
- Keep checkout within reach
- Keep checkout available while travelers read each part of the itinerary.
Borrow the useful patterns, test the structure
I reviewed how travel products handle transfers, fare conditions, and price. The useful question was which structures would work in Kupibilet’s booking flow, rather than which interface looked best.
Explorations tested the amount of information the layer could hold and the placement of navigation and purchase controls. Desktop and narrow screens needed the same route hierarchy, with different use of available space.
Pattern review
Exploration
The decision outlived the flight-details screen
A design review identified seat selection as another use for the same layer. I documented its sizing, scrolling, close behavior, and responsive change in the design system.
The specification sets a 1,024px maximum width, a 720px minimum for the desktop version, and a switch to the mobile modal below 912px. It also requires a visible close control. Those rules make the pattern easier for another team to implement consistently.
A clearer decision surface, with reported funnel gains
The project reported more route-detail opens and more transitions from results to checkout. The available record does not isolate the contribution of each UI change.
- conversion to opening route details
- +1.12%
- conversion from results to checkout
- +2.75%
These changes were reported in the project summary. Baselines, measurement dates, sample sizes, and whether the figures represent relative changes or percentage points are not available.
The lightbox was documented for reuse beyond flight search, including seat selection.
Measure the handoff from comparison to checkout
The reported conversion changes are useful signals. A fuller evaluation would connect detail inspection to checkout entry and check whether the extra layer creates more backtracking.
Primary KPI
- Results-to-checkout conversion
- Search-results sessions that enter checkout, segmented by whether route details were opened.
Supporting metrics
- Detail-open rate
- Results sessions that open an itinerary. More opens are useful only if inspection helps the next decision.
- Route inspection time
- Time to answer a route question correctly in a task-based comparison test.
Guardrails
- Unproductive backtracking
- Repeated detail open-and-close cycles without selecting a flight.
- Route comprehension
- Correct identification of transfers and arrival conditions before checkout.
The useful boundary was between tasks
The key trade-off was an extra layer in exchange for a more stable comparison surface. I would next check repeated opens on mobile and comprehension of unusually complex transfers, where that trade-off is most likely to break down.
