How to Transform JD App Pop‑ups with Elastic Motion for Faster Interaction

Preface

Pop‑ups and modals are the dominant interaction form in modern products, carrying most scenario flows. Their experience affects user efficiency and perception of information prompts. Building a unified pop‑up experience system and optimizing it is the main goal of this plan.

Popup Types Overview

The JD app currently includes four main popup categories, classified by user prompt hierarchy and interaction relevance.

Online Popup Experience Pain Points

After repeatedly testing the motion of all popup types in the JD app, several issues were identified, mainly stemming from inconsistent experiences. To optimize, we focus on dynamic perception and motion style to build a unified experience language.

Slow and overly smooth motion reduces operation efficiency.

Modal views use a tilted‑card effect, making the overall motion feel sluggish.

Inconsistent dynamic perception across different popup styles.

Dynamic Perception Optimization

The current popup motion is too gentle, giving users a sense of slow response. We address this by optimizing motion curves and durations for both appearance and dismissal.

Motion Duration

We treat appearance and exit differently: appearance gets more time for clear information browsing, while exit is shortened to keep user focus on the upcoming scene, improving efficiency.

Motion Curve

We refine the motion curve to avoid overly flat speed distribution. Elastic motion is used for appearance, while a regular ease‑in curve is applied for exit.

Why Use Elastic Motion?

Elastic motion feels more natural than conventional curves. iOS uses a critically damped elastic effect that adds a subtle rebound at the end, making the motion smoother. Different elastic strengths can be assigned to various popup scenarios, providing a flexible yet unified solution.

Elastic Texture Definition

Based on JD’s brand tone, we create an elastic feel that is neither too lively nor too stiff. Using an under‑damped ratio close to 1 yields smooth decay that aligns with JD’s steady and reliable image.

Establish Elastic System

Given the large number of popup scenarios in JD, we grade elastic intensity into three levels based on popup height and type, ensuring consistent dynamic perception while accommodating different information loads.

Elastic System

We divide elastic strength into three tiers to maintain uniform texture across varied popup scenarios.

Content Preload Handling

Preloading reduces perceived fragmentation during page load and can be ordered according to reading habits to improve browsing efficiency.

Modal View Dynamic Style Optimization

The current tilted‑card effect makes motion feel sluggish. The final solution adopts the iOS 13 modal style, removing the tilt to boost user efficiency.

Optimization Scheme Display

1. Different Popup Types

We assign elastic intensity based on the prompt level of each type. Warning popups are strong, interruptive feedback and receive the highest tier, while toast messages are lightweight and receive the lowest tier.

2. Different Popup Heights

Even within the same type, varying heights carry different amounts of information. Grading elastic strength by volume avoids uneven prompting and improves information transmission efficiency.

Implementation

Designers should use interaction prototyping tools (Principle, Protopie) that support elastic motion values (e.g., Tension, Friction). JD’s RN framework aligns with these units, allowing direct hand‑off to developers. For native environments, an open‑source multi‑platform curve conversion site can be used: http://www.martinrgb.com/Animer_Web/#. Android low‑end devices may need performance adjustments.

Future Promotion Plan

The popup experience is part of JD’s basic experience optimization plan and will be continuously monitored and advanced.

1. Experience Component

During design‑dev collaboration we discovered a lack of reusable popup/modal component libraries, leading to inconsistent experiences and low development efficiency. Designers will work with developers to create a shared component library to standardize perception and improve efficiency.

2. Elastic System

We will further refine the elastic system, extending it beyond popups to other scenarios (basic product and operation activities) and provide standardized numeric values for a unified elastic experience.

Conclusion

Maintaining a keen sense of experience is essential for internet professionals. As products move beyond rapid growth, neglecting basic experience surfaces as problems. Designers, as users, must drive experience‑focused solutions. In a highly homogeneous e‑commerce market, optimizing product experience strengthens brand perception.

Multi‑platform motion curve conversion checklist. http://www.martinrgb.com/Animer_Web/#

What are over‑damped, under‑damped, and critically damped? https://highscope.ch.ntu.edu.tw/wordpress/?p=59534

Principles and applications of elastic motion. https://mp.weixin.qq.com/s/QPKJ8JXVUtNaGxcEYJFPKw

Popup system summary: modal vs. non‑modal. https://mp.weixin.qq.com/s/T3VOTAyV99wQNxk4sff6Cw