How We Revamped the Bottom Tab Icons for a Travel App: Design Process & Animation Insights

After weeks of effort, the new bottom tab icons and animations for the Zhixing travel app have been completed. This article walks through the redesign process, focusing on how the icons convey brand tone, attractiveness, and fun.

Existing Issues

Before the redesign, the icons were considered mediocre, lacking appeal and distinctiveness. User research and analysis of excellent design cases were conducted to address these problems.

Excellent Case Analysis

Key characteristics of successful icons include close integration of shape with brand symbols, bright colors with strong click feedback, and lively animations that leave a strong impression.

Design Direction

The new direction emphasizes embedding the Zhixing brand symbol—a stylized locomotive derived from the logo—into the icons, using bold colors, enhancing vitality and playfulness, and creating unique motion effects.

Design Features

Brand Symbol Integration : The icon adopts the brand’s locomotive motif, reinforcing product identity.

Gradient Style : A high‑saturation gradient blends Zhixing’s brand blue with aurora‑like cyan, giving a tech‑savvy feel.

Rounded, Youthful Shape : Smoothed and enlarged rounded corners make the icons look lively.

Animation Characteristics : When selected, the line icon fades while the solid icon emerges with layered colors and a cyan halo; a bouncing “train‑head” animation adds fun, and repeated brand symbols strengthen memory.

Throughout the process, challenges such as balancing recognizability with brand emphasis were tackled, leading to a cohesive visual language that unifies selected and unselected states.

The final icons and animations have been refined through multiple iterations and now provide a memorable, engaging experience for users.