TV Detail Page Redesign

This project aims to improve user engagement and Increase purchase rate.
@Walmart - VUDU
Type

 

Work Project
(Development in progress)
My Role

 

End to End

Product Designer

Time

 

06.2019 -

10.2019

Team

 

Project Manager
UX Researcher
Engineer: Web team (6)

 

BACKGROUND

Users' Needs

The detail page design has not been improved in 3+ years.

In the monthly satisfaction surveys, only 43% of users satisfied with the current detail page. However, average satisfaction is 52%.

 

A lot of users request updated user experience & visual design. Following are some selected user feedback:

" Too much information to look at."

" Navigation of episodes is tough."

" The design is outdated."

Impact Perspective

The detail page takes a 57% page view, which is the most important page on the platform.

 

It also leads directly to the purchase flow, which contributes 86% of total revenue.

Improve the detail page will have the following impacts:

  • Increase user engagement rate

  • Increase purchase rate and revenue

DISCOVERY RESEARCH

To narrow down the scope of the user problem, I worked with UX researchers to launch an online survey via SurveyMonkey.

Major of 100 Vudu user problem falls into the following category:

Navigation

 

60%

of first-time users found it too much effort to locate the episode.

Information

 

52%

of users complained about the vertical information structure. 

DESIGN PROBLEM

I worked with UX researchers to test with target users and uncovered the following challenges:

(Testing tool: usertesting.com)

old web 3.png

Busy Information Hierarchy

Difficult to find the major CTA buttons when it's hidden in between movie name and movie synopsis.

Lenghthy Epiosdes Navigation

Episodes are taking too much space and mixed with extra content.

Low Discoverability

Information like cast and similar titles were tested that drives user engagement but is hidden at the bottom of the page.

DESIGN OPPORTUNITIES

Improve information hierarchy design
Increase information 
discoverability
Improve navigation
 efficiency

PROJECT GOAL

Improve user satisfaction 20%+

User satisfaction survey from 43% to 52%+

Increase user engagement 10%+

User page view from 57% to 63%+

Design Process

DESIGN APPROACH

To understand the target users' behaviors, I worked with user researchers to get the following data from survey:

What are the key reasons for users to make the purchase decision?

What's user behavior when navigating a detail page?

Following is the data of the current page visitor rate and conversation rate of each section:

behavior.png

DESIGN IDEATION

Design Principles

01

Clear display information that user care

02

Intuitive navigation pattern

03

Keep the layout simple and clean

04

Easy to locate

the episode

Information Hierarchy

I improved the information hierarchy by grouping different functions to create a clear structure:

hierarchy.png

Navigation Exploration

The following are the wireframes of 4 different interaction models

exploration.png

Gather 40 current & new Vudu users' feedback about proposed layout design options.

(Testing tool: usertesting.com)

Research Result Analysis:

chart.png

Overall, the proposal that received the most successful and helping user finish tasks was: Design B

DESIGN SOLUTION

Design Goal 1:

Improve Information Hierarchy Design

The simple and clear information hierarchy helps the user to quickly understand the content of this movie or TV show.

scrolling.gif

Redesign 1: Simplify the information based on survey data. Redesign the UI components with different visual treatments.

Old Design

before purchase.jpg

New Design

Redesign 2: Components dynamically change based on the different ownership status of the content. Users can catch-up easily or access what they need within one click.

before purchase.jpg

Before Purchase

after purchase.jpg

After Purchase

Design Improvements

I worked with UX researchers to compare the old & new design. We got the following results:

10.png

Base on feedback from 10 users

Design Goal 2:

Increase information discoverability & navigation efficiency

The clear navigation structure gives users a faster way to navigate between different information. 

navigation.gif

Redesign 3: Reorganize episodes list to easily locate with interactive transactions.

episode list.png

Old Design

episode.gif

New Design

Redesign 4: Increase the visibility of cast & crew with more depth information.

cast.png

Old Design

cast.gif

New Design

Design Improvements

10-2.png

Base on feedback from 10 users

Design Measurement

PROTOTYPE TESTING

Comparison testing between mockups and old design with 40 users

Testing method: Online testing (usertesting.com); In-person testing

scrolling.gif
all.gif

TESTING RESULT SUMMARY

Improve information hierarchy design

45%

Users think it’s easier to understand the title.

Increase navigation efficiency

52%

Users think it’s faster for seasons & episodes navigation.

Increase information 
discoverability

40%

Users discover relevant information faster.

CROSS PLATFORM

Mobile Platform

TV Platform

IMG_1317.GIF

DESIGN IMPACT

Increased the user satisfaction and engagement

We launched the A/B testing with the new detail page. Following are the testing results:

  • User satisfaction rate increased by 28%

  • Detail page view increased by 12%

REFLECTION

What would I do next?

Push to build up the heatmap tracking system

The analytic team only tracks data on pageviews and purchase behaviors. However, designers need more data that shows users' activities on the platform interface to optimize product design.

I'm now working closely with the analytic team on defining the correct data categories for the valuable analytical results.