Skip to main content
Case Study

OnDemandKorea Case Study

OnDemandKorea

End-to-end web redesign and unified design system for a Korean streaming platform serving 400K+ content hours across 200+ partners.

Role
Mid-Senior Product Designer
Timeline
2022 – 2023
Scope
Web Redesign + Design System, Usability Testing
01 / Overview

REDESIGNING THE STREAMING EXPERIENCE, BUILDING THE SYSTEM BEHIND IT

OnDemandKorea is one of the largest Korean content streaming platforms in North America, offering 400K+ content hours, 500+ assets, and partnerships with 200+ content providers and channels. I collaborated with the UX manager and senior UI designer on the end-to-end web experience redesign while simultaneously developing a unified design system that scales across responsive breakpoints and streamlines engineering handoff.

Figma FigJam Jira Confluence Usability Testing Google Analytics
Industry Entertainment / OTT Streaming
Platform Web
Stage Concept → Final Product
Model Responsive Web
Deliverables Research · Hi-Fi Design · Design System
02 / The Problem

A GROWING PLATFORM WITH FRAGMENTED EXPERIENCES

OnDemandKorea’s existing web experience suffered from inconsistent UI patterns, poor content discoverability, and a lack of systematic design thinking. As the platform scaled its content library and membership tiers, these gaps became critical.

OnDemandKorea 1.0 screenshots OndemandKorea 1.0
INCONSISTENT UI PATTERNS 01

Switching platforms mid-lifecycle destroys metadata and organizational structure built in production.

BROKEN CONTENT DISCOVERY 02

Users struggled to find favorites and resume watching content.

RESPONSIVE GAPS 03

Mobile web lacked account icons on GNB. Hidden profile access.

PIP & PLAYBACK ISSUES 04

PIP didn’t work across pages, leading users to confuse it with video ads.

03 / Target Audience

DESIGNING FOR A CORE DEMOGRAPHIC THAT DRIVES ENGAGEMENT

Understanding who uses OnDemandKorea was critical to shaping every design decision from content hierarchy to navigation patterns to membership conversion flows.

01
PRIMARY SEGMENT
ADULTS 30–67 — 64% OF TOTAL VIEWERSHIP
02
VIEWING CONTEXT
DESKTOP-FIRST DURING WORK HOURS, MOBILE EVENINGS
03
LANGUAGE
KOREAN PRIMARY, ENGLISH SUBTITLES — BILINGUAL UI
04
CONTENT BEHAVIOR
SERIAL VIEWERS — DRAMA BINGES, DAILY NEWS
AGE DISTRIBUTION
18–29
17%
30–67
64%
67+
19%
04 / Design Process

FROM RESEARCH TO PRODUCTION-READY SCREENS

I worked within a cross-functional team collaborating with the product manager to align on PRD requirements, partnering with a senior UI designer on visual consistency, and coordinating with engineers.

01

UX Research

Usability testing with 5 participants across 10 tasks.

02

Design System

Component library with anatomy and usage docs.

03

Responsive Design

End-to-end layouts from 420px to 1920px.

04

Handoff & QA

Production specs and visual QA reviews.

05 / Research & Discovery

USERS STRUGGLE TO FIND THE LATEST INFORMATION

During research and user feedback, I discovered users struggle to find up-to-date information on currently airing programs.

Key Findings

01 It is confusing and time consuming for users to discover the most recent programs by categories they want to search (News, Variety, Drama, etc...).
Search
02 The “Recently Updated” and “Recently Aired” carousels are not distinguished and the terminology confuses users.
Terminology
03 User Journey: Visit the OndemandKorea website → discovering most up to date programs → Up-to-date programs are mixed in with outdated content → Users leave the website and the bounce rate increases.
Navigation
OnDemandKorea website screenshots
06 / Research & Discovery

THE MAJORITY OF THE CTR (CLICK-THROUGH RATE) COMES FROM VARIETY SHOWS, DRAMAS, AND DOCUMENTARY

Our data indicates that the variety shows, dramas, and documentary categories have the highest CTR overall on the website and attract the most viewing hours. As a result, the leadership particularly wants to emphasize these three categories in the TV guide.

Category Breakdown

4/144/154/164/174/184/194/204/214/224/234/244/254/264/274/284/294/305/15/2
Category
Drama Drama Category 19,85519,96215,39920,94718,38917,33518,29418,50517,73515,98818,90416,42116,98216,95918,70217,91215,17218,50516,690
Variety Variety Category 31,96735,84840,72935,03731,79532,24033,81229,81535,76540,34833,51930,48730,48730,44631,86435,91639,90131,10028,450
Docu Docu Category 13,43613,06011,19113,35712,77813,3299,42812,14913,08611,10912,20211,65413,48613,85012,84512,86311,13711,37710,882
TV Widget
Widget TV Widget Program Click 1,0461,381
Featured Collection 3,5893,8494,8083,8132,0244,4402,5172,6833,1505,1182,7752,383
Carousels
Carousel What's new 3,4233,5773,4452,8402,5252,5122,5952,8513,0962,6192,5232,130
07 / Research & Discovery

CONDUCTING USABILITY TESTING TO DRIVE DESIGN DECISIONS

Our design team conducted structured usability testing with 5 participants across 10 core tasks, measuring both objective success rates and subjective difficulty ratings.

Key Findings

01 Favorites carousel and Favorite List wording in Korean don’t match
Naming
02 Users liked the previous TV Guide for newly updated episodes
Feature
03 Expected account (profile) icon on GNB instead of hamburger
Navigation
04 Expected Movie genre filter at the top of the page
Filtering
05 PIP not fully functioning — mistaken for video ads
Playback
Usability testing session photo Usability testing session photo

Add to Favorite

During the usability testing, we discovered that users did not notice the state changes of the bookmark icon when it was added to favorites. Micro-interactions have a significant psychological impact on users. I have improved user performance for the “Add to Favorites” feature by providing users with hints through icon changes and micro interactions when they successfully perform the action.

96%
Average success rate
across all tasks
83%
“Find Favorite List”
success rate
4.6
Average rating of
all task difficulty
4.3
“Category Navigation”
on mobile web rating
3.7
Average rating of
find “favorite list”
08 / Design System

A UNIFIED COMPONENT LIBRARY FOR SCALABLE DEVELOPMENT

I led the design system research auditing existing patterns, organizing component files, and defining usage guidelines in collaboration with designers and engineers.

Button

Primary, secondary, tertiary variants with size scales and disabled states.

Dropdown

Anatomy, variants, usage patterns and responsive behavior.

Search

Default, typing, active states with adaptive width behavior.

09 / Responsive Design

DESIGNED FOR EVERY SCREEN SIZE, EVERY VIEWING CONTEXT

I designed the complete responsive web experience across 6 breakpoints from 420px mobile to 1920px desktop.

420
768
1024
1440
1920
Responsive design breakpoints
10 / Design System

END-TO-END PRODUCTION SCREENS

11 / Outcomes & Validation

MEASURABLE IMPACT

The final deliverables span the complete web experience — from content browsing through program detail, episode playback, and membership conversion.

96%
Task Success Rate
Average across all usability testing tasks.
6
Responsive Breakpoints
Complete coverage from 420px to 1920px.
20+
Components Documented
With anatomy, variants, states, and specs.