Roku
Improve ad opportunities
with a new template.
The video above shows how the new template designed is being used for NFL Zone today.
What is NFL Zone?
According to Motley Fool, 86% of overall revenue was derived from the platform segment in the most recent quarter (Q3 2023 ended Sept. 30). Roku's platform division makes money from digital advertising and content distribution services.
This design project merged content distribution as well as additional advertising canvas space like never before at Roku.
With the template now live, it has been adopted for cycling new advertisers against content zones like sports, home and food categories.
Who: Senior UX designer
What: main driver from conception to completed/released state.
Start of Project
The ads product manager came to the design team with a new request. She found in her internal research that Roku advertisers and the editorial team were complaining about the lack of space and layout options when advertising is mixed with Roku content. In an effort to make new and existing Roku advertisers happier, she wanted to start a new project that would become a key investment at the start of 2024 and beyond.
UX Challenges
Multiple users, multiple angles
The following bullets is based on numerous stakeholder interviews, looking into competitors, user testing of existing Roku sponsored pages, as well as design team priorities:
In a study, the advertiser’s logo was often overlooked or seen last, requiring direct prompting. Advertisers needed a faster read.
The layout of the page in question was outdated compared to competitors. Due to the outdated layouts, the sales teams had a hard time exciting existing advertisers. Roku needed a modern, luxurious look at a low cost.
The editorial team had 3 templates for uploading sponsored content, but none worked well for all situations. Due to this, engineers were upset that they had to make changes for the largest clients. Engineers needed a responsive solution.
Selecting a template to fit an advertiser’s current needs was becoming difficult. Paying advertisers need several changes before finalizing desired art and content. Content editors needed an easy solution to add, edit, and publish pages.
In order to finalize the creative design work, various teams needed to collaborate and agree on art decisions which would affect not just the code, but also the creative design, editorial work, development, and product management. The work load on all stakeholders needed to be reduced for everyone.
Artifact collection
Document the flow
Conducting a user flow analysis made it easier to align on the parameters of the redesign with cross functional teams.
After a few months of conversations, key stakeholders aligned the following:
Redesign the page on Step 5 (see diagram)
Make sure to keep the existing navigation flow (steps 1 - 8) as it exists
Ensure content rows comes from system 1 (content library)
Ensure ad related tiles comes from system 2 (ads library)
Ensure data capturing works from system 3 (data platform)
QA to make sure nothing breaks in the code
Analysis of existing templates
Another core challenge in my internal communication was to analyze and articulate successfully that the existing three template solutions made advertising capabilities an afterthought.
In introducing a new ads-considered 4th template, the goal was to effectively cater to the changing requirements of advertisers while enhancing the overall viewing experience (see below, UX Solutions).
The ability to add a large visual image whilst not bumping the background art visually against the tiles and text for legibility reasons was essential in the final solution.
Once stakeholders were onboard, we were able to start to create low fidelity options to discuss inexpensive layout ideas with the internal team prior to user testing high fidelity to get a sense of what was and/or wasn’t working.
Solutions for core functionality
Responsive grid
An all-in-one solution for the editorial team and the creative team, the page as a system grid:
responds to the number of rows introduced by the editors, while also
using the same dimensions for creative guidelines no matter how many rows the team might deliver.
Adjust existing row pattern
By reusing an existing content grid system, we reduce the cognitive load on the end-user while saving money on development.
By shifting the row-row canvas downward, we found a relatively inexpensive way to give a modern look like competitors without changing expensive core functionality.
Floating title asset
This capability gives the template flexibility for title art while ensuring that the title stays crisp when scrolling. (See “blur background…”)
It also ensures that the advertiser have a defined prominent spot that is a substantial increase in canvas size compared to prior solutions.
Show/hide text
During research, we learned that users did not understand the relationship between the advertiser and the page collection. Adding live text ensures the following: a description is possible to add context about the page, and the page is future proofed for globalization if ad campaigns deploy in more than one country or language.
Blur bg on dpad-down
To help the user read the text on the page better, the “glassy” blur of background art allows the advertiser to have a visual impression, while also helping the user focus their eyes on information foraging once the user scrolls down.
Final summary
Findability increased
Search fatigue was real. And advertisers were just not seeing the benefits for their investments.
In this situation, the UX was not just the responsibility of myself, and any one design team. While I worked on the above UX issues, we had product managers, data analysts, researchers and more across Roku looking for solutions.
These team members fought to take editorial pages that lived in Search Results or buried in UI, and “brought them up” to the IA level of the Left Hand Navigation and/or onto the Home Page itself. This way, the average user is now able to find something to watch without having to think or guess search terms by themselves.
Was it perfect? No. There will be iterations. But there was a significant improvement in getting to timely content, like NFL Zone.
This shows that at a large corporation like Roku with many minds on hand, it is everyone’s job to find solutions that can help the end user ultimately find something topical to watch without thinking.
Custom “code tweaks” reduced
After the changes, it became much easier to create on internal team users like the editors and creative teams. These are much more luxurious, fullscreen landing pages for collections with brand integrations like Coca-Cola like never before.
Because the coded template was responsive, it reduced engineering time because the final payoff is compelling enough for the end user.
This reduction in “swirl” frees up expensive engineers to work on either updates, optimizations or other important projects.
Branding guidelines
Sponsor related content was confusing. A few users during an earlier research project said something true: “how is this sponsor related to this content?” And I had a hunch on how to solve it, but I didn’t want to erroneously push a solution internally without having the user testing results agree.
We had many versions around certain contents, for the live in office testing like:
the sponsor and content are tied by a funny line “Cheesy Movies, sponsored by Pizza Hut”
the sponsor and content are tied by the time of year “Valentine’s Day, sponsored by Hershey’s Kisses”
In the end, users were happier with straight forward titles related to the content below.
While terms like “cheesy movies”, while it made most testers laugh, after deeper reflection, “cheesy” meant something different things to different people and did not help improve their understanding of the content below.
While the majority of testers “Valentine’s Day” page of suggested content, there was one man who hated Valentine’s Day vehemently. He wished the company could understand that for him, it brings up pain and all the content suggested showed the typical happy, falling-in-love content, and the editorial suggestions did not offer other alternative stories like someone heartbroken, or someone enjoying being single on a romantic holiday.
Objective terms in titles:
In terms of titles, we suggested the avoidance of subjective terms like "cheesy” even if it ties-in well with selling pizza, but to prefer terms that a global audience can understand like “Comedies” and using row titles to be very specific to the types of comedies a global audience may quickly understand. This will also help with users typing in the search results, which is still an important factor.
Inclusion of experiences:
We also suggested, if we do calendar related content, to try to not just assume to add the most obvious content types, but to also think outside the box to acquire content pieces that might also be subversive or edgy within the limits of the sponsor’s tolerance level. This would help users who feel “less seen” feel included, like the older man can’t deal with romantic movies come Valentine’s Day and may prefer other suggestion types around the holiday.
Imply brand values in large imagery:
For the large 1920x1080 background image, we knew a major instinct from advertisers would be to slap a large image of product in the background. Due to this, we needed to have evidence to show that this would be a good or bad direction. In the research conclusion, we suggested maneuvering clients away from using the canvas as a “large ad image billboard” for the sponsor as that would annoy users. We also offered that perhaps the creative directors can help hone in on a single advertiser’s brand value with which an advertiser wants to align themselves (like “elevated” and “health” for Whole Foods) that also goes along with the editorialized content, like healthy cooking ideas from home, while traveling, or beyond.
