Vevo

Vevo tvOS

Last November we collaborated with Vevo to bring their new Apple TV app to life, extending the designs for the latest iOS app to a lean-back, 10ft experience. It was a great opportunity to reimagine music television and to design using high-fidelity prototyping and motion. We designed the product around what we expected the capabilities and sensibilities of the 4th generation Apple TV hardware to be pre-launch, using a channel-based product model that has room to expand and brought novel ways to quickly interact with content to the platform.


Music TV heritage, Apple TV technology

To better understand the requirements of Vevo’s new Apple TV app we carried out an audit not only of where we can see Apple TV enabling new possibilities in design and experience, but also of the heritage of music television and what parts could be taken forward to a new interactive service.

Music Television

Continuous playback defines music television. There may be adverts, VJ’s and supporting content between, but it should always defer to offering music videos to the viewer without their direct intervention.

The future of TV may be in apps, but the heritage of channels as a way to discover and brand content is one that is worth taking forward. Whether personalised or broad, channels are a quick way to pivot across vastly different content and enjoy what you find.

Large, bold on screen graphics are an important part of the packaging of a channel, and integral to a lean back TV experience. This is one area in particular we see the current Apple TV typography and design language lacking.


Apple TV

The capacitive touch Siri Remote is far more sensitive and nicer to use than any of the other smart TV remotes we’ve tried on the market to date. This shouldn’t be surprising given Apple’s years of experience perfecting touch control, but it made us much more confident to lean on it as an input method.

High powered graphics processing enables the kind of video and interface effects that we’ve previously considered out of bounds for modern set top boxes and smart TV’s. Live blurring content, colour picking in real time and animation on top of video all become part of the toolbox when you’ve got the power to run them at 60fps over video content.

Parallaxing cards are one of the strongest visual flourishes on the platform. The way they offer direct feedback to the remote and the sense of physicality is one that we wanted to push further and use as part of a direct interaction mechanic within the app.


Vevo Channels

Vevo’s content offering isn’t just limited to music videos , and the tastes of its viewers isn’t just limited to the top 100. We had to design a model that could start out small and scale with Vevo’s ambitions for their TV service.

To solve this, we built the initial app around four content channels, that offer routes in to endlessly playing out content. Vevo Top Videos is made up of content from the hottest artists, made available to all users of the app. Vevo Favourites is a channel that allows you quick access to your favourite artists and tracks. Vevo Spotlight is your route into finding new music based on your taste. Tailor it by favouriting tracks you like and skipping the ones you don’t. Vevo Watch Again is the last of the new content channels, allowing a quick route back in to watching history.

This initial offering is a deliberate scaling down from the huge amount of genre channels and surrounding content of previous iterations, but also sets the stage for Vevo to build it back up with a stable of branded channels and personalised content that exceeds expectations.


10ft Interface

Having a product model that can work with Vevo’s content library is meaningless without building an interface that allows the user to seamlessly access those channels. This means taking the key design principles of TV interfaces: Clear legible type, large content hit areas and a clear point of focus, and applying them to a device that suits quick swipe interactions.

 

We took the parallaxing cards and bold text of the standard TVOS interface elements and dialled it up, taking full advantage of the rich artist imagery used in the iOS experience and putting them on full height cards that are easy to swipe across using the Siri remote. This kind of fuzzy navigation and lower accuracy interaction feels like what the remote was made for.


Quick Content Interactions

Once the user has entered into content, we wanted to enable them to quickly interact with that content, whether it’s favoriting the video, replaying it before it ends, playing something else or seeing what’s coming up within that playlist.

To allow quick access to these actions, and to take full advantage of the Apple TV’s hardware, we came up with the Interactive Slate: an interactive overlay that’s brought up by simply resting your thumb on the capacitive touch pad. Once opened, the user can swipe and click to quickly action the content that’s playing.

 
 

This pattern of displaying an interface over what’s playing is not one that’s currently established in Apple TV’s documentation, an intentional decision on our part to try and push the possibilities of the platform. One of the biggest challenges of designing for Apple TV right now is that aside from games, nobody is putting out apps that do anything other than the basic interaction patterns.

These kind of hardware-dependent interactions are difficult to get a feel for and refine without trying them out for yourself, so we built a tvOS native prototype to dial in the feel of the thumb press, and how to make the interface react to moving the thumb around the touchpad: our original solution used a similar tilt to the parallax cards, which Vevo then took further to include the previews of the previous and next tracks.


From Vision to Reality

Since our initial 4 week project looking at a vision for the Apple TV app, Vevo took it further and filled out many of the details of the product that we simply couldn’t cover in the time available. An intuitive link between iPhone and TV makes it really simple to sign in and set up an account. Favorites are quickly browsed using large circular crops of artist photos. The channel cards beautifully parallax and shine as you swipe over them.

The Vevo Apple TV app as is now available is one of the latest in a series of steps by Vevo to build a service that can stand alone alongside their other video platform offerings. As it grows and matures, we look forward to expanding upon the initial thinking that defined the product at launch, and to see how else the Apple TV interaction model and patterns can be pushed to make a compelling TV experience that’s unique to Vevo and unique to Apple TV.

The new Vevo app requires a fourth-generation Apple TV and is available at no charge in the tvOS App Store. To download the app, search for “Vevo” in the App Store on your Apple TV.