Halo Companion Banner
Overview
After Kargo successfully developed its proprietary video player, Fabrik, the company was able to offer both in-player video ad placements and companion banner spaces. To take advantage of this expanded inventory, I designed two innovative ad formats that optimized both the use of available real estate and the aesthetic experience for users.
Category: Video Ad Product
Role: Lead Interactive Designer
Platform: Mobile and Desktop
Timeline: Feb 2024 - Jan 2025
Problem
Online readers increasingly ignore standard display ads due to banner blindness and are easily frustrated by disruptive formats that interrupt their content experience. Advertisers need a way to deliver high-impact video messaging without sacrificing user engagement or degrading the reading experience.
Process
[01] User Research
We interviewed five adults aged 25–55 who regularly browse news, lifestyle, tech, and entertainment articles on both desktop and mobile devices.
Key Questions
How do users read articles? (skim vs. in-depth)
How do they feel about ads on those pages?
What makes them notice or ignore an ad? What feels premium or useful?
Static vs. video vs. animated
Placement and interaction expectations
Key Results
We studied browsing behavior on premium news and lifestyle sites and found that readers often skim content and dislike disruptive ads.
This insight led us to design a visually striking yet unobtrusive outstream video format that blends seamlessly with the page.
[02] Persona
Name: Jane
Age: 38
Occupation: Project Manager
Bio:
Jane spends weekday mornings catching up on industry news and lifestyle articles during coffee breaks. Often clicks into multiple articles from social media or newsletters. She tolerates ads but ignores them if they look like generic banners. If a video ad is visually interesting and plays seamlessly without blasting sound, she’s willing to glance at it.
Behaviors:
Consumes 5–10 articles/day on reputable media sites
Skims headlines before deciding to read in-depth
Ignores most sidebar ads but sometimes notices interactive formats
Needs:
Minimal disruption of reading flow
Ads that are easy to dismiss or ignore if irrelevant
Clear visual cues that something is clickable (not accidental)
Pain Points:
Loud autoplay videos
Overlays that cover article text
Repetitive retargeting ads
Goals (as a user):
Get information efficiently
Discover new products or brands if they are relevant to interests
Feel in control of the ad experience
[03] Insight
Readers quickly skim article content and often ignore banner ads, making it critical for ad formats to stand out visually without interrupting the flow of reading.
Autoplay videos with sound are perceived as intrusive and create negative sentiment toward both the ad and the publisher.
When ads feel seamlessly integrated into the page layout and offer smooth, silent motion, users are more likely to notice and engage without feeling disrupted.
[04] How Might We
How might we create an outstream video experience that is noticeable and memorable without disrupting the reader’s flow?
How might we design companion banners that feel positive and integrated, encouraging trust and engagement instead of annoyance?
How might we encourage deliberate engagement by making ad interactions clear and intuitive for skimming users?
[05] Design Solution
Combined outstream video with integrated companion banners that frame the article content, creating an immersive but non-disruptive ad experience tailored for readers who skim and expect minimal interruption.
Designed the companion banners to clarify click intent, reducing accidental interactions and helping users feel in control of their engagement.
Persistently displayed brand logos and key messages throughout the ad to enhance recall and deliver clear, consistent communication without relying on intrusive overlays.
Initial Sketches
High Fidelity Mocks
Pivotal Direction
[01] Key Challenge Uncovered
During the design process, we discovered that most publisher websites enforced strict limitations around the video player space. Specifically, many required that video ad formats remain under 440px in height, which significantly impacted our initial design concepts and required us to rethink layout strategy.
[02] How We Solved It
To adapt to these constraints, we tested character limits for text legibility and explored different placements for branding elements. Through iteration, we found that the top and bottom areas of the video player were the most effective zones for placing key assets like logos, copy, and call-to-action buttons.
After several rounds of exploration and refinement, we narrowed our concepts down to two high-performing formats:
Split Frame – which balanced content and branding across defined areas
Full Frame – which maximized visual impact in the limited space
Final Design
Halo Split
Top and bottom companion banners surround the video player, providing dedicated space for branding elements. Displaying logos and messaging in these areas enhances brand awareness, while the banner’s click-to-website functionality makes user engagement more intentional. Subtle banner animations help capture attention and contribute to a higher video completion rate.
KPI | Brand Awareness, Engagement, Video Completion
Use cases | CPG, Hospitality, Auto
Halo Full
The Full Frame format utilizes all four sides—top, bottom, left, and right—surrounding the video with a fully immersive branded experience. Animated banners appear behind the video content, gradually revealing the brand logo, messaging, and a clear call-to-action. This format not only enhances brand awareness but also provides intuitive visual cues that guide users to explore further. The use of all four sides allows for more natural edge-based design possibilities, resulting in a visually elevated and aesthetically refined video ad experience.
KPI | Brand Awareness, Engagement, Video Completion
Use cases | CPG, Hospitality, Auto
Usability Testing
We conducted moderated usability sessions with five participants to evaluate how the Halo outstream video and companion banners performed in a real reading environment. The testing confirmed that the ad was noticeable and memorable without feeling disruptive, and users clearly understood the brand message while maintaining a positive reading experience. Feedback led to refinements such as adding a slight autoplay delay and adjusting animation timing to further enhance usability.
Outcome
Participant Observations:
4 out of 5 users noticed the Halo ad within the first few seconds of scrolling
All users described the ad as visually noticeable but not annoying
0 users accidentally clicked the ad during reading
5 out of 5 correctly recalled the brand and the main message
1 user wished the video autoplay was slightly delayed to avoid competing with the headline
Majority rate the experience positive or neutral
80% of users notice the ad within the first scroll
100% understand the brand and purpose of the ad
“I noticed it right away, but it didn’t block what I was trying to read.”
“I like that it feels integrated. It doesn’t scream for my attention.”
“It’s clear this is an ad, but it looks more premium than the usual banners.”
Dynamic Produc Ads
Customized E-Commerce Ad Formats