6 Real-World UI Design Cases That Can Spark Your Next Product Idea

This column presents recent online UI design cases that offer fresh inspiration for product design.

1. Alipay – Scrolling Bullet in Red Envelope Popup

Alipay added a scrolling bullet (弹幕) under the red‑envelope popup, listing usage scenarios with icons, making the promotion more vivid and eye‑catching.

Attracting user attention: The fast‑moving bullet fits the need for speed in an already animated popup, quickly drawing eyes.

Bullet benefits: The lightweight scrolling format carries more information, humanises scenario promotion, and the combination of icons and bullet creates a fresh interactive experience.

2. Tmall – AI Savings Assistant

Tmall built an AI Savings Assistant page that supports users before, during, and after purchase: finding discounts, price tracking, bargaining, and handling refunds.

Improving user experience: AI quickly filters suitable products based on purchase history and preferences, offering personalized recommendations that save time and increase satisfaction.

Saving time and effort: AI negotiates prices with merchants automatically, sparing users the hassle of manual bargaining.

3. Xianyu – “Small Knife Discount”

During the 618 event, sellers set a “Small Knife Discount” where buyers slash a virtual knife to bargain and may receive a random red packet, adding fun and suspense.

Interactive discount: The knife‑slashing animation makes the promotion engaging and heightens the sense of reward.

Motion effects: Animated knife movement enhances visual appeal and deepens user involvement.

4. Xiaohongshu – Order Location Guidance

Xiaohongshu’s e‑commerce section guides users to the order‑query entry with an animated path, turning a simple hint into an educational tool.

Optimising user education: The animation familiarises users with the interface, reducing future search time.

Enhancing experience: Clear prompts lower confusion and improve post‑purchase satisfaction.

5. Yogiyo (Korean Delivery) – Splash Animation

The splash animation shows a fast‑moving delivery bike that reveals the product name, linking the visual to the service’s core attribute of rapid delivery.

Strengthening product memory: The vivid scene makes the brand memorable as fast and efficient.

Conveying business attribute: The animation clearly communicates the need for quick, convenient delivery.

6. Hema – “Hefeng Says” Comment Shortcuts

Hema’s comment channel uses stylised quick‑reply buttons with gradient backgrounds, emojis and colourful text to lower the cost of commenting and add fun.

Visual attraction: The bright gradients and emojis draw attention to the comments.

Emotional value: Popular internet‑style replies boost user emotion, making them feel recognised.

That’s the end of this design sharing. The cases and insights come from the ZhiXing UED team, and we will keep exploring more inspiring designs to apply to the ZhiXing app.