Boosting JD’s 11.11 Home Appliance Sales with Immersive Design and Front‑End Optimization

Project Background

Under JD’s 11.11 theme, a large‑scale home‑appliance promotion was launched to build the “Double‑11 home‑appliance main venue on JD” brand mindshare. The 2021 project used a unified template with differentiated DNA symbols to ensure visual consistency across JD Appliances groups while allowing creative variation.

Core Objectives

Create a unified brand atmosphere for JD Appliances, deliver a consistent promotional visual perception, and generate additional commercial value through micro‑interactive elements in the main venue.

New‑Consumer Design Thinking

Focus on “people, goods, place”. Target the “25‑year‑old” demographic, define tags and circle preferences; design C2M reverse‑customized products and innovative accessories; combine smart‑plus‑scene service design for both online and offline experiences.

Visual Creativity

Concept Extraction

From “renewal”, “browse”, and “love”, the concept is to create home scenes that let users feel they are “browsing a new home”, delivering an immersive environment and a fresh shopping experience.

Visual Direction

Scene‑based + creative interaction.

Scene‑based

Hero images depict bathroom, living room, kitchen, bedroom scenes with home‑appliance products, helping users step into a new home and experience immersive resonance.

Creative Interaction

Two interaction styles were designed: rotation interaction (swipe left/right to rotate a gift box and switch scenes) and click interaction (click a button to lift a glass cover and reveal different room scenes).

Visual Styles

Brand symbols are overlaid on the main visual model. The campaign rhythm is divided into pre‑heat, dedicated, and climax phases, using warm orange‑yellow, pink, and bold red colors respectively to differentiate marketing stages.

Key Visuals for Each Phase

Pre‑heat uses youthful orange‑yellow tones, placing appliance‑filled living‑room scenes inside an open gift‑box to enhance user immersion. Dedicated phase adopts pink tones with bathroom and kitchen scenes. Climax phase uses bright red, integrating multiple room scenes into a naked‑eye 3D showcase, with a “click‑me” button to switch stories.

Commercial Value of Hero Images

Interactive hero images embed best‑selling appliances; clicking a product opens a floating layer that adds the item to the cart with a one‑click “add to cart” button, which then changes to “added” to prevent duplicate purchases. The micro‑interaction area achieved a very high click‑through rate, providing strong traffic support for brand and category venues and creating valuable commercial slots.

H5 Activity – “Appliance Star Promoter”

An interactive H5 page used a blind‑box lottery visual to match the theme, adding animated opening effects and brand symbols to strengthen brand memory and drive traffic to the main venue and merchant stores.

VR Scene Experience

Co‑developed with an external team, a VR experience showcased appliances within a “scene”, increasing click‑through rates of the super‑hit product floor by 62% and providing additional commercial resources.

Front‑End Technology

Hero Image Animation Performance Optimization

Visual effects consist of images and scripts. Image sequence frames were reduced from 56 to 28 frames, keeping the total size under 5 MB. Scripts employ pre‑loading and lazy‑loading techniques to solve slow page loading.

Pre‑loading

Resources needed for the first view are loaded before page entry and retrieved from cache on subsequent visits.

Lazy‑loading

Non‑first‑screen resources are loaded on demand, reducing storage cost and improving user experience.

Implementation Methods

defer attribute

async attribute

Dynamic DOM creation (most common)

jQuery getScript method

setTimeout delay

Loading JavaScript last

AB Testing

“Click to see more” Feature

Goal: gauge user demand for the “click to see more” function. Result: folded display increased click‑through rate by 16% and boosted purchase intent, suggesting wider adoption for category modules.

Slide Module Switching

Goal: determine the best interaction for multi‑category content. Result: sliding display outperformed TAB switching with a 19% increase in click‑through, recommending carousel style combined with BI strategy.

Conclusion and Insights

The comprehensive creative concept of “scene” elevated JD Appliances’ brand mindshare, while commercial thinking turned design into marketing value. Initial commercial conversion was achieved through coupons and product recommendations; future work will co‑create more commercial‑ready innovations with marketing teams. By combining story‑driven scenes, interactive play, and emotional branding, the campaign drove user participation, purchase resonance, and data‑driven design improvements for future large‑scale promotions.