O'Reilly TV apps
Roku and Fire TV
Provide O’Reilly online learning platform subscribers with expanded device offerings for e-learning at home.
Creating a New Digital Experience
With the global pandemic, our team anticipated a slight decline in mobile usage of our platform due to our users’ lack of travel and more frequent use of desktops and laptops at home. We sought to create a new product offering to allow our e-learning subscribers a way to comfortably view our video content through smart tv streaming apps.
The smart tv apps are aimed at current and future subscribers, both B2b and B2c, who spend hours consuming video content to learn about new technologies and level up their career skills.
This project required a quick pivot from our usual mobile app work and adaptation of new tech & design skills to pull off. I worked with two remote teams of mobile engineers and PMs to design and build apps for both Roku and Fire TV.
My role for this project consisted of research, learning 10 foot UI design and guidelines for the respective frameworks, initial concept design, UX, visual design and interaction design.
My role for this project consisted of research, learning 10 foot UI design and guidelines for the respective frameworks, initial concept design, UX, visual design and interaction design.
Overcoming Challenges
It was a challenging project from the start because none of the team members had any prior experience designing or developing tv apps, so there was quite a learning curve on top of a tight deadline.
Some of the biggest challenges were optimizing our Android app content for 10 foot viewing, when it is typically viewed on tablets and mobile devices. While the iOS team built the Roku app from scratch because we were unable to reuse our existing iOS app code base in the development.
On the design side, another constraint I faced was the inability to prototype a tv experience using standard prototyping software. We created a workaround by architecting makeshift dev environments, by side-loading the apps on the devices and pointing mobile phone cameras at them to capture the screens.This allowed us to test the designs in real-time on the actual streaming devices as development changes were made.
Some of the biggest challenges were optimizing our Android app content for 10 foot viewing, when it is typically viewed on tablets and mobile devices. While the iOS team built the Roku app from scratch because we were unable to reuse our existing iOS app code base in the development.
On the design side, another constraint I faced was the inability to prototype a tv experience using standard prototyping software. We created a workaround by architecting makeshift dev environments, by side-loading the apps on the devices and pointing mobile phone cameras at them to capture the screens.This allowed us to test the designs in real-time on the actual streaming devices as development changes were made.
The Process
We kicked off this project in April 2020. I was initially tasked with designing proofs of concept for Roku and Fire TV. I immediately set out to learn the necessary skills to carry out this project.
I got up to speed quickly and began the in-depth user experience work to translate how a user interacts with our platform on a touch-screen mobile device into navigating an interface via remote control from a distance.
I got up to speed quickly and began the in-depth user experience work to translate how a user interacts with our platform on a touch-screen mobile device into navigating an interface via remote control from a distance.
There was continual testing and iteration on the functionality of the interface for both devices.
Once we arrived at intuitive and easily navigable experiences, I started on the visual design. Since smart tv apps were a brand new product offering, I was not beholden to our outdated branding and instead used this project as a playground for rebranding our apps.
This holistic task included not only updating our color palette and typography, but also creating optimized assets for television resolution, writing ux copy for error and empty states, designing splash screens, icons and animations.
Our company rebrand guidelines were a starting point for this work, however the colors needed to be tweaked for product use and accessibility. I partnered with our Senior Product Designer in charge of our design system to work through these palette updates. Once we felt satisfied with the improved colors, we collaborated with marketing to make them official.
I also decided to utilize the animal imagery O'Reilly is famous for on our book covers, to add charm and visual interest to the preview areas at the top right of the screens. This decision was based on some technical constraints.
We were very limited in the images we can pull from the api. The extent of that being cover images and video players. We needed something general and overarching to fill a preview area at the top of the browse screens when a piece of content is selected.
This was a perfect branding opportunity to bring in our new color gradients and the animals in a striking way. I composited the animal and gradient images together and exported them for optimal tv viewing. In order to keep the file size of the app down, we set up a separate image service that pulls the images in on a timed loop.
Sample screens for Roku
Video player UI for Fire TV
The Results
There was a lot of exciting discovery happening with this project. Ongoing daily communication with the engineering squad was essential to its success.
Every day we were taught a lesson, whether it was technological limitations of the platform, new ways to showcase content, or solving a challenging UX flow.
I acquired a foreign skillset and directed the UX on a project completely outside the norm.
We received overwhelmingly positive feedback from stakeholders in anticipation of their launch.
Our beta releases of our Roku and Fire TV apps are slated for the end of August and beginning of September 2020.
Every day we were taught a lesson, whether it was technological limitations of the platform, new ways to showcase content, or solving a challenging UX flow.
I acquired a foreign skillset and directed the UX on a project completely outside the norm.
We received overwhelmingly positive feedback from stakeholders in anticipation of their launch.
Our beta releases of our Roku and Fire TV apps are slated for the end of August and beginning of September 2020.
