Agency: Ratio
Client: Yahoo!Finance

Team:
Creative Director: Russ Whitman (Strategy)
Associate Creative Director: Aaron Johnson
UX Designer / Visual Design: Ryan Hoback
Visual Designer / UX Design: Keeley Laures

My Role: Art Direction, UI design, UX, Visual Design

The Ask: How can Yahoo!Finance take advantage of the 10 foot space and work effectively for their user base as well as differentiate itself amongst other Apple TV applications? 

The Solution: Build a destination app that gives someone a reason to walk into the room, turn on their Apple TV, and launch the Yahoo Finance app. Bring a dimension of relevance through personalized content leveraging Yahoo's competitive advantage as well as create a balance with browse and discovery experience. Going beyond the viewing portal was a huge point in our solution by leveraging the benefits of interactive tv. We also wanted to provide options to dig deeper and explore intentionally. We also wanted to give the user the ability to control what they see and where they go. We felt we could do this by giving them the following: News consisting of latest news, curated news, and personalized news, as well as data consisting of general data, curated data, and personalized data.  

Vision Board

Exploring Use

Upon thinking of different ways to differentiate this app from other TV OS Apps, Ryan came up with the concept of 3D touch that we gleefully placed into our concepts. It can be explained as follows:

Persona David

Data First

Home Page

How the motion can be defined is through the arrows above. The top tickers move from left to right with dynamic content. The three columns seen in this diagram have the ability to move from left to right depending on where the user selects content. For example in this case, if the user selects an item from a button on the right panel to the left of the dashed lines, the panel to the far left would then hide and the far right panel would be exposed.

We decided to design the data first home page with two tickers, one for stocks, and one for up to date news. After the tickers, is a watchlist menu. The line above the watchlist group shows that it’s selected. This menu has been created through David’s investment information. He has the ability to toggle through each one which means that the content below dynamically populates.Next is the panel to the left which contains video content relevant to the watchlist. This video panel scrolls up and down allowing David to get a list of video content.To the right is a general stock overview. This stock panel also scrolls up and down allowing David to get more stock information.  Included is the abilty to edit things like the Watchlist name etc.


Video Viewing

To maintain a 16:9 viewport without potentially covering upper video content, the stock and news ticker is and overlay moved to the bottom portion of the video. This allows David to view the video (in particular, those containing individuals talking) without much obstruction but still maintain real time updates.


Rest State

At any time while watching a video, David can leverage the remote and place it into a rest state which will grant David the ability to view more information about the video he is watching, as well as gain stock information regarding the companies highlighted in the video. While viewing this rest state, the video continues to play in the background.


Video Playlist

Given that the user is a fan of controlling the content he digests, they have the ability to select any video from the playlist at any time by swiping up on his remote to reveal a playlist. They can swipe the remote left or right to select a video.


Stock Selection

Going back to the homepage, leveraging the second scrollable area on the homepage, David has the ability to edit his symbols and click through a list of stocks that pertain to their watch list. In this particular view, the user can select a stock to then go into a detail view.


Stock Detail

As the user clicks on the specific stock that he wishes to learn more about, the video content shifts to the left. The stock list has replaced the videos on the left side of the screen. Populated on the right is more information pertaining to the selected stock. The user is now able to learn more information about the stock and gain specific information ranging from graph content, to varying stock numbers, to more video content pertaining specifically to that particular company stock through a specific playlist.


Overall

Data first allows a user to have a data based customized homepage that allows the user to gain real time information about their investments and allows them to compare and contrast their investments to the rest of the market. Simultaneously, the user has the ability to browse through video news playlists that assist with gaining more insight and information whether that be from the video content itself or the functionality of being able to watch and leverage the rest state. 10 foot allows the user have customized “channel” content formatted for the best way in which to view it (via television) while also allowing them to consume high level data.


Persona Roya

Apple TV Home Screen

Leveraging both the ideas and content of Data First and Watch First - we created two Apple TV home screens that would assist with each different user gaining the content of their choosing. The Data First individual is able to obtain data-based information pertaining to their watch lists such as Daily Gains and Total Gains first hand whereas the Watch First user is able to obtain access to their video playlists pertaining to their watch lists first hand.