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) :

funnal diagram.png

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)

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

ideas.png

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.

Group 3.png

User Feedback:

  • The pricing cards don't look clickable.

  • The "more options" button looks unnecessary.

Version 1

Group 2.png

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. 

tv 02.png
pricing grid copy.gif

Redesign 1: Increase user engagement on high-profit margin options

pricing grid - 1 copy 3.jpg
PG - 1 – 1.png

Old Design

New Design

Redesign 2: Reduce redundant information with a clean layout

pricing grid - 1 copy 4.jpg
PG - 1 – 13.png

Old Design

New Design

Scalable Design: This design can adapt over 20+ use cases.

Design Measurement

PROTOTYPE TESTING

Comparison testing between mockups and old design

Testing method: Online testing (usertesting.com)

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:

beta 01.png

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

card - 4k.png
Group 12.png

Improvement 2: Put "resolution" before "quality"

card - hdx.png
Group 13.png

BETA TESTING 2.0

We built the revision design into production and launched another beta version to 100 Vudu users.

beta 02.png

DESIGN IMPACT

Increase the purchase rate & revenue

We launched the new pricing grid. Following are the testing results:

  • Purchase rate increase 8% per month

  • Revenue increase of 15.7M per month