Research — Audience Intelligence
The CW's core 18–34 demographic showed smartphone ownership rates above 72% in 2013, outpacing all other broadcast demographics. Internal viewership data showed a sharp drop-off in live ratings, but strong engagement with clips on unofficial platforms — signaling demand for a first-party streaming experience.

Competitive Audit — Mapping the Gap
Competing network apps (ABC, NBC) were largely read-only schedule tools. No major broadcast network had shipped a fully-functional, full-episode streaming app with a coherent design system. This was a wide-open opportunity to define the category from the inside.

User Insight — Fan Behavior Mapping
Show fanbases like Supernatural and One Tree Hill were deeply organized online — forums, fan wikis, live-tweeting communities. The insight: these fans didn't just want to watch; they wanted to participate in shared moments. This shaped the microsite strategy and the social-first architecture of the apps.

Inspiration — Design North Stars
References pulled from editorial magazine layouts, early Netflix mobile patterns, and music streaming interfaces. The goal was to move beyond the typical 'TV Guide' grid pattern toward an experience that felt immersive and content-first — letting show artwork carry visual weight.

Strategic Brief — The Core Design Problem
The CW needed a unified digital presence that served three distinct audiences simultaneously: the casual viewer who wanted easy episode access, the power fan who craved deeper engagement, and the advertiser who needed confidence that digital inventory could reach a premium audience. Every design decision had to serve all three.

One Brand. Three Products. Zero Playbook.
The challenge wasn't purely visual. It meant establishing a coherent design language that could flex across a responsive marketing website, a full-episode video player app, a high-fidelity subscription prototype, and an emotionally resonant fan microsite — all before any of these pattern libraries or component frameworks existed in their current form.

Cross-functional coordination was essential. Collaborating daily with PMs on roadmap prioritization, engineering on technical constraints, and copywriters on voice and tone, this work demanded both systems thinking and hands-on craft at every stage.

The Four-Product Brief

1) The CW Website: Primary marketing and discovery surface — show exploration, schedules, editorial content.

2) Full Episode App (iOS/Android): Full-episode streaming app with complete playback library and episode browsing.

3) CW All Access App: High-fidelity subscription tier prototype — the blueprint for what would become full SVOD.

From Napkin to Native Experience

A three-phase design process moved from intent to interaction — defining structure before committing to style, ensuring every decision was grounded in user behavior before high-fidelity comps were built.

Phase 1 — Low-Fidelity Wireframes
Established core content hierarchy, navigation architecture, and primary interaction patterns. No color, no branding — pure structure. Key questions answered at this stage: How does a user find a show? How do they start watching? How does the subscription gate interrupt the experience without breaking it?

Phase 2 — Mid-Fidelity Mockups
Introduced layout refinement, typographic scale, and spatial composition. Wireframes were tested with internal stakeholders and engineering for feasibility. Mid-fi was the primary handoff reference for development sprint planning — granular enough to build from, loose enough to allow implementation flexibility.

Phase 3 — High-Fidelity Comps
Full visual design pass incorporating show photography, brand color system, motion intent annotations, and responsive behavior specs. High-fi comps were used for exec presentations, stakeholder sign-off, and App Store submission assets.

Four Products, One Vision

The CW Website Redesign [ Product · Web ]

Rebuilt the network's primary marketing surface from the ground up — transforming a passive schedule-listing page into a content-discovery platform. Established the responsive design system used across all subsequent CW digital properties. Worked directly with PM and copywriters to define content templates flexible enough to support 10+ active shows simultaneously.

• Defined responsive grid system and component library

• Created show page templates scalable across full network catalog

• Collaborated with copywriters on UI microcopy and navigation labels

• Worked with engineering on CMS integration and asset delivery specs

Full Episode Streaming App [ Product · iOS / Android ]

Designed the first-party streaming experience for The CW's full episode catalog across iOS and Android — before SVOD templates existed. Solved core UX challenges around video player controls, episode queue flow, authentication states, and offline-first browsing behavior. Collaborated with engineering on feasibility reviews and with PM on sprint sequencing.

• Video player UX: controls, seek behavior, chapter markers

• Episode queue and series browse architecture

• Login/auth state flows and error handling

• Onboarding and first-run experience design

CW All Access App (Subscription Prototype) [ Prototype · Subscription UX ]

A forward-looking high-fidelity prototype for a subscription streaming tier — years before The CW's parent companies launched dedicated SVOD services. Designed the full subscriber journey: onboarding, plan selection, content gating, premium browse states, and upgrade prompts. Treated as a design vision document shared with leadership and development to shape long-range product strategy.

• Subscription tier architecture and pricing UI

• Premium vs. free content gating visual language

• Upgrade prompt placement and conversion flow

• Served as internal roadmap artifact for future SVOD planning

Measurable Results on Every Front

By the Numbers

• 3.2M — Monthly active users across Full Episode App and The CW website within 6 months of relaunch

• +47% — Increase in average session duration on mobile vs prior web experience

• 3× — Products shipped under one unified design system

• Top 25 — App Store Entertainment category ranking during active show seasons

Strategic Narrative

The CW digital platform work proved that broadcast-era brands could compete in a mobile-first landscape — not by mimicking streaming giants, but by doubling down on what made The CW's audience unique: passionate, community-driven fandom.

The Full Episode App consistently ranked in the top 25 of the Entertainment category on the App Store during active show seasons — a significant achievement for a network-tier product competing against premium SVOD apps with far larger budgets and engineering teams.

The CW All Access prototype became an internal reference document used by the product and strategy teams when evaluating the transition to a subscription model. Elements of its IA and UX patterns were directly incorporated into subsequent digital product planning. Designing it in high fidelity — not as a conceptual sketch but as a navigable, screen-complete prototype — gave stakeholders a concrete vision rather than an abstract one.

The One Tree Hill microsite demonstrated a principle that has only become more relevant since: when you design for the fan, not just the viewer, you unlock organic amplification that no media buy can replicate. The microsite generated press coverage across entertainment blogs and drove live-stream viewership that outperformed all internal projections.

Lawrence Lacanilao
Designer

• This work was built in close collaboration with a cross-functional team. Design was always a team sport.

  • UI/UX Design Lead — Concept, wireframes, visual design, high-fidelity comps, and prototype across all four products

  • Product Management — Feature prioritization, sprint planning, stakeholder alignment, and launch coordination

  • Engineering — iOS, Android & web development, technical feasibility reviews, and QA collaboration

  • Copywriting — Show descriptions, UI microcopy, CTA language, and microsite editorial content

  • Brand / Marketing — Asset supply, brand guidelines, campaign alignment, and exec presentation

  • Network / Stakeholders — The CW creative and digital teams — direction, approvals, and production coordination