Premier Membership
Overview
JD mall offers a Plus Premier Membership, which provides a variety of plans, including VIP services, special discounts, exclusive merchandise, and free-shipping coupons. Most users purchase the membership through this Onboarding Page. However, it has a low purchase rate, meaning most users will leave after seeing the information displayed on the page. In addition, the company has included additional plans that target the specific needs of segmented user groups. However, the page has not been iterated for a long time, causing these options are not displayed on the Onboarding Page.
Team
JD.COM Platform Design Center -
Platform Product Design Department -
Traffic Ecosystem Design Team
Outcome
21% increase in Purchase Rate
2300 increase in the Number of Members
Timeline
2022 Q2
Role
UX Designer
Module
Plus Membership
Tools
Sketch
Problem Statement
Past Version Onboarding Page
Past Version Confirm Order Page
>
Low Purchase Rate
Most of the visitors leave the page
1.7
%
Purchase Rate of the Past Version Onboarding Page
>
Page have not been iterated for a long time
The plan selection is on a secondary page, which affects the exposure and sale of all plan types
Design Strategy
Business
Goal
Product
Feature
Design
Goals
Increase Purchase Rate
Process Iteration
A
Align Onboarding Steps with Users’ Goals
Streamline Process
B
Highlight Key Benefits
Enhanced information architecture
Display Available Plans
A
Align Onboarding Steps with Users’ Goals
Process Before
Process After
STEP1
Choose Plan
STEP2
Choose Billing Cycle
STEP3
Pay
PlanA
PlanA | Billing Cycle1
PlanA | Billing Cycle2
PlanA | Billing Cycle3
PlanB
PlanC
PlanA
PlanB
PlanC
Billing Cycle1
Billing Cycle2
Billing Cycle3
Complete Purchase
Complete Purchase
STEP1
Confirm Plan
STEP2
More Plans & Billing Options
STEP3
Pay
The current onboarding process has three steps, confirm plan, a mixed selection of plans and billing types, and complete the purchase. These three steps conflict with the users' expectations and goals. The second step contains an overloading amount of mixed information, which may confuse users and make them leave the page. Therefore, categorize the goals into: "choose plan" and "choose billing type". Then assign the goals to steps; first, select the plan, then select the billing type, and lastly complete the purchase.
Membership Selection Process Rearrangement
Page Plan
STEP1
Choose Plan
Strategy
Use horizontally sliding interaction to display plans for fitting most information into the first screen area, which users view the most. Moreover, this design helps user compare plans.
Before
Choose Plan on a Secondary Page
After
Choose Plan on the Primary Page
Benefits
￥00 Purchase
PlanA
Onboarding Page
Confirm Order Page
PlanA
Billing Cycle1
PlanA
Billing Cycle1
PlanB
￥00
Benefits
￥00 Purchase
Onboarding Page
Benefits
￥00 Purchase
PlanA
Estimated Saving
PlanA
Estimated Saving
Before
Choose Billing Type on Secondary Page
After
Choose Billing Type on Overlay
￥00 Purchase
PlanA
Onboarding Page
Confirm Order Page
PlanA
Billing Cycle1
PlanA
Billing Cycle1
PlanB
￥00
￥00 Purchase
Onboarding Page
￥00 Purchase
PlanA
Estimated Saving
PlanA
Estimated Saving
Onboarding Page
PlanA
Estimated Saving
PlanA
Estimated Saving
Choose Billing Cycle
￥00 Purchase
Cycle1
￥00
Cycle2
￥00
Cycle3
￥00
STEP2
Choose Billing Cycle
Strategy
Adopt Overlay Component to display "billing types" to shorten the purchasing process.
B
Highlight Key Benefits
Design Opportunity: users struggle to understand the core value of the current page.
Design Question: which information should be the focal point, and what benefits should be emphasized to improve user engagement?
Onboarding Page Past Version
Koala Black Card Onboarding Page
Sam’s Club Onboarding Page
HippoGrocery X
membership Onboarding Page
Problem1: Lacks hierarchy
All benefits are displayed in the same way, making it difficult for the users to grasp the key value of the plan.
Problem2: The benefit description is less interesting
The uniform design of the icon and description is abstract to the users to understand the value.
Competitive Analysis on Information Architecure
Hierarchy of Benefits
Conducted interviews with the users and the Plus membership marketing team and looked at the user data of the past onboarding page to ordered the hierarchy of the PLUS benefits. Meanwhile, the information we should use to describe the benefits is unfolded by the categorizations that users conducted for the affinity diagram.
Interview
Business Value
Interview & Click Exposure Data
User Value
Additional
PLUS BENEFITS
Qualitative Research
Hierarchy of Display
Key Highlight
Secondary Detail
Supplementary Context
Primary Focus
Designing the Benefits' Hierarchy
Strategy: Use larger card components that contain more detailed descriptions of the benefits to highlight the most important ones.
Module
Hierarchy
Design Strategy
Key Highlight
Secondary Detail/
Supplementary Context
Primary Focus
Joint Value
Strong Visualization,
Large Modules,
Detailed Descriptions
User Value
With Product Imagine,
Smaller Modules,
Some Descriptions
Business Value & Additional
Icon Representation,
Cube Modules,
Brief Description
Descriptive Information
The information design strategy is based on the user’s affinity diagram.
PLUS BENEFITS
Quantitative Research
Descriptive Information
Affinity Diagram
User’s Categorization of the Benefits
Money Saver
Effort Saving
Exclusive
Merchandises
Value-added
Service
Designing Descriptive Information
Strategy: Descriptive Information = User's understanding (categorization) of the benefits
Before
After
预计省
¥
34
倍
10
购物返京豆
张
全年
60
可叠加
6
¥
可抵扣运费
360
元
运费券
/年
Icon & Text
10x points back
Emphasized Display of Value and Financial Gains
Money Saver
coupon
Money Saver
Finalized Modular Landing Page & Onboarding Process
Benefit Modules
Compositions for Difference Plans
Select Business Cycle
预计省
¥
264
价
PLUS
购物优惠
预计省
¥
34
倍
10
购物返京豆
张
全年
60
可叠加
6
¥
可抵扣运费
360
元
运费券
/年
预计省
¥
356
生活特权
大牌免费领
Result after Launching
Jul 2nd-Jul 5th daily average | Cut 20% Volume AB Test
Purchase Rate
21
%
3.91% → 4.73%
Expected average daily net increase in members until full volume
2300
Members
With all the information remaining the same, the new onboarding page design is proven more effective in conveying each plan's core value. Meanwhile, the shortened onboarding process successfully reduces the user churn rate.
Related Projects
Contact Me
E-mail:
Tel:
annyjialuli01@gmail.com
(+1)778-697-4718 Canada