FRAME
(Best viewed on desktop)
Overview
Challenge
Research
FRAME, which stands for Flexible Roku Ad Microsite Experience, is a new system that houses and manages flexible microsite templates which can be leveraged by users of ScreenBuilder, so that they can easily curate microsites across the Roku Platform.
🤔 Before we dive in, you’re probably wondering, “What is a microsite?”
A Microsite is a small, specialized website that is used to support a specific campaign or product, providing targeted content and a unique experience. For the examples below, microsites were used to promote the launch of a new original and partnership, featuring detailed information, videos, and interactive elements.
Company
Roku
Role
UI/UX Design
The driver for a more flexible set of microsite templates stems from the extensive engineering support required for delivering previous microsites. The goal of FRAME being integrated into ScreenBuilder is to decrease engineering dependency, and give operators more control when creating and curating microsite templates, from ads experiences to content featured experiences and everything in between.
Operators had very limited design flexibility to evolve the ad microsite experience which hindered their ability to meet dynamic market demands 😵💫
No existing internal app had the ability to give creative power and flexibility to the users to build microsites quickly
New projects and UI design changes required engineering effort
Throughout the organization, operators are competing for the same limited engineering resources.
Based on feedback, products have been perceived as stagnant, resulting in reduced investment from ad clients.
In Q2, initial round of in-lab customer research completed by Research team
The primary goal was to evaluate the navigation’s ease of use for 3 design templates: Showroom (vertical and horizontal) and existing Hero Templates.
Users
Ad Operations & Merchandising
Timeline
Jun 2023 - Jan 2024
The Solution
Provide a central location in ScreenBuilder where operators can perform their entire journey of creating, curating, and publishing a wider range of FRAME-powered microsite experiences while investing less time and money.
The Approach
FRAME is thoughtfully designed to leverage any existing design tooling, such as FIGMA, to enable dynamic template creation.
This FRAME Figma plugin is used to create and/or update templates by the Ads design team (right).
How it works in ScreenBuilder
Displays list of available templates defined by FRAME designers
Allows operators to preview compiled template in TAB, a system for previewing and ensuring components are correctly assembled and displayed before deployment.
Publish compiled template to Content Service, which handles the conversion and delivery of FRAME files.
Operators will efficiently manage templates within ScreenBuilder, ensuring seamless integration between template creation and curation workflows.
Dynamically provides UI for populating fields in template
🥳 With this new design and workflow, we unlocked efficiencies and cultivated opportunities for the evolution of a diverse range of product experiences.
$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.
