How We Redesigned the WSJ Apple TV App
by Marta Jakubanis and Adam Fisher-Cox
At the Wall Street Journal, we create and distribute content in many formats across different platforms. Video journalism has been a major focus in the newsroom, not just because of the uniquely compelling format, but also because our videos are offered outside of the paywall and able to reach a wider audience.
While much of our video consumption happens on web, whether in articles or in the Journal’s video center, a major part of the ecosystem are set-top devices such as Roku, Amazon Fire TV, and Apple TV. Earlier in 2019 we refreshed our Roku app — a project that was extremely successful, increasing our video starts almost five-fold — and in June we kicked off a complete overhaul of our Apple TV app.
Our goal was to rebuild it from the ground up to take advantage of the immersive touch-based navigation of the latest Apple TV hardware, and to focus the interface on easier discovery of our excellent video journalism.
The new Apple TV app features a completely redesigned user interface that marries The Wall Street Journal’s typography and colors with the native immersive elements from the tvOS (Apple TV operating system) that are instantly familiar to users.
Video titles were a central challenge to creating an app that felt like it belonged alongside the native apps on tvOS, the Apple TV’s operating system. Apple’s suggested interface styles assume cover art for TV series and movies that feature the title of each piece of content within the image. For The Wall Street Journal’s videos, however, the title is often much longer and the image more complex than shows developed by many broadcast, cable or streaming services.
We explored a number of different card options (below) to find a visual solution to displaying titles along with video thumbnails in a way that felt natural on tvOS, without creating an impression of an overwhelming amount of on-screen text.
These explorations also helped us find the right balance between using the tvOS-native typography and colors and using WSJ’s brand colors and typefaces. Using WSJ’s headline font for the video titles gave us an unmistakable WSJ “look” allowing us to use Apple’s San Francisco typeface for smaller labels and descriptions.
Upon launching the app, the home screen displays featured videos in large cards right at the top of the screen, inviting the viewer to start watching right away. Below, custom lineups of videos on various topics invite a deeper look into our extensive video content. Every card reacts to the touch remote in 3D, bringing the content to life.
In addition, we included a new dedicated section highlighting our video series, with custom poster and backdrop artwork for each. We created guidelines for the artwork that ensured every video series looked like it belonged to the same family, while still expressing the series’ individual personality.
We also took this opportunity to integrate Adobe Heartbeat Analytics, which gives us more advanced video metrics, as well as Google’s Interactive Media Ads SDK, which gives us more robust monetization capabilities.
The new app launched in August 2019. We’ve since seen an increase in viewership and received many positive reviews from users. Download it on the App Store.
The Apple TV app was designed and developed by Adam Fisher-Cox, Marta Jakubanis, Tim Schmidt, Dave Tinnes, and Thomas Williams.
Marta Jakubanis is a Product Director at the Wall Street Journal. Adam Fisher-Cox is a Product Designer at Wall Street Journal. Portions of this article originally appeared as a case study on the WSJ Design website.
