How JD’s ‘My Exclusive’ 618 Page Boosted Conversions with Front‑End Innovations

The article details JD.com’s “My Exclusive” 618 page redesign, describing how user‑centric browsing flows, exclusive visual atmospheres, and front‑end techniques like SVG gradients, IntersectionObserver animations, and dynamic gift‑pack effects boosted conversion rates and service growth during the promotion.

JD.com Experience Design Center
JD.com Experience Design Center
JD.com Experience Design Center
How JD’s ‘My Exclusive’ 618 Page Boosted Conversions with Front‑End Innovations

Project Background

“My Exclusive” venue is a fixed‑function hall during JD’s big‑sale periods, aimed at meeting user‑centric needs and driving conversion through efficient guidance, supporting overall GMV growth.

In the 618 campaign, the venue also promoted JD services, targeting service exposure and new‑user growth, using conversion rate as the north‑star metric and focusing on service‑new‑user growth and service conversion rate, while optimizing guidance efficiency and uncovering “me‑related” service demands.

Design Approach

1. Build “me‑related” browsing flow

After years of promotion, the venue has a solid user mindset linking “my” with discounts, forming a framework of “function area” and “recommendation area”. The function area lets users quickly recognize the page and find fixed functions, while the recommendation area offers personalized guidance.

Design iterates based on last year’s 618 and Double‑11 data, integrating service content with user needs and increasing exposure.

2. Enhance sense of exclusivity

Reduce function hierarchy

Data shows the function area yields high clicks and conversions. This 618 we expanded “My Discounts”, “My Footprints”, added “My Frequent Purchases”, and pulled exclusive info such as coupon expiry reminders, strengthening attraction.

Iterate recommendation dimensions

We continued high‑value recommendation dimensions, refined identity tags, performed A/B tests on category discounts, weakened low‑value dimensions, and introduced tag‑ and leaderboard‑based recommendation floors with personalized copy.

3. Use emotional atmosphere to communicate

Brand continuity

The visual theme follows the main venue “Love Like Light”, using “bullet‑screen” graphics in the pre‑sale period and “carnival” graphics in the non‑pre‑sale period, with a tech‑blue palette to create a tech‑smart‑fun tone that raises service exposure.

Identity‑specific atmosphere

Different user identities (regular, PLUS, birthday) receive tailored bullet‑screen messages and visual cues, such as PLUS brand‑color frames and birthday greetings, to foster belonging.

Regular users: Bullet‑screen animation conveys “JD is quietly caring for you”.

PLUS users: PLUS brand color frame and exclusive 618 offers highlight special status.

Birthday users: “Happy Birthday” tags and candle animations create a celebratory feel.

Exclusive gift packs

Three periods of the 618 event deliver three exclusive gift packs (exclusive pack, super 618 pack, birthday pack), each designed with visual cues that highlight coupons and create surprise effects.

Exclusive pack: Tailored coupons for different user identities, with subdued background to emphasize offers.

Super 618 pack: Carnival‑style visuals with gift boxes, JD beans, and coupons to amplify excitement.

Birthday pack: Animated gift box opening and candle flame effect simulate a real birthday celebration.

Technical Enhancements

1. Header identity animation

We added SVG ring gradient and PLUS badge highlight animations to capture user attention.

SVG ring gradient using two layered SVGs.

PLUS badge high‑light animation.

2. Gift pack atmosphere optimization

Gift packs feature opening animations and candle‑flame effects to simulate a real birthday celebration.

3. Floor title micro‑animations

Using the IntersectionObserver API, floor titles animate on enter events, improving performance and visual appeal.

Project Outcomes

Page presentation

The visual emphasizes emotional, exclusive feeling with softer colors and refined shapes, enhancing tech‑smart ambience.

Data performance

The north‑star metric was achieved; conversion rate and new‑service‑user growth outperformed the 2019 Double‑11 baseline, with significant increases in click‑through and order‑generation.

Product‑level iteration avoided starting from scratch each event, turning design and data insights into stable growth.

Original Source

Signed-in readers can open the original source through BestHub's protected redirect.

Sign in to view source
Republication Notice

This article has been distilled and summarized from source material, then republished for learning and reference. If you believe it infringes your rights, please contactadmin@besthub.devand we will review it promptly.

e‑commercefrontendanimationpersonalizationconversion optimization
JD.com Experience Design Center
Written by

JD.com Experience Design Center

Professional, creative, passionate about design. The JD.com User Experience Design Department is committed to creating better e-commerce shopping experiences.

0 followers
Reader feedback

How this landed with the community

Sign in to like

Rate this article

Was this worth your time?

Sign in to rate
Discussion

0 Comments

Thoughtful readers leave field notes, pushback, and hard-won operational detail here.