Work
Nick Roku Channel
Nickelodeon, Lead Visual Designer
Nickelodeon was the first Viacom property to have a channel on Roku. Collaboration with our UX Designer & our vendor, Float Left Interactive, made for a smooth process, allowing us to produce a clean, cohesive, and custom experience.
Because Roku already had a system in place, customization was limited as the Nickelodeon team had to work within Roku’s requirements, but was able to incorporate some graphical elements to bring in Nickelodeon’s branding.
Roku had some existing templates we could choose from, opting for a featured carousel at the top and all secondary carousels below. Very common now among streaming services. This allowed us to have a similar feel to the new Nick.com website and the Nick app, which always had a featured content tile at the start.
From the start, the UX Designer and myself found all the design limitations within Roku’s system. This was new territory for the Nickelodeon team, testing was imperative. Not only from a user perspective, but also from a business standpoint as this would be Viacom’s first property to be launched on Roku.
The team learned about safe zones on TV displays, resolution differences, how colors appear, interaction design while using the Roku remote. Plus the team was support Standard Definition displays, which meant more testing, comparing designs side by side ensuring visibility and legibility.
One of the first areas we had to pivot on was the Nickelodeon branding color. The very recognizable orange of course was a staple for the brand. For the Nick.com redesign, we used an orange gradient. We tried using the same gradient for Roku, as this was the new direction among platforms, however appearing on a tv display resulted in the colors being too harsh on the eyes.
For property pages, many explorations were done in order to first have the show’s assets fit, but also to make sure those assets weren’t blocking any system titles, or distributing the content tiles. Do we cut off the art with the use of a divider line to avoid any overlapping? Do we fade out the art towards the bottom? Do we not use a fade but arrange the art in such a way to steer clear of any system elements?
We ultimately decided with using a bottom fade. Not all show pages utilized the fade, depending on the show’s assets.
As the work progressed, we were testing daily, having a HD & SD tv next to each other viewing the latest build from Float Left. Testing the colors, font sizes, content tile sizes, titles, timestamps, tile selection indicator, the speed of the selection indicator (did it feel synced to a user’s hand motion when they pressed on the remote).
The Nickelodeon Roku Channel featured 29 shows; full episodes and video clips and a dedicated Episodes page, with show-specific carousel rows. Full episodes were locked unless the user authenticated the account with a TV provider.