Adobe Creative Cloud

Ask the UXperts: How to Design UX and UIs for Streaming TV

Streaming TV services like Netflix and Hulu are growing much faster than their cable and satellite TV counterparts. In 2015 alone, video-streaming services grew 29% while traditional cable grew only 3%, according to Business Insider. This highlights the huge potential of streaming.

Many companies have joined the streaming fray. Earlier this year, YouTube launched YouTube TV, where viewers get their fill of shows, news, and live sporting events. Streaming isn’t limited to TV, either; Amazon owns Twitch, a live-streaming platform where gamers can stream their video games to a huge audience.

With streaming gaining in popularity, we interviewed two UX designers who work at YouTube TV and Twitch, respectively, to get their perspectives on succeeding in this space.

Taylor Ho

Neil Cormican is the Design Manager for YouTube TV and has an extensive design background that includes working for Cisco’s TV technology division for a decade before moving on to YouTube.

Taylor Ho is Twitch’s Senior UI/UX Designer on its Premium Content Team, whose affinity for design and UX began at a young age–first as a hobby and now as a rewarding career.

Designing for Your Audience

The mantra both designers use is ‘understand your audience.’ That’s the basis of good design.

As Neil Cormican puts it, “Do not ignore what users already know.”

Neil Cormican

Doing so leads to UX problems. He and his team discovered this firsthand when they initially set out to find an entirely new way for users to navigate TV via YouTube. Soon after, they realized users already had a firm idea of how to use TV; challenging this by introducing new navigation would’ve created many UX problems.

“Releasing something that totally upends TV could have backfired on us,” the designer said.

Instead, Cormican and his team gave users what they wanted: the familiarity of YouTube with the ease of use of a TV.

YouTube TV

 

In Twitch’s case, Taylor Ho has found the way the user consumes content is key. Twitch users are either passive or hyperactive in their posturing while watching online streams.

“With the type of content my team focuses on, our audience tends to either kick back and watch from afar or interact specifically with one another (versus who or what is in the video player),” said Ho.

Twitch Donation Portal

Excess and a Lack of Predictability

Streaming services are still a new beast, which explains some of the challenges facing designers in creating their UIs. One of the bigger challenges YouTube TV faced was bringing users live content without being overbearing. Using characteristics of the TV-viewing experience, like letting users naturally find interesting content, helped overcome this challenge.

“We really wanted to build the serendipitous nature of TV into the product, helping our users stumble into great content. Our Live TV guide helps to achieve this with simple scrolling through the channels that mirrors channel surfing on a TV,” said Cormican. “Another feature we used throughout the service are the video preview thumbnails indicating which shows are Live at present. This strategy has been very successful as the majority of viewing in the service is Live content.

YouTube TV on Mobile

Ho’s biggest design challenge is the unknown. His methods for dealing with this include trial and error and learning from the products he creates.

“I’m learning to minimize thrashing by taking a more active approach. I do this by researching just enough, designing what makes the most sense, getting it front of the right people, and shipping it. Then, I learn from the data I set myself up with and iterate from there. Or just toss it altogether,” according to Ho.

Twitch User Flow

Consistency Across Devices

Streaming services are a blessing for consumers, as they can watch their favorite content on various devices in different locations. This can be a curse for the UX team, as they must ensure consistent design so the UX is easy to use across all devices.

In YouTube TV’s case, using common layouts on all devices worked:

“Although each device has different orientation, screen size, or input method, it was important to ensure that the high level screens were in familiar places, home feed in the middle, DVR on the left and Live is on the right,” said Cormican.

His team used content groupings—episodes are grouped according to recentness, continuity, and amount watched—for better organization. This reduces cognitive load on users, such as offloading repetitive tasks, which UX experts the N/N Group deem essential to better UX.

The Future of Streaming: Live Content and Automation

Cormican and Ho agree that streaming’s future is bright, with live content and automation being huge selling points.

“Live will continue to play a big role moving forward. Many of our viewers have signed up with us because we’re providing most of their live sports and news at a fraction of their prior cost. We expect streaming services will evolve to build on these types of content,” said Cormican.

Ho believes the future is about letting users consume content and information in ways meaningful to them, which is where automation comes in.

“Think automation. Real-time language translation based on what’s live. Pulling up another streamer’s avatar if he or she enters into view. You could literally witness two major streamers cross paths and battle it out!”

Want to Be a UX Designer for Streaming Services? Be Humble and Learn

Design is subjective. Users won’t always align with what designers think is the perfect UI or UX! You can’t let criticism get to you.

“Feedback can sometimes be tough to hear, but it’s important to take it onboard, use it and learn from it,” says Cormican.

Learning never ends when you’re a designer. Go far in the industry by expanding your skillset to better relate to and command respect from your team.

“Build your skills as an interaction, visual, and motion designer and learn how to code and prototype. Teams react better to feedback from a manager who can identify and understand what they do,” he adds.

Adobe XD is your one-stop UX/UI tool for designing, prototyping, and sharing website and app prototypes. Its intuitive design makes it easy to learn and powerful to master. If you’re looking to boost your own UX skills and get started with Adobe XD, check out these tutorials.

Uncategorized, UX/UI Design

Design. Prototype. Share. All in Adobe XD.

Go from idea to prototype faster with Adobe XD, the first all-in-one tool for creating and sharing website and mobile app designs.

DOWNLOAD

Join the discussion

Join the discussion