Roku was a small company when I joined. Design, product, and engineering teams worked closely, made decisions quickly, and were able to do a full re-design of Roku hardware/software in under a year.
As we developed the Roku OS, I would validate UI quality on device with a variety of TVs. This was important as what showed up on device looked very different than what appeared on my laptop. Each time I wanted to update the UI design (graphic, layout, font size, color, etc.) I would deliver the change to an engineer and wait until the software build completed (overnight) and review the next day. It was slow and cumbersome process.
Recognizing the issue, I worked with our engineering architect to speed up development. We leveraged a technique called side-loading, that allowed a developer to quickly load their application onto a Roku device for testing. Side-loading would allow you to override properties that already lived in firmware (which is what required to overnight update process).
Since we were early in overhauling the platform, the engineer restructured the codebase so that all UI information (graphics, color, layout, fonts, etc) would come from a central location. We then developed an XML structure to organize and store these UI properties. As long as the original property was stored in this firmware XML, I could side-load a modified XML file to overwrite the default. With this accelerated workflow I was able to design the UI on device, without engineering dependency.
In addition to figuring out how to manage UI on device, I was responsible for designing the default look and feel of the product. Roku loves purple, and our CEO was expecting that would be reflected in the UI. I was pushing for a more modern black/white/chrome look. The marketing team at the time was running a campaign that incorporated brown/earth tones, and hoping to see that represented in the product.
I comped up these 3 directions, and presented them in an executive review on device, using my side-loading theme technique. All three directions were well received. Our CEO preferred the purple theme that we ultimately set as the default. It was suggested that we ship all 3 and create a device setting that allowed the user to customize the appearance of their UI. Since side-loading was just a shortcut to install a channel, we were easily able to turn our XML overwriting tool into a user setting on device. Themes were born and appeared on the first revised version of Roku OS.
As the product owner, I continued to develop a suite of products around this capability of customizing the UI through themes. Though actual numbers are not shared publicly, there is now a dedicated team at Roku devoted to supporting theme takeovers, resulting in millions of dollars in revenue annually. My ambition of creating a tool to speed up UI development officially turned into a significant revenue generator for the company.
Here are a few early examples that allowed the themes product take shape:
Shortly after launch, the Lego movie was coming to Roku. We thought it would be fun to update the UI so that looked like it was built with Legos to correspond to the event. Though it was not an official sponsorship, it showcased the advertising potential of combining our home screen ad placement with a themed background.
After seeing the Lego placement, HBO approached our advertising team about a takeover of the UI to correspond with the next season of Game Of Thrones. Inquiries continued from top tier companies such as Netflix, Disney and Hulu, ultimately turning into a 7 figure advertising opportunity as the Roku user base grew.
Roku partners with TV manufacturers for RokuTV, the #1 smart TV platform in the US. A key differentiator for the RokuTV platform was the ability to customize UI to represent the manufacturer's brand, a capability no other platform had. I worked with these brands to develop a look & feel for their UI.
