advertisement
advertisement
  • 06.14.17

Hulu’s New UX Is Beautiful–And Frustrating

Inspired by the light and space artist James Turrell, Hulu reinvents its user experience for the post-cable world. But it still has a ways to go.

Hulu’s New UX Is Beautiful–And Frustrating

Cable killed the television antenna and now it too is facing obsolescence.  Streaming services are slowly chipping away at cable’s customer base, as they upend how we watch our favorite shows and attempt to reprogram how we watch television.

advertisement

Last month the streaming service Hulu launched a beta version of Hulu Live, an ambitious cable alternative that lets viewers tune into live shows from networks like CBS, FOX, ESPN, Bravo, CNN, and more for $40 a month–a fraction of the cost of a typical subscription. Viewers can access content on their mobile devices and on their televisions, and Hulu Live gives subscribers the option to record shows for later viewing. The idea is to bring users the convenience of anytime, anywhere streaming with the instant gratification of live television.

When Hulu launched about 10 years ago, it was in uncharted territory, but now it faces significant competition. Companies like Amazon, Netflix, and Youtube are all vying for our attention and, aside from original content, are all more or less offering a very similar assortment of shows. What might make one service more appealing than another boils down to user experience.

“Given that we have so much competition, we thought, ‘How can we differentiate [ourselves]?'” John S. Couch, vice president of UX and design at Hulu, says. “And obviously experience was a great way to do that.”

The project to revamp its television watching experience began in January 2016. At the time, Hulu only had six designers on staff. The company beefed up its design team–it has over 40 people now–and consulted with the experience design agency Huge. The result is a totally new way to access Hulu’s shows. But does it work?

An Antidote To Information Overload

One of the biggest headaches with watching shows–whether on cable or through a streaming service–is finding what you want. There are thousands of options out there. The balancing act becomes about giving people what they want while also serving up new things. It’s essentially an organizational challenge whose solutions are stuck in the antenna era, Couch argues.

If you log into a streaming service today, you’re likely to see row after row of different movies or shows. The grid setup is what you’d see in a printed TV Guide (remember those?), which eventually transferred over to electronic program guides on cable. It’s also a lot like how movies were organized in video rental stores (yet another relic from our not-so-distant entertainment past). Even though technology has advanced, we’re still stuck using archaic ways of organizing information.

advertisement

“At Blockbuster, you had rows and rows of content, and it was conditional on you to find what it is you want,” Couch says. “You’d spend hours walking around trying to find the one thing you’d like. This paradigm was brought into the Hulu design initially–the idea that the more we show you, the better it is for you.”

Hulu did away with the grid setup on its home screen. Instead, it serves up viewers a personalized assortment of shows–a product of user-set preferences and a machine-learning algorithm.

The first time you sign into Hulu Live, you’re asked to create a profile. The site leads you through a series of prompts to figure out what’s most important to show you. First, it asks you what genres you like from a list of general categories like crime dramas, British comedies, stand-up specials, reality TV, and so on. After checking off the ones you like, it then asks you to add your favorite shows and then your favorite networks to your profile.

Once you finish the one-time onboarding process, the site creates a custom home page, which is divided into sections for your channels, your shows, and then for more generic categories like news, sports, and themes the algorithm thinks you’ll like. You only see one category at a time on your screen and scrolling (or swiping, if you’re using on a mobile device) right lets you cycle through them. Scrolling up lets you see what’s in each category.

For example, TV includes the shows that you picked up top plus a few suggestions as you scroll down. When I tested the account, I said I liked Law & Order, and that was first on the list since that specific show was added to “My Stuff”– how Hulu designates favorites that can include movies, shows, sports teams, and networks. As I swiped up to see what else was in the category (I tested this on an iOS app), the algorithm suggested Seinfeld because I ticked the box for “acclaimed comedies” as a general category I liked.

The more you interact with content on the site, the more the algorithm learns about you and then offers up better suggestions on new content to watch. And if you’re looking for a specific show, you can use a search bar to find it.

advertisement

“We’re trying to simplify cognitive overload,” Couch says of the approach. “On one level you have to show you have a deep catalog, and on another level you have to show what’s relevant to the human being as they’re consuming and grokking all this information.”

A Look Inspired By James Turrell

In addition to simplifying how viewers access content, Hulu’s design team also wanted to unclutter the UI, bring consistency to its presence, and create a recognizable identity.

When Couch and his team began to formulate a new identity, they first thought about what it was they were offering, and in a word it was storytelling. He thought back to how that has changed over the generations, from how people thousands of years ago would gather around a fire to hear shamans speak to how contemporary cultures now congregate around screens. The consistent factor was light.

Couch wanted to bring light in as a metaphor, which got him thinking about the work of light and space artist James Turrell.

“He uses light to create an immersive experience,” Couch says. “That’s what we wanted–an immersive, cinematic, and personal experience. What we’re doing is setting a stage and placing users in a space, and it becomes their experience . . . The brand identification is almost this color field of light.”

Hulu’s UI uses gradients heavily throughout, which solved a few problems. First, the designers wanted to use full-bleed stills from the shows on each screen, but the quality of artwork varies from show to show. Having a gradient overlay unifies them. The designers worked with a developer to create a custom color-picking formula that analyzes the dominant colors in each image to create a custom gradient based on those hues.

advertisement

Secondly, they wanted to use simple, white type that could work on print, web, and mobile and that the marketing team could use on its collateral. Applying a gradient overlay also meant that the type would be legible since it would always have a solid background. The algorithm that selects the color gradient’s hue analyzes the image it overlays to figure out how saturated it needs to be to make the type show up.

Is It Too Minimal?

When I used the app, it was mostly to watch the NBA playoffs, so I wasn’t interacting with the content too heavily. It was convenient enough for me to find the live stream since it was the first thing in the sports category. But as I got more curious about what was on offer, I found it difficult to figure out what exactly I could watch.

The onboarding process briefs users on the site’s organization by swiping through a few screens that tell you what the toolbar symbols mean. On this portion, it tells you to swipe to the left and gives you visual cues to do so. It essentially trains you to think horizontally. However, a lot of the content is discoverable through vertical swiping. I also had to poke around to figure out where the networks were, how to see what shows were available on the networks, and what live options there were.

“The younger generation of people–like those who are using Snapchat–are very much by nature okay with UX that is not intuitive,” Couch says. “Younger people tend to explore without having any frustration and have some delight in finding some ways of exploring that’s not being explained to them.”

Couch framed rooting around on the site as part of the discovery process, though I’m not sure if people who are trying to get after something specific will view a confusing experience with delight. Hulu believes that the audience who’s using its mobile app will be younger, on average, than those who use their television interface.

It was also confusing to figure out what was on live TV. The mobile app has a section for “Live” under the TV shows category, and it’s more or less a continual scroll of shows that are playing right now. The networks I said I liked showed up at the top of the list, but an electronic program guide (EPG) would’ve come in handy.

advertisement

This problem came up during user testing, too. “There was more concern over the lack of the EPG than I expected,” Couch says. “One of the first questions people ask is, ‘Where’s the EPG?’ They’re used to that Excel spreadsheet. What was interesting–and not to be ageist–but it was people who are older who were wondering where the EPG was. It’s a known entity for going through information.”

To work around that problem, Hulu designed what it calls a fliptray. Viewers can click on it while they’re watching to see a ribbon of what’s on at the moment–organized by network alphabetically–and what’s upcoming.

Hulu expects to fully launch its live TV service later this year and will keep refining and tweaking the experience. “Hulu should be changing as the audience changes over time; we shouldn’t have a launch-and-leave mentality,” Couch says. “We should be constantly moving and iterating to make something that makes us feel relevant to the current audience.”

Hopefully that means a better program guide.

Save

About the author

Diana Budds is a New York–based writer covering design and the built environment.

More

Video