How JD’s Ranking Page Supercharged 618 Sales: Design, Data, and Efficiency Hacks

The ranking page consistently demonstrates strong sales-driving capability during major promotions. This article explains the methods and techniques used to improve data, content, and efficiency for the 618 promotion.

Project Background

The ranking page’s product list is generated by consumer purchases and positive reviews, creating a natural credibility that helps users make shopping decisions. In large‑scale promotions, precise ranking recommendations based on user history can stimulate purchase intent.

JD’s ranking page has shown superior performance in recent promotions, with order volume and UV conversion rates increasing year over year, achieving a conversion rate about 1.4 times the overall market. The 618 design principle is to provide users with a ranked product list as shopping reference, driving product‑detail visits and ultimately increasing GMV.

Design Goals

Design Approach

Data Enhancement

Strengthen anchor navigation to facilitate user operations.

Historical data shows low click‑through on anchor navigation but good conversion and order numbers, indicating design value. Users often arrive with a clear purpose, seeking specific categories, while low clicks may be due to auto‑collapse logic that hides the navigation.

We changed the anchor navigation from appearing on the second screen and collapsing on scroll to a sticky, always‑visible layout, and replaced small text links with graphic‑plus‑text icons to improve visibility and readability.

Post‑launch data shows a 2.46× increase in click‑through and a 1.09× rise in conversion for the new graphic navigation, achieving the goal of making the navigation more discoverable for users with purchase intent.

Increase Product‑Detail Entry Visibility

Previously, a red‑boxed hotspot linked to the top‑ranked product list for each category. To improve product‑detail reach, we adjusted the green‑boxed hotspot to link to the detail pages of the top three ranked products. While this targets the most clicked and purchased items, we were concerned about reducing overall exposure of the ranking landing page.

We devised an animated cue: if a user clicks any of the top‑three products and then returns to the ranking page, an animated indicator appears at the top‑right of the ranking entry, prompting the user to view the full list.

Data after launch shows a 48% increase in daily order volume from the ranking floor and a 33% rise in click‑through conversion, aided by expanded BI pools and improved page performance.

Content Perception Improvement

Maintain Main Visual Consistency

The page continues the 618 main visual style, using beams, light points, and other basic graphic elements across the header, floors, and slots.

Detail Polishing for Atmosphere

Centered composition gives a formal, stable visual feel. Compared with other promotional pages, the atmosphere is less noisy, emphasizing quality and clear information display.

Card‑wrapped layouts clarify content hierarchy. Individual product slots are separated by lines, while ranking slots are isolated in distinct cards with fixed spacing, enhancing professional rigor.

Decorative elements such as wheat ears and podiums reinforce the ranking’s authority.

Technically, we used the pxtoviewport plugin to convert px to vw for responsive scaling. Non‑integer pixel values cause 1‑pixel rendering differences on some devices, noticeable on small screens (e.g., 8‑pixel gaps become 9 px). The most common gap is 4 px.

Pixel Gap Issue on 414px Screens

On a 414 px screen, the right‑hand gap is 1 px larger than the left. Devices render whole pixels only, leading to different handling.

Optimization Plan

Set the pxtoviewport parameter minPixelValue to 4 and write any value ≤ 4 px as 2 px, fixing the gap at 2 px. Center inline‑block slots horizontally so the residual error shifts to the page margin, which is tolerable.

For many animations, low‑end phones may overheat. All sections use an animation switch: animations pause or destroy when out of viewport and resume when re‑entered. Performance tests determined the priority order: keyframes > transition > requestAnimationFrame > setInterval / setTimeout.

Efficiency Improvement

The page is built with reusable components, improving design efficiency and ensuring visual consistency across the promotion.

Future Optimization Directions

Manual Operations Content

The top carousel ranking, departmental floors, and other modules have improved over multiple iterations. This cycle added JD’s shopping trend ranking, showing hot trend products and related category hosts. However, this module has high bounce rates, likely due to mismatched user expectations, content‑focused live streams, and fragmented top‑page modules.

Visual Presentation Effects

The current tab bar stands out but feels disjointed; consider adding side margins to align with other floors for a unified look.

Product image quality is low and many items have excessive labeling; future designs should coordinate with stakeholders about image availability.

Proactive Scheduling

After project completion, ad‑hoc resource‑slot requests disrupted designers’ workflow. Future promotions should proactively discuss with operations to reserve schedule slots for such urgent needs.

Long‑Term Brand Planning

To boost JD ranking perception and professionalism, we plan to establish a “JD Ranking” brand, standardize certain modules, and publish visual guidelines.