Designing a Streaming Music User Experience for TV Screens

Kyle Thompson
Kyle Thompson
streaming music_video_TV_10 foot_10 ft_UI_user experience_cover

Experimenting with a hub for music, video, live shows, and more.

Here at You.i TV, we live, breathe and eat streaming video. We’ve been at the forefront of the OTT revolution since 2012. We’ve closely followed and contributed to some of the big leaps forward in video-centric interface design, especially on TV/10-foot screens.

We’ve been actively thinking of ways our You.i Engine One technology can be applied to other entertainment spaces. That brought us to subscription music services—the other side of the streaming media revolution.

Video and music streaming aren’t that different. Being an artist in 2020 means producing so much more than just music. Artists of all kinds are broadcasting live streams, music videos, acoustic sessions, live performances, video podcasts, and more. This diversified portfolio is great for music fans, but the content is fragmented across multiple services and platforms, making it harder to access/discover.

Music has become a visual medium. Artists need a space that brings together music, video, and fan engagement. With this in mind, we decided to explore what the user experience would look like if we brought all of that content into one place? How could we make it easier for fans to find and watch all of the content being produced by their favourite artists? How could we make that a lean-back, TV experience where the music takes the centre stage of your living room rather than being tucked away in your pocket?

Our UX team and some ambitious developers took advantage of one of our quarterly hack days to put our ideas into practice.

streaming music_video_TV_10 foot_10 ft_UI_user experience_hero

Our goal was to think outside the box; how does the full breadth of music-related content come together in a 10-foot experience?

Our Approach

Although music streaming is not the space we usually work in, the fundamental design process remains the same:

streaming music_video_TV_10 foot_10 ft_UI_user experience_venn diagram

Good design can be defined as the solution that takes into account a specific user, accomplishing a specific task, in a specific context.

The design challenges we usually encounter involve a broad range of users with vastly different interests in content, but over time through accumulated research and our own testing, we’ve found common watching habits and usage scenarios.

The parent who wants to put on TV for their kids. The user looking for something to watch in the background as they cook dinner. The family that wants to wind down at the end of the day. It’s easy to imagine these scenarios being relevant to music content discovery as well.

As smart TVs and interactive TV as a medium has proliferated, user interface patterns and a design language has evolved. Examples of these patterns are rows and columns of cards, and a universal back button to return to a previous page.

We approached this exercise with a few assumptions (and they are big assumptions, but for our hack day we had to start somewhere).

  1. Users will approach music discovery in a similar way to video discovery
  2. A 10ft music streaming app should use the same UI patterns as a 10ft video streaming app
  3. Reducing the friction to start new content increases engagement

With those assumptions in mind, you can see how we can translate tasks, contexts and users from other design challenges to this project.

streaming music_video_TV_10 foot_10 ft_UI_user experience_design comparison

It should be noted, that for a real project with real-world users and consequences, the assumptions we made would be tested and validated before, during and after the UI design process.

The Endless Feed of New Content

Once we have our task, user, and context, it’s useful to identify a pain point for the user or a problem that we can attempt to solve. We started out with a very 21st-century problem: so many artists producing so much content, across so many platforms that it becomes hard to keep up with.

40,000 tracks were added to Spotify every single day in 2019. A fan following a handful of artists, music blogs and publications has YouTube, Instagram, Facebook, and Twitter to check for new content each day. Not only is the content landscape fragmented, but the user is also torn between their phone, tablet, and laptop. Our proposed solution: let’s bring all of this content together and make it the focal point.

Maybe we’re nostalgic for the MTV and Much Music days. Why can’t music and music video content be at the centre of our living rooms again? Instead of relegated to the background soundtrack tucked into our pockets?

streaming music_video_TV_10 foot_10 ft_UI_user experience_feed

We call our solution to this The Feed. A 21st-century combination of your social media feed, youtube recommendations, and a Pitchfork-style front page arranged into something similar to the familiar EPG that we’re used to seeing on TV screens.

Recommended: Modernizing the Electronic Program Guide (EPG)

This interface is based on one of our assumptions; patterns for content discovery of video content translates to music content.

streaming music_video_TV_10 foot_10 ft_UI_user experience_home lander

streaming music_video_TV_10 foot_10 ft_UI_user experience_lander annotated

New podcast episodes, live concerts, streams, interviews, and the hottest music videos of the week are presented to the user as a series of channels. The user can lean back and browse the ocean of new content being in a way that isn’t an endless waterfall of clips, thumbnails, and tweets.

We envision recommendations and personalization playing a large role in this solution. 67% of consumers will pay more for a better experience. 80% of video starts come from recommendations. 91% of consumers are more likely to shop with brands who recognize, remember, and provide relevant offers and recommendations.

We know that 81% of users want brands to understand and anticipate their consumption. We address both personalization and recommendation with the “channels” in the EPG. The user is free to add and remove channels as they wish. The content within those channels is generated to present the most relevant live and on-demand content for that specific user.

Ever since we started designing EPGs, and interfaces for live content, we have wondered how best to recreate good old-fashioned channel surfing. With The Feed, the user gets a preview of any video in the schedule. This lubricates the content discovery experience by reducing any friction from starting or previewing a video.

streaming music_video_TV_10 foot_10 ft_UI_user experience_feed overlays

The content in The Feed is diverse and we’ve designed a details window to take that into account. Metadata is added and removed in a modular way depending on whether the content is a concert, podcast, live stream, or music video.

The Social Media Revolution

streaming music_video_TV_10 foot_10 ft_UI_user experience_live lander

It’s more important than ever for artists to have a relationship with their fans.

Something that artists of all kinds have embraced in recent years—and especially now, during the coronavirus pandemic—is the personal, one-on-one live streams broadcast over social media.

The largest live streaming platform, Twitch, already eclipses Facebook, Hulu, and Amazon in peak US internet traffic. Live streaming is a new medium that creates a conversation between an artist and their fans where feedback from viewers is as important as the artist themselves. This is a fundamentally collaborative form of media.

The problem is live, personal, interactive content rarely escapes small phone screens.

streaming music_video_TV_10 foot_10 ft_UI_user experience_live feed

For the fans, this social and collaborative experience has us hunched over our devices. If the future of online video content is live streaming, the 10-foot experience is being left out. It was a challenge to translate this mobile-first experience to a larger screen. This is a novel form of media on a completely new platform. Our strategy when designing this was to not make any assumptions about what content users want to see.

In the spirit of personalization, we thought the user should have the ability to dictate the player. They can toggle UI elements on-and-off to augment their video with the live chat or with extra metadata about artists and collaborators in the stream. This is one screen in the design we would like to explore further by getting it in the hands of real users. Which features from the mobile experience need to be translated to 10-foot to keep users engaged? Do users even want this content on their TV? These are questions to follow up on in the continuing design process.

streaming music_video_TV_10 foot_10 ft_UI_user experience_live player

Inputting text is always difficult with a remote. One assumption we are confident in is that excluding the ability to chat on the TV is the right move. We know that 88% of users are using a second device while watching TV. We will leave the lean-in activities to a second device and focus on the passive, lean-back experience that 10ft does best.

streaming music_video_TV_10 foot_10 ft_UI_user experience_live player annotated

Content Discovery on the Big Screen

streaming music_video_TV_10 foot_10 ft_UI_user experience_content discovery

In keeping with making music discovery easy and fun, throughout the app wherever an artist or song is tagged in a video, we link out to a page focused on the artist, their music, and all video, images, and audio they have been tagged in.

We kept this page simple, using the familiar rows and lists of content cards that are ubiquitous in 10ft UI design.

streaming music_video_TV_10 foot_10 ft_UI_user experience_discovery annotated

Our concept app is a third-party music discovery tool and content aggregator. We designed it to be platform agnostic. On the artist page, we included links to quickly add, follow, or favourite the artist on whichever streaming platform the user preers.

From there the journey of falling in love with a new artist continues.

streaming music_video_TV_10 foot_10 ft_UI_user experience_discovery scroll

In Conclusion

Streaming has completely revolutionized the music industry. The sheer amount of new music that is now available to us and the convenience of accessing it has made music discovery something you can do all day long. Somewhere in the process, the video and visual part of music has become trapped in our phones.

As the media landscape continues to evolve and live, dynamic, and interactive content becomes more common, we think restoring the marriage of music, video, and TV can be a part of that communal aspect of music.

This new concept was also a fun experiment for our design team, testing our well-established UI patterns with new content, and challenging our assumptions of how users consume content. We can see this concept being used by the biggest players in streaming, like Spotify, Pandora, Deezer, and Apple Music. They are undoubtedly thinking about the user problem we’ve highlighted above and a worthwhile solution.

Bringing content to every platform, and tailoring the experience to new formats, use-cases, and contexts is what we do best. We think the world of music is ready to come home to the TV again.

Here’s something similar we think you’ll enjoy.