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: TV team (6)

 

BACKGROUND

Users' Needs

The TV 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 feedbacks:

" Too much information to look at."

" Navigation of episodes is tough."

" The design is outdated"

Impact Perspective

The TV detail page takes a 57.5% 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 scoop of the user problem, I worked with UX researchers to launch an online survey via SurveyMonkey.

Major user problem fall into the following category:

Information

 

80%

of users think it's hard to understand the content information.

Navigation

 

70%

of users didn't find right-side navigation elements during the first-time experience.

DEFINE THE PROBLEM

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

(Testing tool: usertesting.com)

TV Detail Page
TV Detail Page
Show More

Unclear Navigation

The menu is hard to catch uses' attention. The Season & Episode section is too complicated. 

Information Overload

Users lose focus due to overwhelming text and visual elements.

DESIGN OPPORTUNITIES

Improve information hierarchy design
Increase navigation 
discoverability
Improve efficiency of navigation between seasons & episodes

DEFINE THE GOAL

Improve user satisfaction 20%+

User satisfaction survey from 43% to 52%+

Increase user engagement 10%+

User page view from 57.5% to 63%+

Detail Page Layout Redesign

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?

REORGANIZE INFORMATION

Base on survey data, I rank & group information based on relevance and importance to users

DESIGN ITERATION

First

Transfer information groupings into a linear design layout

Above the fold

Pros:

  • Easy, vertical navigation

Cons:

  • Not enough information above the fold

  • Too many clicks from the bottom back to the top

Above the fold

Further revision

Convert the linear layout into a modular layout

Pros:

  • More information displays above the fold

  • Improve navigation discoverability

  • Easy to navigate back to top

Cons:

  • Unfamiliar navigation pattern for new users

DESIGN EXPLORATION

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

(Testing tool: usertesting.com)

Screen Shot 2020-03-10 at 11.43.20 AM.pn

Research Result Analysis:

Overall, the proposal that received the most varied compliments was: Design C

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.

Redesign 1: Simplify the information based on survey data.

Old Design

New Design

Redesign 2: Prioritize buttons by primary and secondary functions.

Old Design

New Design

Redesign 3: 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

After Purchase

Design Improvements

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

Base on feedback from 10 users

Design Goal 2:

Increase navigation discoverability

The clear navigation structure gives users a faster way to navigate between seasons and episodes. 

Redesign 4: Reorganize navigation with visual content.

Old Design

New Design

Redesign 5: Combine season & episode navigation with visual image.

Old Design

New Design

Design Improvements

Base on feedback from 10 users

Design Measurement

PROTOTYPE TESTING

Comparison testing between mockups and old design

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

TESTING RESULT SUMMARY

Before
After
Show More

Improve information hierarchy design

45%

Users think it’s easier to understand the title

Before
After
Show More
Increase navigation 
discoverability

40%

Users discover and easily navigate around

Before
After
Show More
Improve seasons & episodes navigation

52%

Users think it’s faster for seasons & episodes navigation

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 increase 28%

  • Detail page view increase 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.

© 2021 Erin Yi Yang's Portfolio