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
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)
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
Improve information hierarchy design
45%
Users think it’s easier to understand the title
Before
After
Increase navigation
discoverability
40%
Users discover and easily navigate around
Before
After
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.