How JD.com Revamped Its iPad Shopping Experience: The 4.0 Redesign Case Study

Redesign Direction Thinking

At the start of the 4.0 project, the innovation design team brainstormed with the Pad product team, asking what the original purpose of the JD Mall iPad was, who the users were, how shopping behavior had changed, and how performance and usage habits evolved. These insights shaped the redesign focus, especially for the product‑detail page.

Design Serves Business Purpose

All decisions aim to support the commercial goal of making Pad users purchase their favorite items more conveniently and efficiently. Understanding Pad users' shopping methods, preferences, and needs enables a tailored experience.

Characteristics of the Pad Large‑Screen

Larger screen facilitates viewing images, videos, and rich media.

Typically operated with two hands.

Both portrait and landscape orientations are common.

Hardware updates lag behind phones; many users still use older devices.

Often a shared device used by family members.

Usage periods are less fragmented, usually during lunch, evenings, or weekends.

Generally used in Wi‑Fi environments.

Analysis of the Old Product‑Detail Page

The page needed to be concise, understandable, searchable, and operable to drive conversions. However, operational demands (promotions, activities, services) crowded the fixed‑size screen, forcing designers to hide or categorize information, which hurt readability.

The old layout displayed all “important” content on the first screen to accommodate both portrait and landscape modes, emphasizing large product images, promotions, and essential specifications. Over time, the growing number of promotional types and logistics rules overloaded the first screen, creating maintenance pressure for both design and development teams.

Additionally, the content flow was fragmented: the primary shopping journey (image → price/discount → reviews → description → similar items) was broken, and tab‑based recommendations on the second screen were easily missed.

Improvement Plan for the New Product‑Detail Page

Readability First

The new design adopts a card‑style layout with visual separation (spacing, dividers) and shadow hierarchy, moving large images behind text and using gradient offset effects to reduce visual interference while reading.

Standardized, Extensible Framework

A vertical floor‑based framework groups information into modules (e.g., product name & price, specifications, promotions) that can be toggled via backend controls. This accommodates diverse product types such as regular items, global purchases, Sam’s Club items, and flash sales, while preserving consistency and reducing development effort.

Unified component specifications (modals, toasts, alerts) also streamline the user experience and lower learning costs.

Scenario‑Based Content Flow

Tab navigation at the top quickly informs users of the page structure. A pull‑down first screen enlarges images, guiding users to explore details. Reviews are placed higher for easy access, and a “similar good items” section is positioned at the bottom to capture users before they leave.

Floor Framework Extensibility Analysis

The floor architecture enables rapid addition of new operational content by simply inserting a new floor, improving maintenance and visual consistency across the page.

Special “atmosphere floors” are activated during major promotions (e.g., brand days) to create a festive shopping environment without additional development work.

Launch Summary

Initial data after the 4.0 rollout shows increased add‑to‑bag rates and higher conversion from detail page to checkout, confirming the redesign’s success. The standardized floor framework also provides a scalable foundation for future business and content expansions, ensuring consistent, high‑quality experiences for Pad users.