Pricing Grid Redesign
This project aims to improve purchase experience and increase conversion rates.
@Walmart - VUDU
Type
Work Project
My Role
End to End
Product Designer
Time
03.2019 -
05.2019
Team
Project Manager
UX Researcher
Engineer: TV team (3)
BACKGROUND
The purchase flow contributes 86% of total revenue. As part of the continuous work to improve conversion rate, this project was expected to contribute to the growth in the long term.
RESEARCH DISCOVERY
Following graph shows the purchase funnel ( data from Adobe Analytics) :
Majority of the users drop-off from this page
DESIGN PROBLEM
I worked with UX researchers to test with target users and uncovered the following challenge:
(Testing tool: usertesting.com)
Pricing grid page
Promotion price / Unavailable price
Decision Fatigue
The pricing grid is overwhelming. Too many choices lead users to decision fatigue and drop-off.
Decision Fatigue
The pricing grid is overwhelming. Too many choices lead users to decision fatigue and drop-off.
Redundant Information
There are 3 buttons show the same price in different film quality, which is very confusing to users.
DESIGN OPPORTUNITIES
Simplify the price buttons
Increase user engagement on high-profit margin options
Help users to make purchase decisions faster
PROJECT GOAL
Reduce users' confusion & friction
Increase conversion rate by 5%
Design Process
DESIGN APPROACH
Analysis of our current users' purchase behavior:
User Group 1: 46% of users rent only - contribute 9% revenue
User Group 2: 14% of users buy only - contribute 10% revenue
User Group 3: 40% of users do both - contribute 82% revenue
Users in Group 3 are targeting whale users who bring over 80% revenue to the company. My goal is to improve the pricing grid section that encourages users to consume on high-profit margin options.
DESIGN IDEATION
Design Principles
01
Minimize the clicks on TV platform
02
Keep the simple and clean layout
03
Easy to compare the prices
04
Prioritize on high-profit margin options
Brainstorming
The following are the wireframes of 4 different interaction models
After conducting a hallway testing experiment, the result showed that Idea 3 significantly more eye-catching and logical.
DESIGN ITERATION
I made a simple prototype and worked with UX researchers to run a usability test on Idea 3. The following are the feedbacks and revision insights I received.
User Feedback:
-
The pricing cards don't look clickable.
-
The "more options" button looks unnecessary.
Version 1
Further Revision:
-
Add call-to-action button when hovering.
-
Brought all price options to the front with different visual treatments.
Version 2
DESIGN SOLUTION
Design Goal:
Help users make purchase decisions faster
The priority logic and eye-catching layout help users to easily compare purchase options, leading to a faster decision.
Redesign 1: Increase user engagement on high-profit margin options
Old Design
New Design
Redesign 2: Reduce redundant information with a clean layout
Old Design
New Design
Scalable Design: This design can adapt over 20+ use cases.
2 Columns
3 Columns
4 Columns
Design Measurement
PROTOTYPE TESTING
Comparison testing between mockups and old design
Testing method: Online testing (usertesting.com)
Before
After
Increase decision-making cycle
35%
Users think it’s faster for a purchase decision
BETA TESTING 1.0
We built the new pricing grid design into production and launched an early beta version to 100 Vudu users. I worked with the researcher to gather users' feedback.
On a scale of 1-10 (1 - "Terrible", to 10 - "Excellent"), rate your experience on:
Major User Feedback:
-
Users don't understand the promotion price. They think there is only one quality.
-
Users understand "resolution" more than "quality" (1080p vs. HDX).
Design Improvement
Improvement 1: Show all the promotion quality with strikethrough price
Improvement 2: Put "resolution" before "quality"
BETA TESTING 2.0
We built the revision design into production and launched another beta version to 100 Vudu users.
