ODK TV Guide Page Revamp
Redesigned the TV Guide webpage for ODK Media, an Asian media streaming service.
Overview
Collaborating with the cross-functional team, I revamped the TV Guide webpage for OnDemand Korea, an online streaming website dedicated to Korean content in North America, to enhance and sustain consistent daily user visits.
Contribution
UX Research
Product Design
Team
Amy Lee (Product Designer)
Judy Wang (Director)
Youjung Son (PM)
David Cho (Engineer)
Timeline
2 Months,
Updated in December 2024
Table of Contents
How This Project Started
Project Objective
Data revealed that the TV Guide page on OnDemand Korea is the fourth most visited. Recognizing its significance, stakeholders tasked the design team with improving the user experience to further strengthen consistent daily user visits.
Understanding User Behavior
User Research
Used Google Analytics and Heat Maps to inform how users engage with TV Guide page and identify the scope of the project.
summary of user behavior
When users cannot find what they want to watch on the default page (today’s date), they click on different dates and/or category tabs.
There is a significant number of dead clicks on the default page button, coming from the Live TV switch.
Among the dates in the date picker, users most frequently click on '1 day before' and '2 days before,' as they are closest to today's date.
Defining Concept and Priority
Concept Development
Based on data and user behavior observations, I identified the most important and problematic areas to focus on to improve user experience and generated concepts using the 'How Might We' question.
Priority Setup
With the list of concepts, I collaborated with the PM and other stakeholders to define the timeline for each task. We divided the tasks into two phases and gradually updated the TV Guide page, prioritizing the areas with higher impact and lower effort.
Design Solutions
Solution for Each Problem
Here is a breakdown of the key solutions for each problem I identified, based on user behavior and the project's scope.
Order of the dates creates confusion.
Solution
Reordered the dates so past dates appear to the left of today and future dates to the right, following chronological order.
as-is
Past dates sometimes appear to the right of future ones. Frequently clicked dates, like 1–2 days prior, are often too far from the default, causing confusion and inconvenience.
Past dates always appear to the left of today’s date, in chronological order, with the most clicked dates close to the default date.
Date picker is not optimized for mobile.
Solution
Changed the date-picking filter to maintain a consistent size across screen sizes, ensuring optimal size for each clickable element.
as-is
TO-be
Difficult to access the date picker while browsing.
Solution
Made the date-picking filter bar sticky for easy access while scrolling.
as-is
Users have to scroll to the top every time to change the date while browsing.
to-be
The sticky date-picking bar provides quick access to date changes while browsing.
When no new episode is available for a specific category of a date, users may feel their click was wasted.
Solution
Added a CTA button at the end of each filtered category's daily updated episode section on the TV Guide page, directing users to the related category page for easier content exploration.
as-is
The prominent style of the TV Shows/Live TV switch button leads to dead clicks.
Solution
Moved the switch to the side and darkened its color to better highlight the date picker buttons.
Over-highlighting of "TV Shows" causes frequent dead clicks.
Reduced the button's prominence and redesigned it to resemble a toggle switch.
design variation
Among all the design variations, I chose one that balances emphasis without overshadowing the date picker while clearly distinguishing TV Shows and Live TV categories.
Result
heatmap
before
after
Dead clicks on the current page filter from the Live TV switch button have been significantly reduced, suggesting that the design change successfully minimized confusion.
daily average visitor number
