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.
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.
Signed-in readers can open the original source through BestHub's protected redirect.
This article has been distilled and summarized from source material, then republished for learning and reference. If you believe it infringes your rights, please contactand we will review it promptly.
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.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.
