Xfinity Flex Visual & Editorial Direction

Flex is the new streaming platform from Xfinity. It offers customers a way to streamline and aggregate all of their streaming apps into one easy to use user-interface. Personalization alongside a world-class editorial team means that there is never a lack of content for “cable-cutter.”

Flex-Homescreen.png

Fresh, Vibrant, Affordable

Flex needed to differentiate itself from X1. Internally we focused on ways to describe Flex, it was fresh, vibrant, affordable. We needed a brand style that would be flexible across multiple providers, ranging from premium streaming services to free services. We took what we learned from the X1 editorial and stripped it back to it’s core.

Exploration

Early roughs designed within the 4x3 ratio

Early roughs designed within the 4x3 ratio

Early on in the exploration phase we found ourselves spinning our wheels. We realized that we kept designing within the boundaries of the tiles rather than doing our best to break out of the sizing we’ve become so used to. These early concepts had us focusing on leaving enough space for text. Rather than finding the delicate balance of letting text and art merge and come together.

Early concepts using shapes found within the Flex ecosystem

Early concepts using shapes found within the Flex ecosystem

We decided to take time and just create with no bounds. If these didn’t fit within a tile properly, we could adjust from there. The idea was finding ways to incorporate the larger brand of Flex into each and every tile to make each one feel unique. We experimented with everything from shapes of the hardware to letting the color of the content bleed through the tiles.

Applying these styles to a 16x9 ratio

Applying these styles to a 16x9 ratio

Close! We started to play with shapes and how they could be affected by the color of the content that it housed. Something felt a bit off about containing content within an already contained tile. So our final exploration looked at how we could play with colors and content only.

Balanced. As All Things Should Be.

The next step in the editorial evolution of Flex

The next step in the editorial evolution of Flex

The one constant that always remained while designing and working on the Flex platform was, how do we get content in front of people instead of them having to browse endlessly? This concept of finding something through all the noise started to play into this final round of design. What if through all this noise, and color the content just stood alone? The blur effect was already something that was used throughout the system, so what if we blurred gradients together, letting some overlap the art, but then the characters remain sharp and emerge from the fog? We started to extend this concept all throughout the system.

Genre tiles within the Flex system

Genre tiles within the Flex system

This is a system that can be extended throughout the system. When appearing above or below a row of content that can often times be busy from all the cover art, these act as a night way to focus and “relax”.

New Ways to Promote Content

Example set of our new 4x1 tile ratio

Example set of our new 4x1 tile ratio

We noticed that a situation that came up on X1 often times was a promotion that deserved to be promoted at the top of various sections or called out in a meaningful way. What happened a lot was a row of three or four tiles would take you to the same destination. This wasn’t good practice, unless there were 4 specific destinations in a promotion, why would an entire row take you to the same location.

Well, welcome the 4x1 ratio tile. These are used in very special moments, to call out a large promotion or to market a brand new show or season. The possibilities are endless and really allows an elegant visual break as you’re scrolling through the content.