FRAME

(Flexible Roku Ad Microsite Experience): Designing a scalable system for rapid, self-service ad microsite creation

(View on desktop for best experience)

Company

Roku

Team

UI/UX Designer (my role)
UX Researcher
UI Engineers
Research team
Backend Engineers
Project Manager
Product Manager
Merchandising

Users

Merchandising

Timeline

Jun 2023 - Jan 2024

Overview

FRAME is an internal platform that enables non-technical teams to quickly create and launch ad microsites without engineering support.

I designed a new system and workflow within ScreenBuilder that transformed microsite creation from a slow, engineering-dependent process into a flexible, template-driven platform that improved speed, consistency, and advertiser confidence at scale.

Roku’s ad business increasingly depended on fast, high-quality branded experiences. Microsites were a key part of that strategy, but the process behind them was fragile and difficult to scale.

FRAME was created to address this gap by introducing a new way of producing ad microsites, rather than incrementally improving existing tools.

The Challenge

The platform’s current architecture limits how quickly and flexibly experiences can evolve, creating friction across teams and reducing our ability to respond to market demands.

  • Creative changes depend heavily on engineering involvement within Grand Central and ScreenBuilder.

  • Engineering bandwidth becomes a bottleneck as multiple teams compete for the same resources.

  • Slow iteration impacts how advertisers perceive product momentum and innovation.

  • A rigid row-based model constrains experimentation and results in predictable experiences.

Design Goal

  • Shorten the path from concept to launch

  • Give operators control over routine creative decisions

  • Maintain brand and platform consistency across campaigns

  • Support iteration after launch without rework

Rather than solving for flexibility alone, the goal was repeatability with intent.

The Vision

Redefining experience creation by enabling flexible, scalable workflows with fewer dependencies.

Research & Discovery

I collaborated closely with UX researchers during an initial round of in-lab customer research focused on evaluating navigation usability across three design templates: Showroom (vertical and horizontal) and the existing Hero template within an Ad Destination. These insights became foundational to FRAME, informing how I defined its core navigation patterns, constraints, and system boundaries.

The Solution

1. FRAME is designed to integrate with existing design tools, such as Figma, to support flexible and scalable template creation.

  • In the near term, templates are created by engineering using FRAME’s domain-specific language (DSL), which enables rapid development while significantly reducing implementation effort.

  • Over time, FRAME will support a Figma plugin that allows designers to create and update templates directly, with the DSL intentionally structured to enable this evolution.

2. Templates are managed directly within ScreenBuilder, creating a seamless connection between template creation, configuration, and ongoing curation.

ScreenBuilder:

  • Dynamically provides UI for populating fields in template

  • Publishes compiled template to Content Services

2. Allows operators to preview compiled template in TAB, a system for previewing and ensuring components are correctly assembled and displayed before deployment.

Impact

This new workflow improves efficiency while creating a foundation for a broader range of evolving product experiences.

While exact metrics were still developing, FRAME delivered clear early value:

  • Faster campaign launches

  • Fewer engineering touchpoints per microsite

  • More consistent ad experiences across surfaces

  • Increased confidence from internal teams and advertisers

Market Opportunity

  • $15M in Auto (2024)

  • $50M+ potential

    • Ability to scale quickly and deploy new ad experiences holds the potential to drive revenue

  • Expansion into new verticals

    • Unlock additional revenue for verticals like Health & Wellness, Travel, Theatrical, and Retail

  • Organizational cost savings

    • Drive efficiency and resource optimization by reducing dependencies, eliminating duplicative work, and streamlining operations.

Looking Ahead

Next steps for FRAME would include:

  • Measuring time-to-launch and post-launch iteration frequency

  • Extending the framework to support new ad formats

  • Refining governance as campaign volume grows

Previous

AI Generated Images
Next

Illustrations