Introduction
This project has been the most exciting and rewarding experience thus far in my career. The project started in 2018, when I was leading the Living Room design efforts for Google Play Movies & TV. I had just completely redesigned the TV IA + visual design spec for Google Play and had a unique perspective on what it meant to design for a DPAD driven device.
Around that same time, there was a group within Android TV that thought Google could be offering more to its users in the TV space. I moved over to that team almost immediately as the first IC designer. The team was only a few people and it was an incredible learning experience. I was responsible for the design of every single page of the operating system, all the way up until we shipped the first version of the product for internal testing. There was no Google wide design system for television, so I had the freedom to design the structure that made the most sense and adapt the Material design system to fit large screens.
When the product started to receive more traction internally, we built out a more robust design team to help with the unsustainable amount of screens I was designing for. My role transitioned from being the only designer on the entire project, to being the Visual Design Lead for Google TV and a Design Lead for the overall media experience. My main responsibilities were a) design + build the best streaming device available and b) develop the Google TV visual design system to be used by other designers/teams at Google.
Google TV officially launched on September 30th, 2020 with the new Chromecast and was met with wildly positive reviews. It was rated the best overall streaming device on day 1, receiving an 8.5/10 rating by the Verge, and sold out on the first day at most retailers.
This project has been massive and there is so much to talk through. I've selected a few of the larger focus areas to explain below, but there's much more to tell.
I feel incredibly lucky to have had the opportunity to work on this project with some of the the most talented and inspiring coworkers on the planet.
Around that same time, there was a group within Android TV that thought Google could be offering more to its users in the TV space. I moved over to that team almost immediately as the first IC designer. The team was only a few people and it was an incredible learning experience. I was responsible for the design of every single page of the operating system, all the way up until we shipped the first version of the product for internal testing. There was no Google wide design system for television, so I had the freedom to design the structure that made the most sense and adapt the Material design system to fit large screens.
When the product started to receive more traction internally, we built out a more robust design team to help with the unsustainable amount of screens I was designing for. My role transitioned from being the only designer on the entire project, to being the Visual Design Lead for Google TV and a Design Lead for the overall media experience. My main responsibilities were a) design + build the best streaming device available and b) develop the Google TV visual design system to be used by other designers/teams at Google.
Google TV officially launched on September 30th, 2020 with the new Chromecast and was met with wildly positive reviews. It was rated the best overall streaming device on day 1, receiving an 8.5/10 rating by the Verge, and sold out on the first day at most retailers.
This project has been massive and there is so much to talk through. I've selected a few of the larger focus areas to explain below, but there's much more to tell.
I feel incredibly lucky to have had the opportunity to work on this project with some of the the most talented and inspiring coworkers on the planet.
Designing for TVs
Designing for TVs is unlike designing for any other form factor for a number of reasons:
01. The input method for all of the interactions is a DPAD remote. This means there needs to be an obvious, predictable focus and all grids need to be optimized for UP/DOWN/LEFT/RIGHT navigation.
02. The screen is large and 10ft away from the user, so scale and density needs to be very much intentional.
03. The device is a communal one and often on display to multiple people at once. It needs to be aware that it lives in someone's home and respect that.
01. The input method for all of the interactions is a DPAD remote. This means there needs to be an obvious, predictable focus and all grids need to be optimized for UP/DOWN/LEFT/RIGHT navigation.
02. The screen is large and 10ft away from the user, so scale and density needs to be very much intentional.
03. The device is a communal one and often on display to multiple people at once. It needs to be aware that it lives in someone's home and respect that.
For You, Movies, TV
This is the meat and potatoes of the operating system and where the users spend the majority of their browsing time. The For You page is the home of the experience and designed to be a one stop shop for content browsing. The page uses Google smarts to understand user preferences, subscriptions, and interests to generate recommendations from all of your streaming services. The recommendations are hyper curated and awesome, so much of the design challenge was framing those recommendations. The Movies and TV tab are structurally similar to For You, but focus on a more constrained media type.
The overall content structure:
Featured module - The top cluster in each page, used to surface featured content.
The overall content structure:
Featured module - The top cluster in each page, used to surface featured content.
Immersive cluster - This cluster styling is used sparingly (once or so per vertical) to emphasize a specific cluster. It leverages a background image and adds a bit ore metadata for the user to snack on. It follows the system wide color tinting based on the focused card.
Standard clusters - The majority of our clusters leverage a variant of the standard cluster. The standard cluster leverages bold type, to accentuate the importance of the curation, and a color extracted glow to shift the spatial lighting and increase focus.
Long press menus - All the content can be long pressed to show more options
Movies, Shows, Apps Featured module - All the content tabs, aside from For You, have a featured card treatment. This lets For You shine a bit more and grounds the other tabs in a grid.
Detail pages
Once a user saw something interesting, they need a destination page that gives them all the necessary information to make an informed watch decision. The detail page is designed to surface the high level information, access to the trailer, important action, ways to watch, and other related pivots.
Movies detail page:
Movies detail page:
TV detail page:
Lighting and color
One of our main product pillars was to leverage a dark theme (being respectful to the environment the screen was in) and to act as a prism for the content we showcase. Instead of creating an experience that was heavily Google branded, we wanted to let the content shine and be as immersive as possible. This, plus a need for a clear/logical DPAD focus model, led us to create a lighting system based around the focused card.
We use color extract to ambiently change the light in the UI based on remote's resting focus. Once a user lands on a card, that card will illuminate to 100% opacity and radiate a spotlight of color. This color is most intense coming straight from the card, but it also affects the tint of the background and the type around it.
The overall goal is to allow the UI environment to subtly tailor itself to the focused content. The end result is a space that feels much more suited for the content it frames.
We use color extract to ambiently change the light in the UI based on remote's resting focus. Once a user lands on a card, that card will illuminate to 100% opacity and radiate a spotlight of color. This color is most intense coming straight from the card, but it also affects the tint of the background and the type around it.
The overall goal is to allow the UI environment to subtly tailor itself to the focused content. The end result is a space that feels much more suited for the content it frames.
Visual system
I built out the entire visual design system for Google TV, adapting the material design language to match the form factor and TV design pillars. The end goal was a content forward/, DPAD centric flavor of Material design.
The grid - Given the DPAD input method, a strong visual grid was essential. I developed our grid taking into account the ideal 10ft content density, focus, and TV screen overscan.
Typography - The type system was built off of Material, but intentionally molded to fit the TV. We opted to go a bit larger in many of the screens, as we felt it acted as a subtle branded moment throughout the system.
Motion - I built out our motion design library and all of our major transitions, this consisted of a set of custom curves and several specific transitions.
The grid - Given the DPAD input method, a strong visual grid was essential. I developed our grid taking into account the ideal 10ft content density, focus, and TV screen overscan.
Typography - The type system was built off of Material, but intentionally molded to fit the TV. We opted to go a bit larger in many of the screens, as we felt it acted as a subtle branded moment throughout the system.
Motion - I built out our motion design library and all of our major transitions, this consisted of a set of custom curves and several specific transitions.
