“Bridging Broadcast and Touch: Designing a Seamless Second-Screen Shopping Experience”

At the onset of the "Streaming Era," QVC was ahead of the curve in exploring ways to merge its live broadcast experience with digital touchpoints—particularly through its tablet app. The goal was to create a seamless second-screen experience that would drive engagement, inform purchasing decisions, and extend the brand’s reach beyond traditional TV.

The QVC on-air show was designed to sync in real-time with the user’s device, automatically capturing product data as it was presented on air. This information was then translated into interactive UI components within the app—such as real-time product cards, pricing updates, and availability cues—enabling users to browse, learn, and purchase without ever leaving the broadcast.

Additionally, the app encouraged deeper interaction by integrating live chat features and offering enhanced product views, giving users a more immersive and connected shopping experience. This project demonstrated how UX can bridge media formats to create intuitive, cross-platform shopping journeys.

The Concept of Second Screen: Bridging Broadcast with Interactive Commerce

To translate the abstract concept of second-screen interaction into a real, usable product experience, I created a visual model that mapped how QVC’s television broadcast and tablet app could work in sync.

As a broadcast-first company, QVC traditionally relied on TV as its primary channel for showcasing and selling products. My challenge was to reimagine this linear experience as an interactive, dual-screen ecosystem—where the tablet becomes an extension of the live show, not a separate destination.

The second-screen model offers viewers:

  • Real-time product data as it’s mentioned on-air

  • Interactive product cards synced with live content

  • Live chat and enhanced views to deepen engagement

  • Seamless purchasing, without interrupting the show

This approach modernized QVC’s purchase flow, moving beyond the traditional call-in model and into a more dynamic, immersive, cross-platform shopping journey. It repositions the tablet not just as a companion device, but as a key engagement tool in the age of streaming commerce.

Mapping Second-Screen Scenarios: Turning Personas into Interactions

QVC provided rich user research and well-developed personas that highlighted viewer behaviors, motivations, and attitudes toward the live broadcast experience.

Leveraging this research, I outlined key usage scenarios to understand how different user types might engage with the second screen while watching the show. These scenarios helped me:

  • Identify moments of opportunity for real-time interaction

  • Map how users switch between viewing and buying mindsets

  • Explore behaviors across passive viewers, power shoppers, and curious browsers

These scenario maps became the foundation for early sketches, wireframes, and interactive prototypes, ensuring that the second-screen experience aligned with real-world behaviors and user expectations.

Product Variants & Layout Flexibility

QVC hosts a wide range of product categories, each with unique presentation needs. As part of the second-screen experience, I explored how these differences should be reflected in the Product Detail Page (PDP) layouts.

To support consistency and scalability, I began by mapping out layout variants based on key product scenarios, including:

  • Discounted Items – with strikethrough pricing, countdowns, and urgency cues

  • In-Stock vs. Out-of-Stock – with clear availability messaging and backorder logic

  • Warranty & Add-Ons – requiring expandable sections and comparison elements

  • Category-Specific Needs – such as fashion sizing charts or tech specs for electronics

By identifying these variants early, I was able to create a modular design system and a punchlist of layout requirements, ensuring the PDPs could flex across product types while staying cohesive within the app experience.

Profile view components on the (left sketch) turns into navigations buttons in landscape view (right sketch)

Ideation: Sketching Across Orientations

As part of the early brainstorming phase, I began sketching UI concepts to explore how the second-screen experience could adapt to varying device orientations and aspect ratios.

This process involved balancing traditional eCommerce elements—such as Add to Cart, Size, and Color selectors—with media controls like Play, Pause, and a timeline scrubber for live or on-demand video.

I designed two core orientation modes:

  • Portrait (Profile)
    This layout prioritized video at the top, with product details stacked below—ideal for casual browsing while watching.

  • Landscape
    In this mode, the product details shift into a left-aligned panel, creating a split-view experience that mirrors second-screen multitasking behaviors.

This sketching exercise helped define how the interface could remain responsive, intuitive, and engaging—no matter how users held their device.

Prototyping the Product Detail Page with Video

One of the core UX challenges was designing a Product Detail Page (PDP) that could support both scrollable content and continuous video playback without disrupting the user experience.

To address this, I sketched and prototyped a scrollable PDP layout where the video remained persistent—either pinned at the top or minimized into a floating player as users browsed product details like descriptions, options, and reviews.

This approach allowed for:

  • Uninterrupted engagement with the live broadcast

  • Seamless access to product specs, color/size selectors, and pricing

  • A fluid experience that mimicked the feel of browsing without leaving the stream

Prototyping this helped refine behaviors such as when the video should collapse, how playback controls remain accessible, and how visual hierarchy guides attention between media and commerce.

Tablet Interactions: Designing Gesture-Based Controls for a Dual-Tasking Experience

To make the second-screen experience intuitive and fluid, I mapped out a set of gesture-based interactions tailored for tablet users—focusing on how they interact with both video playback and product exploration simultaneously.

Key gestures and behaviors included:

  • Tap to Open UI – Reveals product details layered over or beneath the video

  • Tap to Pause/Play – Allows control of the live broadcast without leaving the screen

  • Swipe or Scroll – Lets users browse additional product information while the video continues to play

  • Pinch or Drag Down – Shrinks the video into a floating mini-player, enabling deeper exploration of the PDP without missing the show

This interaction model allowed users to pause, replay, and explore while staying anchored to the live content—bridging lean-back viewing with active shopping. It made the tablet experience feel responsive, non-intrusive, and commerce-ready.

Lo-Fi Wireframes: Storytelling Through the Product Detail Page

Once I identified the key variants of Product Detail Pages (PDPs), I began sketching a standardized layout to serve as the foundation for prototyping key interactions.

The design goal was to mirror how a QVC host tells the story of a product—highlighting features, demonstrating value, and building emotional connection. To support this, I structured the PDP to include:

  • Product highlights and feature breakdowns

  • Embedded video clips pulled from the live or on-demand show

  • Customer reviews and community comments to build trust and social proof

  • Discussion prompts and program subscription options to encourage ongoing engagement

These early wireframes focused on creating a narrative-driven experience that combined content, commerce, and community—making the second-screen PDP feel like an extension of the on-air storytelling QVC is known for.

Orienting the Product Strip UI: Designing for Context and Continuity

To support real-time product discovery, I explored different orientations for the product strip—a horizontal or vertical UI element that displays the current item on-air along with recently aired products.

The goal was to create a layout that felt contextually aware of the live show while enabling users to browse previously featured items without disrupting their viewing experience.

I experimented with:

  • Horizontal placement beneath the video for swipe-friendly browsing

  • Vertical side placement for persistent access alongside content in landscape mode

  • Auto-scrolling behavior to sync with live broadcast transitions

  • Clear visual cues for the “Now Airing” product vs. “Previously Aired” items

This strip became a crucial UI component—helping users orient themselves within the broadcast timeline, revisit missed items, and jump into product exploration in a frictionless way.

composite.jpg

Strategic Narrative: Syncing Product Storytelling Across Screens

At the heart of this second-screen experience is a core strategic insight: the product should be experienced as a narrative, unfolding in real time—not just as a static catalog item.

QVC's on-air hosts are skilled storytellers. They don’t just present a product—they demonstrate it, contextualize it, and build emotional resonance through tone, anecdotes, and social proof. The second-screen experience needed to mirror and amplify that same energy within the digital UI.

To achieve this, I designed the product detail ecosystem to unfold in parallel with the live show:

  • Real-Time Product Sync: As the host presents a new item, the app updates instantly with a corresponding PDP, keeping users immersed without forcing them to search or refresh.

  • Embedded Show Clips: Video segments are pulled directly from the broadcast and embedded alongside features and specs, reinforcing the emotional value shown on-screen.

  • Live Context Cues: The UI surfaces elements like “Now Airing,” countdown timers, and limited-stock banners to replicate the urgency and pacing of live TV.

  • Social & Community Layers: Customer reviews, live chat, and shareable interactions bring in additional voices, much like how callers used to interact on-air—modernized for the app.

  • Narrative-First Layouts: The PDPs are structured to guide the user through a story arc—introducing the product, showcasing its benefits, answering anticipated questions, and offering a call-to-action.

Ultimately, this strategy elevates the shopping experience from transactional to experiential. It’s not just about presenting data—it’s about creating continuity between the storytelling on television and the interaction on the tablet, so users feel like they’re part of the moment, even when they’re watching on a second screen.

Interactive Product Surfacing: Real-Time Engagement Without Disruption

As the live broadcast airs, featured products are dynamically surfaced within the tablet app, synchronizing seamlessly with what users see on screen. This ensures that viewers don’t just passively consume the show—they can interact with the products in real time, without breaking the flow of the experience.

Each product entry includes rich, interactive elements:

  • Selectable options for color, size, and quantity

  • Live pricing updates and stock availability indicators

  • Clear, accessible CTAs such as “Add to Cart” and “Buy Now”

The interface is designed to support on-the-fly customization, allowing users to configure and purchase products without ever leaving the broadcast. Whether users are watching in portrait mode or multitasking in landscape, product cards remain responsive, interactive, and always in sync with the show.

This approach brings commerce and content into direct alignment—transforming passive viewing into an actionable experience. By embedding editable product interactions directly into the second-screen environment, we streamlined the path from discovery to decision to conversion—all without interrupting the moment.

Impact: Pioneering QVC’s Entry into the Streaming Era

The second-screen experience marked a major milestone for QVC—not just in terms of product innovation, but also in organizational transformation.

This initiative became the first agile UX project to bring QVC into the streaming era, laying the groundwork for how the brand could extend its broadcast identity into digital ecosystems. By aligning live content with interactive, real-time product engagement, the app experience significantly increased iPad activity and viewer interaction rates.

The second screen didn’t just replicate the TV experience—it enhanced it, modernized it, and proved that commerce, storytelling, and digital interaction could coexist in a seamless, scalable format.

Previous
Previous

Onboarding

Next
Next

ListManagement & Segments