Scenarios
Complex decision-making
Moderately complex decision-making
Simple decision-making
Modular Design System
Overview
When designing the complex app (which includes multiple categories of products and business types), we established a unified page structure—referred to as “floors”—and created variants for each floor that can be configured according to the specific needs of each business. These variants are designed by summarizing and consolidating similar business requirements, providing design resources that adapt to the maximum number of needs with the fewest variations.
Team
JD.COM Platform Design Center -
Core Product design department -
Search and Feed Module Team
Role
UX Designer
Timeline
2023 Q3-Q4
Module
Product Detail Page
Tools
Figma
Design Analysis & Strategy
Goals
Business Goal
Increase page conversion rate
Allow merchants to customise product information
Experience Design Goal
Locate key product information—images, price, specifications, services, and reviews—within the first 3 screens of browsing.
Strategy
Highlight key product information and guide users based on shopping habits for direct conversion.
A
screens 👉 floors
Plan and display content in split screens, categorizing it into ‘floors,’
B
floor variants
with each ‘floor’ offering different module styles to meet the information configuration needs of various product categories.
Implementation of screens & floors
Floors
Screens
2
Core
information
3-n
Third-party
information
1
Basic product
information
images
price
discounts
brand
name (title)
sales ranking
specifications
shipping information
category specific guidance function
platform and merchant services
buyer reviews
images and video reviews
buyers Q&A
purchasing and sales person reviews
Floor Variations
Data research and user testing indicate that users are more focused on the product’s key specifications, appearance, and price (especially if there is a discount, which is particularly attractive).
We will integrate the three indicator floors with the product category information display requirements to offer variant components for three decision-level scenarios.
Scenarios
Complex decision-making
Moderately complex decision-making
Simple decision-making
Scenario definition
Customer's shopping decision-making process involves gathering and evaluating complex information.
Product price
Specification Complexity
Customer's Familiarity
Customer's shopping decision-making process involves gathering and evaluating moderately complex information.
Product price
Specification Complexity
Customer's Familiarity
Customer's shopping decision-making process is relatively simple.
Product price
Specification Complexity
Customer's Familiarity
Typical categories
Smartphones, medicine, televisions, washing machines, refrigerators, cameras, projectors, computers, custom wardrobes, etc.
Apparels, kids’ clothing, underwear, sportswear, sports shoes and bags, bedding sets, etc.
Tissue paper, wet wipes, laundry detergent, hand soap, snack foods, drink mixes, fruits and vegetables, etc.
Factors of interest for customers
Specifications & parameters
For example:
Smartphone: Brand, CPU specifications, battery life, screen refresh rate.
Product appearance
For example:
Sports shoes: style, brand, usage scenario, comfort, size
Size & quantity And Price
For example:
Toilet paper: number of rolls per pack, price discount, brand
customer goal & Typical Behavior
Browsing depth
high
Browsing focus
parameter details
Click behavior
frequent clicks to expand the product’s detailed description pop-ups
Browsing depth
Shallow
Browsing focus
official and third-party buyers’ display images and content showcasing wearing or usage
Click behavior
clicks to view reviews and recommendations from sales or procurement personnel (articles/videos/images), and is easily influenced by such content.
Browsing depth
Shallow
Browsing focus
price information
Click behavior
repeatedly confirms the final price on the main image/price & promotion information/add-to-cart confirmation pop-up before making a selection.
Corresponding ‘Floor’
Product specifications
[Medication]
Ingredients and Usage Precautions Instructions
[Digital Product]
Comparisons and Detailed Parameter Displays
images & video/
reviews & Recommendations
[Apparel]
Large-Scale Images with Multi-Angle Wear Introduction Views.
Reviews, and references reviews from similar items for comparison.
images & video/
reviews & Recommendations
[Consumables]
Displays size, quantity and shelf life.
Displays Total Discount Amount.
Full Template Display
View My Design Projects
Contact Me
E-mail:
Tel:
annyjialuli01@gmail.com
(+1)778-697-4718 Canada