Multi Device Video Player Configuration

Problem Framing & Discovery

To move beyond assumptions, I conducted a two-phase discovery process to diagnose why player configurations were failing in the field:

• 100% Response AE & AM Survey: Distributed a quantitative survey to the entire Account Executive and Account Management team. With a 100% response rate, the data revealed that over 70% of support escalations stemmed from setting dependencies (e.g., conflicting layout and orientation inputs) rather than actual system bugs.

• Qualitative User Interviews: I spoke with Media Team leads and Demand Ops managers and watched how they set things up in their day-to-day work. This helped me understand the workarounds they relied on, like keeping separate cheat sheets to remember which properties could be used together.

Key Research Finding: Users weren’t asking for more settings to customize. They wanted to know their setup would work for the specific publisher placement they were using.

Widgets determine how Truvid’s player, videos, and ads behave on live publisher sites. Misconfigurations directly harm monetization, site performance, and user experience. Through observing account managers and reviewing support logs, I identified three structural bottlenecks:

1. Cognitive Overload: Over 30 raw technical fields were exposed simultaneously on a single page, regardless of their relevance to the player type

2. Fragile Dependencies: Users had to manually calculate valid combinations of layout, orientation, and placement controls

3. Device Conflicts: Desktop and mobile rules were mixed into one form, creating invalid configurations across device environments

The Design Goal

The redesigned experience needed to make widget creation faster and more predictable while still supporting complex operational requirements.

I defined four principles:

1. Start with the intended format - not individual technical properties.

2. Show only settings that apply to the current configuration.

3. Separate desktop and mobile decisions clearly.

4. Create a structure that can scale to future formats and capabilities.

Decision 1: Predefined Formats Over Independent Properties

The Solution: Instead of requiring users to configure orientation and layout as separate fields, I introduced 5 predefined formats: In-Article Horizontal, In-Article Vertical, Carousel, Floater Horizontal, and Floater Vertical.

Selecting a format automatically enforces orientation, aspect ratio, and valid player rules.

Iterations & Rejected Explorations:

• Exploration A (Standalone Format Step): I initially tested making "Format Selection" its own dedicated step before the main form. Why it changed: It added unnecessary step-clicks and felt disconnected from device configuration. I integrated format selection directly into the device setup context.

• Exploration B (Rich Illustrated Cards): Early concepts used large visual illustrations inside each format card. Why it changed: The images consumed excessive vertical space, pushing critical configuration settings below the fold. I streamlined them into compact, scannable selection cards.

Choosing a predefined format establishes orientation and valid layout logic automatically.

Micro-Copy & Label Simplification

Part of reducing cognitive load meant fixing the disconnect between developer parameters and how account managers actually discuss widgets. I renamed over 30 technical fields across the system into clear, domain-specific terminology.

Prototype Testing & Usability Verification

Before finalizing the interface, I built an interactive prototype in Figma and conducted structured usability testing sessions with internal power users and Account Managers:

• Task-Based Testing: Participants were asked to configure a multi-device setup (e.g., In-Article Horizontal for Desktop + Floater Vertical for Mobile).

• What We Measured: Task completion speed, error rate, and discoverability of progressive disclosure accordions.

• Key Insight & Refinement: During early prototype tests, users missed settings input which resulted in errors and delays. I set default values in all fields for each widget type.

Decision 2: Decoupling Desktop & Mobile Under One Tag

The Solution: To honor the publisher constraint of a single tag while eliminating device conflicts, I decoupled the setup into a linear, step-by-step stepper: 1. General Identity -> 2. Desktop -> 3. Mobile -> 4. Review -> 5. Embed Code. Within each step, progressive disclosure ensures only settings supported by the selected format are displayed.

Collaboration With Back-end

Eliminating the Step-Level Save Button: I initially placed explicit "Save" buttons at the top of each device section. After syncing with back-end engineering, they confirmed seamless step auto-persistence, allowing us to remove top save buttons and clean up header clutter.

Smart System Defaults

In the legacy form, required fields were often left empty, leading to runtime JavaScript crashes on live publisher sites. Working with back-end engineering, we established intelligent system defaults across all fields. Every new widget opens with pre-populated, battle-tested values (e.g., standard 16:9 ratios, default volume levels, and safe frequency caps), allowing users to launch standard setups in seconds without leaving missing-data bugs.

Section-Level Shortcuts & Micro-Interactions

To speed up repetitive workflows for power users, I introduced active toggles inside section headers: Users can enable or disable entire setting categories (like Sound or Ads & Monetization) directly from the collapsed accordion header without expanding the section.

Decision 3: Balancing Monetization, User Experience & Migration

Balancing Revenue Yield & Viewer UX: Floating out-of-view units generate high ad revenue but can easily degrade viewer experience. In the Out-of-View section, I introduced a Viewability & UX Balance Indicator to provide account managers with real-time feedback on how their positioning rules impact revenue versus user experience.

Eliminating Invalid States with BE Defaults: Partnering with back-end engineering, we established intelligent system defaults across all player properties. No required fields are left blank, preventing runtime script crashes on publisher sites.

Introducing the Visual Review Step: Because configuring a multi-device player involves many decisions, I added a dedicated Review Step before code generation. Here, full player illustrations and rule summaries allow users to verify their Desktop and Mobile configurations side-by-side.

Old Admin -> New Admin Migration Logic: Working with back-end leads, we co-designed a migration fallback logic ensuring full backward compatibility:

System Validation & Error Prevention

Because misconfiguring a widget directly impacts publisher ad revenue and site performance, validation was built as a multi-layered safety net rather than relying on late error toasts:

1. Structural Validation (By Design): Predefined formats automatically lock out incompatible orientation and layout parameters before the user even sees them.

2. Real-Time Field Validation: Inputs like custom width/height or frequency capping validate syntax and boundaries in real-time with inline error messaging.

3. Step-Level Enforcement: Step navigation and the final Save/Create button remain disabled until all mandatory fields within the current step pass validation checks.

4. System-Level & Duplicate Validation: When naming or duplicating widgets, real-time API checks prevent duplicate naming collisions across the organization.

Operations Hub & Project Impact

Beyond Creation - The Widget Management Hub: The redesign also overhauled the main Widgets table. Operational teams can filter by format, status, and device environment, as well as perform batch actions like cloning, modifying A/B split traffic, and retrieving embed tags.

The updated Widgets table acts as a central operational hub for Media Teams, Demand Ops, and QA

Decision-Maker Alignment & Pre-Dev Review

Because changing the player configuration architecture impacted core business logic, monetization rules, and publisher scripts, I led a formal Design Reflection & Alignment Session with key executive decision-makers (Head of Product, R&D Tech Lead, and Operations Leadership) prior to developer handoff:

• Trade-Off Presentation: Walked stakeholders through rejected explorations (e.g., full free-form inputs vs. rigid predefined formats) and demonstrated how predefined formats protected ad yield while cutting support load.

• Engineering Sign-Off: Secured technical alignment on the single-tag decoupling architecture and agreed on smart back-end default values to eliminate empty-field errors.

• Phased Migration Agreement: Established buy-in on a fallback migration logic for legacy widgets, ensuring no publisher code was broken during the rollout.

Delivery Status & Measured Outcomes:

The configuration hub shipped as the primary way to create widgets in the New Admin platform.

• Setup time: Creating a widget now takes about 8 minutes instead of 20.

• Fewer misconfiguration tickets: Tickets about widget misconfiguration dropped significantly 60%.

• More experimentation: Teams ran more A/B tests, helped by cloning and split-traffic controls in the management hub.

• New formats: The format-driven model has already supported new video formats.

• Fewer widgets: With one unified tag for desktop and mobile, teams create fewer widgets for the same setup.

The Final Outcome

The redesign transformed widget creation from a long collection of technical fields into a guided, format-driven configuration system.

Users can now:

• Start from a clearly defined widget format.

• Understand the type of player they are creating.

• Configure desktop and mobile behavior separately.

• See only the fields relevant to the selected format.

• Move through a clear, five-step process.

• Avoid incompatible orientation and configuration combinations.

• Find and manage existing widgets more efficiently.

• Duplicate and edit configurations with clearer validation.

• Work within a system designed to support future formats.

The project also established a new shared configuration model across the product, front end and back end - creating a more scalable foundation rather than only modernizing the interface.

Using AI during design exploration

I used Claude at several points in the design process. First, I explored ways to structure the widget creation steps and wireframed the overall flow. I then used it to generate layout directions for the Desktop and Mobile configuration pages, where many conditional settings had to remain understandable. Finally, I explored UI approaches for the Review page, which needed to help users verify two device configurations before generating the embed code. I evaluated these ideas against the actual configuration rules, user tasks, and engineering constraints, then developed the final flows and UI in Figma. The Claude workspace belonged to my employer and is no longer available, so the case study shows the resulting design decisions rather than the original AI exchanges.

Reflection

The main lesson from this project was that simplifying a complex tool does not always mean removing advanced functionality.

The more effective solution was to redesign the underlying model: replacing independent technical settings with meaningful formats, separating device-specific decisions and revealing configuration only when it became relevant.

By treating the information architecture, interaction design and system logic as one problem, the redesign improved the current workflow while creating a stronger foundation for future widget capabilities.