Designing Branded Experiences for tvOS

Best practices to design and develop immersive apps for the new Apple TV

On 3 November 2015, four days after the fourth-generation Apple TV went on sale and opened the living room to apps, Punchkick ran a webinar for brand marketers on what tvOS asks of them. I presented it with John Norton, one of our iOS developers, and Amelia Baer, a marketing strategist: what Apple TV is, how designing for it differs from designing for an iPhone, and the four kinds of app a brand might build for it. This is that deck, rebuilt to scroll, its builds playing as you go; the original slides are at the end, as a PDF.

Agenda

  1. Getting Started with Apple TV 5 minutes
  2. Designing tvOS Experiences 15 minutes
  3. tvOS and Your Brand 25 minutes
An Apple TV and its Siri Remote on a pale wooden table.

Getting Started

A wall-mounted television showing the tvOS home screen, its Top Movies row above a dock of app icons, with an Apple TV and Siri Remote below it.

Introducing Apple TV

Apple TV is Apple’s vision for the future of the living room.

This is the new Apple TV

Units sold 25 million 2007–2015
Units sold 24 million Projected, 2016

The earlier Apple TV, with its aluminium remote, sold 25 million units from 2007 to 2015; the new Apple TV, with the Siri Remote, was projected to sell 24 million in 2016 alone.

Apple TV is more powerful

  • Bluetooth 4.0
  • Wi-Fi 802.11ac
  • Apple A8 processor Same as iPhone 6

Apple TV runs tvOS

  • OS X
  • iOS
  • watchOS
  • tvOS

tvOS is based on apps

The future of TV is apps

tvOS has an App Store like iOS

The tvOS App Store’s Top Charts: HBO GO, Zova, Daily Burn, Periscope, YouTube, Gilt and other apps.
The tvOS App Store’s Featured page, led by the game Galaxy on Fire: Manticore, above rows of new apps and games.

App Store on tvOS

tvOS is based on iOS 9

95% shared between iOS & tvOS

  • UIKit
  • SceneKit and SpriteKit
  • CoreGraphics
  • CoreVideo
  • App Store and StoreKit
  • CloudKit
  • CoreBluetooth
  • Game Center and GameplayKit
  • CoreAnimation
  • AVKit and AVFoundation
Two people on a sofa, seen from behind in silhouette, watching a brightly lit television in a dark room.

Designing tvOS Experiences

How tvOS differs from iOS

  1. Design for the couch, not the hand.

  2. Design for the remote, not the fingertip.

  3. Design for the living room, not mobile.

A woman curled up on a sofa, chin on her hand, watching a television across a quiet living room.

1 Design for the couch, not the hand.

A hand holding an iPhone close, in front of a television across the room: the TV is far bigger, but looks smaller than the phone.

Bigger screen, smaller apparent size

Simpler navigation, fewer items on screen, larger assets.

Simpler content architecture

Two site maps side by side. An iPhone app’s screens branch four levels deep, five screens wide; the tvOS app’s branch two levels deep, three wide. The path from the first screen to one piece of content is highlighted in each: three steps on iPhone, one on Apple TV.

Multiple simultaneous users

  • One user driving, others navigating.

  • Offer multiple ways to organize content.

  • Make buttons easy to describe.

2 Design for the remote, not the fingertip.

Input methods

The Siri Remote.
  • Multi-Touch surface
  • voice input with Siri
  • physical buttons
  • gesture control

Use grid-based layouts

  • A tvOS list template: titles down the left, an image of a green valley on the right.
  • A product template: a photo of a Tuscan town beside a list of related titles.
  • A compilation template: three landscape images beside a list of titles.
  • A search template: an on-screen keyboard above a shelf of movie posters.
  • A stack template: a title and description over a wide landscape, with a shelf of thumbnails beneath.
  • A showcase template: a row of movie posters under a header with play, favourite and more buttons.
The Night King from Game of Thrones, arms raised.

Voice is the backbone of tvOS

“Voice search is at the heart of tvOS navigation.”

A hand holding an iPhone on a bus. A hand holding the Siri Remote in a living room.

3 Design for the expectations of the living room, not mobile.

Consider three-minute rule.

Three iPhone 6s handsets, in silver, gold and rose gold, tumbling through white space.

Device preference

Users choose the most convenient device.

Tasks around entertainment and leisure, not productivity. If people want something done quickly, they’ll use the device closest to them: their iPhone.

Longer interactions

Apple Watch
a few seconds
iPhone
a few minutes
Apple TV
much longer

Think passive, not active

tvOS apps are more passive.

A 1950s couple in armchairs, seen from behind, facing a wooden console television.

tvOS and Your Brand

Why develop for tvOS?

  1. 1 Connect with target audience
  2. 2 First-mover advantage
  3. 3 Cross-platform experiences

What apps exist for tvOS?

Passive

Active

Immersive

Task-based

  • Netflix
  • HBO Now
  • Hulu
  • Minecraft
  • Beat Sports
  • Crossy Road
  • Content
  • Shopping
  • Affinity
  • Location-based

A chart of tvOS apps on two axes, passive to active and immersive to task-based. Netflix, HBO Now and Hulu are passive and immersive; games such as Minecraft, Beat Sports and Crossy Road are active and immersive. The kinds of app open to brands are task-based: content, shopping and affinity apps on the active side, location-based apps on the passive.

A curved wall of hundreds of screens, each showing a different landscape.

1 Content apps

What do people want to learn?

  • A TV chef pours batter from a glass jug as a studio camera films her.

    Recipes

  • A man kneels to mark a measurement on a board, building something at home.

    DIY Tutorials

  • Red Corvettes on orange cradles moving down a factory assembly line.

    How It’s Made

Leveraging existing content

TVML & TVJS can streamline apps for existing video content.

Questions for content apps

  • What content does my brand already have?

  • What do our customers want to learn from us?

  • What else are our customers curious about?

Rows of women’s sandals and heels in bright colours, arranged on white steps.

2 Ecommerce apps

How can tvOS better introduce product?

  • A driver’s view from behind the wheel, down a palm-lined road.

    Test Drives

  • The open-plan kitchen and living room of a bright modern house.

    Virtual Tours

  • A model in a fitted patterned dress against a white background.

    3D Previews

Content married with interactivity

A diagram in perspective: a translucent interactive layer of buttons and panels floating above a shopping channel’s video.
Interactive Layer Content

Questions for ecommerce apps

  • How can we better introduce the product?

  • How can we improve our calls to action on tvOS?

  • How can we marry content and interactivity?

A man running along a waterfront with earphones and an armband, the Bay Bridge behind him.

3 Affinity apps

Solving core user problems

ProductPractical NeedPsychographic Need
Office SuppliesNeeding a staplerDisorganization
HotelsHaving a place to stayA sense of adventure
Fitness MembershipStaying in shapeMeeting personal goals

From the speaker notes

What is the real problem your product or service solves?

If you sell staplers, it’s not that they don’t have a stapler. It’s that they’re disorganized.

Think about that real psychographic problem, and then think about other problems your customer might encounter before and after using your product.

If you can help solve those problems, too, you’ll be in the consideration set when it comes time to buy your product or service.

Entering the conversation early

  1. Affinity Awareness Affinity apps
  2. Content Engagement Content apps
  3. Shopping Conversion Ecommerce apps

Questions for affinity apps

  • What core problem does my product solve for customers?

  • What other problems do customers encounter?

  • When should customers think of my brand?

Shoppers with bags walking quickly past the storefronts of an outdoor arcade.

4 Location-based apps

How can tvOS improve the at-location experience?

  • Shoppers using large touchscreen kiosks in a clothing store.

    Interactive Kiosks

  • Mirrors and a rail of clothes in a boutique dressing room.

    Product Discovery

  • An airport check-in hall under a long departures board.

    Digital Signage

Questions for in-store experiences

  • How do customers interact with displays today?

  • What information do customers need to make a decision?

  • How can we make the in-store experience more memorable?

Tenets of successful tvOS apps

Tenets of successful tvOS apps

  1. Showcasing unique Apple TV capabilities.

  2. Marrying content consumption with interactivity.

  3. Focused on solving actual user problems.

Presented by

  • Connor Mason Marketing Technologist
  • John Norton iOS Developer
  • Amelia Baer Marketing Strategist

Designing Branded Experiences for tvOS

Webinar deck · 58 pages · Punchkick · 2015

All 58 slides as they were presented on 3 November 2015, including the closing slides on Punchkick left out above: what the new Apple TV could do, how designing for the couch, the remote and the living room differs from designing for iPhone, and the content, ecommerce, affinity and location-based apps a brand might build for it.

Download the webinar deckPDF

Backlinks