Turning a live-TV weather overlay into a sponsor-ready surface

Viewers see the L-Bar around the live broadcast of The Weather Network’s FAST channel, and on the Live TV page of the TWN TV app. My manager asked for a version that could earn revenue through sponsored content and show weather for the main cities in every Canadian province.

The shipped L-Bar shows a day view and a week view for each city, gives sponsors five placements, and runs on Pluto TV, Tubi, Roku, Samsung TV Plus and LG Channels.

The old version showed a clock, wind gust, a three-period forecast, a line of forecast text and a seven-day strip. It had no space for sponsored content, so it brought in no revenue.

It also confused some viewers. Each forecast period carried the label “POP” for probability of precipitation, and viewers complained that they didn’t know what it meant. My manager passed these complaints on to me.

There was no research data for this project. My manager set the agenda, the pain points and four goals:

• Give sponsored content a place in the interface so the L-Bar can earn revenue
• Show the weather for the main cities in every Canadian province
• Show today in one view: three parts of the day and the next 12 hours
• Show the week in a second view

I worked within two constraints. The L-Bar frames live video, so it must not pull attention from the broadcast. And the streaming platforms render solid colours only, so the design couldn’t rely on transparency.

I first explored a lower third, a single bar along the bottom of the screen. It had room for one row of data, and I needed space to show two types of forecast for the same city at once: the parts of the day and an hourly or daily strip. I rejected the lower third as too small and moved to an L-shape, with a vertical column on the left and a strip along the bottom.

The trade-off is screen space. The broadcast plays in the area inside the L, smaller than full screen.

With the marketing manager, I designed five sponsor placements, from a logo swap to a full takeover:

• The whole L-Bar
• The vertical column only
• The bottom strip, forecast only, keeping The Weather Network logo
• The bottom strip, forecast and logo
• The logo only

I also created the sponsor assets the format needs: banners sized for the L-Bar and logo versions that fit its slots. I tested sprite images with the developers. Marketing used the format first for a collaboration with Les Stroud’s Survivorman.

I explored a frosted-glass background that let the video show through the frame. The developers told me the platforms could not render transparency, only solid colours. I switched to a solid blue gradient. I gave up the layered look in exchange for a frame the developers could build on every target platform.

The L-Bar rotates through the main cities in every province. Each city stays on screen for 20 seconds: 10 seconds of the day view, then 10 seconds of the week view. A progress line under the location tag shows how much time is left before the next city.

The day view shows the next three parts of the day in the column, such as Afternoon, Evening and Overnight, and the next 12 hours along the bottom. The week view shows the next three days in the column and all seven days along the bottom.

I combined a fade with a slide for every data change, so new forecasts replace old ones without pulling the viewer’s eye from the video.

I owned the colour system, the motion behaviour and the handoff. I handed the designs off to the two developers and stayed in contact with them through the build.

The L-Bar is live on Pluto TV, Tubi, Roku, Samsung TV Plus and LG Channels, on every streaming service that carries The Weather Network channel, and on the Live TV page of The Weather Network TV app.

The Survivorman collaboration with Les Stroud brought revenue to The Weather Network. I don’t know the amount, because revenue reporting sat outside the design team. I had no viewer or engagement data for the L-Bar, so I make no claims about them here.