Apple tv app

iHeartRadio | 2015

iHeartRadio enters the 4th generation Apple TV with an interactive and innovative listening experience, with large cinematic interface and engaging animations.

ROLE: UI UX Design & Direction

BUSINESS GOALS

iHeartRadio was to be one of the launching partners of Apple TV, at that time. In addition to flagship mobile, increase user sign up/registration.

The Process

We were given an opportunity to design and develop iHeartRadio app for the Apple TV 4th Gen before it was released to the public. Under a waterfall methodology, we designed the app with heavy consideration of Apple TV's HIG, while pushing our design boundaries.

I worked with our PM to discover low performing usability cases from our other television experiences to solve these issues and release solutions for our Apple TV experience. See below. Having limited knowledge of the new Apple TV's functionality, I worked closely with developers to discover creative opportunities to enhance our first ever Apple TV app.

Things to remember

Remote control: Always based off D-pad movements, accounting for left, right, top down fluid motion to ease into the menu, miniplayer and content.

PRODUCT FOCUS

Provide ease of discovery and navigation.
Educate users about iHeartRadio product benefits with new on boarding experience.
Surface as much recent and relevant content on first view.
Keep standard Apple TV navigation paradigm.

Challenge #1

Navigation and Content Discovery Exploration

Goal: Simplify ease of discovery and navigation. Provide users ample content at once.

Prior to receiving Apple TV HIG, the design team explored various navigation and discovery concepts.

Concept 1: Vertical navigation, horizontal discovery

Users will be able to navigate using top/down arrows to go through the menu items.
Users will be able to discover content by using the left/right arrows.

With the increasing TV screen sizes, I wanted to keep the focus point to be in one area to refrain from scanning a large screen to navigate.

Pros:

Users will have a single point of focus.
Does not strain users eyes from scanning all over large TV screens.

Cons:

Mundane interaction.
Not using Apple TV's menu paradigm.
Does not show a lot of content on screen at once.

Concept 2: Using Apple TV standard/native menu

Users will be able to pull Apple TV's standard/native menu from the top.
Users will be presented with ample amount of content once scrolled.

Pros:

Users will use standard/native menu, so that they wont have to learn a new way to navigate around the app.
Design and development were able to implement exciting interaction, connecting elements/compositions from one another.
Shows ample amount of content on screen at once.

Cons:

Strains users eyes navigating around on large screens.
Animation could be time consuming when navigating around menu items.

Challenge #2

Educate users about iHeartRadio product benefits with new on boarding experience.

Solution

Surface value proposition.
Engage users with lifestyle and culture of iHeartRadio through imagery.

CHALLENGE #3

Users needed the most recent station surfaced up for continued listening experience.
Users had difficulty discovering content that are relevant to their choice of genre, location and popular content.

Solution

Surface the most recent station.
Bring relevance to content based off user's genre choice, user's location and popular content by utilizing Apple's standard multiple carousel on first screen.

iHR_APPLETV_browse_v7_06_BROWSE_LIVERADIO_title selected.png

Following Apple's Paradigm

Menu
We followed Apple TV's menu paradigm so that users will not have to learn a new way to access our menu.

Layering
Live Station pivot only had text as options for users to discover location based content. We utilized Apple TV's layering to create our stations tiles. On highlight, the tile would turn into multi-layered concert scene for additional engaging experience.

User Interface

iHR_APPLETV_genregame_V2_01-HIGHLIGHTED-none selected.png

iHR_APPLETV_genregame_V2_06-DONE HIGHLIGHTED.png

iHR_APPLETV_browse_v7_03a_BROWSE_FORYOU_play now-adele.png

iHR_APPLETV_browse_v7_03a_BROWSE_FORYOU_play now.png

iHR_APPLETV_browse_v7_03b_BROWSE_FORYOU_play now-1rowHL.png

iHR_APPLETV_browse_v7_03c_BROWSE_FORYOU_scrolled-np.png

iHR_APPLETV_browse_v7_04a_BROWSE_MYSTATIONS_no favs.png

iHR_APPLETV_browse_v7_04b_BROWSE_MYSTATIONS_no favs recently played.png

iHR_APPLETV_browse_v7_04d_BROWSE_MYSTATIONS_scrolled.png

iHR_APPLETV_browse_v7_07_BROWSE_LIVERADIO_scrolled-state highlighted.png

01d_iHR_APPLETV_moreinfo_MOREINFO-biography-overlay.png

iHR_APPLETV_player_v5_01c_PLAYER-CUSTOM-noalbumavail.png

iHR_APPLETV_player_v5_01d_PLAYER-CUSTOM-noalbumavail-SS1.png

iHR_APPLETV_browse_v7_09_BROWSE_LIVERADIO_scrolled-state selected.png

iHR_APPLETV_player_v5_03c_PLAYER-PODCAST2-scrubberHL.png

iHR_APPLETV_search_v2_01-SEARCH-No Search.png

iHR_APPLETV_search_v2_01a-SEARCH-no recent search.png

iHR_APPLETV_search_v2_02-SEARCH-One character only - no results.png

iHR_APPLETV_search_v2_03-SEARCH-Text Focused.png

iHR_APPLETV_search_v2_04-SEARCH-alpha selected.png

iHR_APPLETV_search_v2_05-SEARCH-Top Hit Focused.png

iHR_APPLETV_settings_v2_6-EXPLICIT ON.png

iHR_APPLETV_settings_v2_7- EXPLICIT OFF.png

iHR_APPLETV_settings_v2_8- AUTOPLAY ON copy.png

iHR_APPLETV_settings_v2_8- AUTOPLAY ON.png

iHR_APPLETV_settings_v2_9-AUTOPLAY OFF.png

User Feedback

After its launch, users loved the very sleek design and animation.
Users enjoyed easy access to recent and more relevant content on the homepage.

RESULTS

In Apple TV's hardware launch, iHeartRadio was one of the first featured apps. Today iHeartRadio on Apple TV receives about 300k registrations, MoM (Month Over Month).