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
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.
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.
- 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
Navigation and 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 are 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.
- Users will have a single point of focus.
- Does not strain users eyes from scanning all over large TV screens.
- 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 of content once scrolled.
- 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.
- Strains users eyes navigating around on large screens.
- Animation could be time consuming when navigating around menu items.
Educate users about iHeartRadio product benefits with new on boarding experience.
- Surface value proposition.
- Engage users with lifestyle and culture of iHeartRadio through imagery.
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.
- 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.
Following Apple's Paradigm
We followed Apple TV's menu paradigm so that users will not have to learn a new way to access our menu.
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.
Animation & Interaction
- After its launch, users loved the very sleek design and animation.
- Users enjoyed easy access to recent and more relevant content on the homepage.
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).