How We Redesigned the Smart Travel App’s Route List for Faster Comparison and Better UX

Project Background

Smart Travel App’s “Smart Travel” feature aims to provide users with comprehensive travel‑plan recommendations.

Previously, users had to pre‑select a specific travel mode before searching, which was not the most convenient approach.

We wanted to present all transportation options directly, offering side‑by‑side comparison and personalized suggestions, which required a more comprehensive plan‑list page.

Design Goals

Improve comparison efficiency

Strengthen operation cues

Lightweight page design

These goals addressed the low efficiency of the original page, where users had to repeatedly jump between main and “view more” lists, and where distance between options relied on memory.

Design Journey

The project underwent two major redesigns, focusing on interaction patterns and visual style.

Interaction Exploration

We explored three main interaction concepts:

Dual‑list layout – offered strong horizontal comparison but resulted in a dense, visually tiring page that struggled with more than three options.

Horizontal tab bar – familiar to users but suffered from weak click perception due to misalignment between eye movement and hand gestures.

Vertical tab bar – matched natural vertical scrolling but introduced challenges in fitting complex transportation information within limited vertical space.

After iterative testing, the vertical tab approach with a new graphic language was adopted, leading to the first redesign and a significant boost in conversion rates.

Visual Noise Reduction

Following validation of the interaction style, we aimed to make the page lighter:

Shift visual focus – reduced the heavy color weight of the header and emphasized the plan tabs, adding clear operation cues.

Simplify the tab bar – compressed width and unified height to create a cleaner, more consistent tab area.

Reconstruct plan cards – used the app’s custom font for better readability, adapted key information for each tab, and introduced graphic representations of transfer plans.

These visual refinements further enhanced user focus and reduced cognitive load.

Overall Effect

The final redesign achieved conversion rates on par with typical train and flight list pages, and even outperformed them during peak travel periods.

Project Summary

Post‑launch data shows strong performance; the Smart Travel feature now delivers better recommendation functionality and an improved user experience.

Thank you for reading.