UI REDESIGN

Computer | TV Experience

Role:

Lead UI/UX Designer

Type:

Self-initiated UX Case Study

Platform:

Web + Smart TV

Overview

I redesigned the interface of a major streaming platform (inspired by Hulu) to unify the computer and TV viewing experience. The goal was to simplify navigation, improve discoverability, and reduce cognitive load through a consistent cross-platform design.

High-level TV redesign overview

Responsibilities

  • Conducted user interviews, usability tests, and competitive analysis
  • Defined personas and mapped user flows
  • Wireframed and prototyped low- to high-fidelity mockups
  • Performed before/after usability testing and synthesized insights
  • Iterated UI to streamline navigation, improve discoverability, and reduce friction

Research & Key Findings

Problem

Users struggled to locate and play content easily:

  • Dropdown-based episode lists required too many clicks
  • CTAs such as Like and Resume were hidden below the fold
  • “You May Also Like” recommendations were buried
  • Layout clutter reduced scanability on TV screens

Approach

  1. Research & Analysis – 5 interviews + usability sessions across TV and web; benchmarked Netflix and Prime Video.
  2. Design Strategy – Replaced dropdowns with visible vertical season selectors; moved key CTAs above the fold; added a persistent recommendations carousel.
  3. Iteration – Low-fi wireframes → mid-fi prototypes → high-fi mockups.
  4. Testing – Measured task completion and satisfaction across multiple rounds.

Key Findings

  • Vertical scrolling preferred → simpler mental model
  • Persistent recommendations boosted engagement
  • Clear CTA placement reduced mis-clicks
  • Too many clicks were needed to play an episode
  • Larger thumbnails improved long-distance legibility

Design Strategy & Execution

Key Changes

  • Visible vertical season selectors instead of dropdowns
  • Key CTAs (Like, Resume, Details) moved above the fold
  • “You May Also Like” carousel for discovery
  • Simplified layout with larger, more readable thumbnails
Wireframe of redesigned layout

Low-fidelity Prototype

After paper sketches, I created low-fi digital wireframes to validate structure and flow across computer and TV. I simplified steps and surfaced key actions early. These were tested with users to confirm navigation before adding visual detail.

Low-fidelity digital wireframes

Refining the Design

Before usability study

Before usability study screen 1

After usability study

After usability study screen 1

Before usability study

Before usability study screen 2

After usability study

After usability study screen 2

High-fidelity Prototype

You can view a live demo of the interface by clicking the view prototype button.

View Prototype
Animated demo of TV prototype

Going Forward

Results

  • Episode-selection time ↓ ≈ 40%
  • Click depth ↓ 2–3 steps per session
  • SUS score ↑ from 3.2 → 4.6

Users described the interface as “intuitive, easier, and less cluttered.”

Reflection & Next Steps

This project emphasized the value of consistent design systems across form factors.

Next
  • Add personalization based on viewing history
  • Integrate accessibility & voice-navigation testing for TV
  • Explore motion transitions to enhance continuity