How We Revamped a Mobile Loading Animation to Boost User Delight

Why Upgrade the Loading?

SmartTravel aims to create a youthful, one‑stop travel platform, and a compelling loading animation can ease user anxiety while conveying brand personality. The existing loading no longer matched the desired "fun" and "young" brand tone, prompting a redesign.

How to Redesign

1. Excellent Case Analysis

We gathered top loading examples from the market and design sites, extracting four key insights:

Most products use mascots or IP as the visual carrier (e.g., Meituan, Qunar).

Two main animation styles appear: mascot‑based loading and graphic loading (e.g., Fliggy).

Animations often incorporate product‑specific attributes, such as JD’s delivery box or Meituan’s food‑delivery motif.

Successful loading loops are memorable, playful, and have a "viral" quality (e.g., Ele.me, Zhihu).

2. Clarify Design Direction

Combining the analysis with SmartTravel’s business attributes, we set two design directions: a graphic loading and an IP‑based loading.

For secondary pages and pull‑to‑refresh actions we will use a concise graphic loading, while the primary home page will feature a more expressive IP loading.

Graphic Loading Design

Initial Concept : Retain the smiling element and create a three‑dot bounce that loops smoothly. The concept lacked sufficient fun, memorability, and elasticity.

Optimization Goals : Strengthen fun, improve motion elasticity, and make the animation feel more "bouncy" by adjusting motion curves.

IP Loading Design

We explored two concepts:

Concept 1: A travel‑suitcase‑and‑ticket motif with a quirky walking motion. Although it aligns with fun and business attributes, the visual is too complex and hard to recognize at small sizes.

Concept 2: The mascot carries a suitcase, emphasizing the ticket element. This version is simpler, more recognizable, and better reflects the travel‑ticket business.

Internal voting selected Concept 2 as the final IP loading.

Continuous Refinement

Feedback indicated that the ticket element was visually weak in Concept 2. We introduced a "point‑to‑surface" technique, integrating subtle ticket graphics that echo the graphic loading, thereby enhancing recognizability.

Overall Effect

The final loading animations combine playful exaggeration (larger smile, dynamic eyes) with clear brand cues, delivering a memorable waiting experience that aligns with SmartTravel’s youthful identity.

Project Summary

By embedding fun, uniqueness, and product attributes into the loading design, we turned a small UI element into a delightful brand touchpoint, demonstrating that even minor details matter in creating a cohesive user experience.