With the advent of media streaming, consumption of content via Smart TVs and Streaming Media Players is skyrocketing. However, designing and developing apps for the Big Screen provides unique challenges: crafting an easy-to-navigate UI, implementing a fail-proof login experience, introducing new monetization models and more. In this session you will learn: • How to implement a solid TV-centric UI/UX • Navigate through case studies and scenarios for the 10-foot experience • Developer tools and APIs that facilitate the creation of high quality TV-centric apps

1. Designing Apps in the
Age of Media Streaming:
Optimise Your Content for TV
Mario Viviani
Technology Evangelist, Amazon Digital, Apps and Games Services
@Mariuxtheone

2. Mario Viviani
EU Technology Evangelist, Amazon DAGS
@mariuxtheone
• Android Developer since 2010
• 95+ apps published
• 12,000,000+ downloads
• Google Developer Expert 2013-15
• Startup Founder, Co-Worker

5. A bit of recent history…
4
2016
Amazon Fire TV Stick
(2nd Gen.)
2017
Amazon Fire TV 4K
(3rd Gen.)
2019
Amazon Fire TV Stick
with all-new Alexa
Voice Remote
2018
Amazon Fire TV Stick 4K
with all-new Alexa Voice
Remote

6. A great milestone
5
30+ Million
active Amazon Fire TV users
Amazon Data, Jan 2019

7. *available in US only

9. OS 6BASED ON
ANDROID 7
NOUGAT
ANDROID STUDIO

11. Understanding the
10-Foot Experience
10

12. The 3 Phases of Funnel Conversion
11
Engagement
& Retention
Conversion
& Monetisation
Onboarding
& Registration

13. Onboarding &
Registration
12

14. The Content Showcase Dilemma
?
User
Registration/Sign-Up
Show In-App Content

15. Content First – Ensures Best Conversion
Show In-App Content
User
Registration/Sign-Up

16. HOW DO WE REDUCE
FRICTION IN THE
SIGN-UP EXPERIENCE?
16

17. Reducing Customer Friction on Sign-Up
17
Your First Name
Your Last Name
Your Email Address
Password
Confirm Password
Your Postcode
CONFIRM
~300 Clicks
via on-screen
keyboard

18. Login With Amazon
18
2/3 Clicks
no on-screen
keyboard

20. Login With Amazon
20
{
"email" : "johndoe@gmail.com",
"name" : "John Doe",
"user_id" : "amzn1.account.K2LI23KL2LK2"
}
Scope 1: profile
• Requires confirmation screen.

21. Login With Amazon
21
{
"user_id" : "amzn1.account.K2LI23KL2LK2"
}
Scope 2: profile:user_id
• Every company that creates websites or apps for Login with Amazon gets the same
user_id for a customer.
• Different companies receive different user_id (avoids customer tracking on the web)
• Because no personal information is requested, the user will not be presented with a
consent screen the first time they log in.

22. Login With Amazon
22
{
"postal_code": "98101",
}
Scope 3: postal_code
• Requires confirmation screen.

23. Login With Amazon
23
{
"email" : "johndoe@gmail.com",
"name" : "John Doe",
"user_id" : "amzn1.account.K2LI23KL2LK2"
"postal_code": "98101",
}
Combined Scope: profile postal_code

24. Find out more about Login With Amazon
24
login.amazon.com

25. Engagement &
Retention
25

26. Delight and Engage

27. TV App Design
UX Guidelines
27

28. 10-Foot UI
28
10 feet
~3m

29. Interaction is Remote Based
29

30. General Design Principles
•Clear, Simple, Visual
•Limit Design Elements on Screen
•Place Important Content First
•Focus on Consumption
•Design with Remote in Mind, Reduce Clicks
30

31. TV App Design
UI Guidelines
31

32. Screen Size and Resolution: Amazon Fire TV
32
1920px
1080px
FullHD
1080p
Density: 320dpi ("xhdpi")
Output Resolution: 960x540dp ("large")

33. Overscan and the Safe Zone
Overscan: Space around the displayable area of the screen.
33
Displayable
Area
Overscan

34. Safe Zone
34
Safe Zone
5% of any
edge
on the screen

35. 35
Developer Option on, then Hold 5 Seconds Central+Down
buttons on Remote, then click Menu Button

36. Color
36

37. Measure Performance
with System X-Ray
37

38. 38
Developer Option on, then Hold 5 Seconds Central+Down
buttons on Remote, then click Menu Button

39. System X-Ray
39

40. System X-Ray - Display
40
HDMI Mode: Shows the physical height of display in
pixels and the refresh rate in frames per second.
HDCP: Shows the HDCP (High-bandwidth Digital Content Protection)
version used by Amazon Fire TV to encrypt content that is sent through
the HDMI cable to the television.

41. System X-Ray - CPU
41
•0% to 33% (low utilization) shows in green
•34% to 66% (moderate utilization) shows in orange
•67% to 100% (high utilization) shows in red

42. System X-Ray - Memory
42
• Foreground Memory (blue): used by app in foreground (not GPU)
• Other Memory (gray): used by apps and processes in background
• Available Memory (white): the free memory in device

43. System X-Ray - Network
43
• RSSI (Received Signal Strength Indicator): Shows how strong the WiFi signal is,
measured in dBm (decibels-milliwatt, value of radio signal)
• System: Measures how many bits per second are being actively downloaded to the
device (including both visible and background apps).
• Visible: Measures how many bits per second are being actively downloaded by the
visible (also called foreground) app.

44. Conversion &
Monetisation
44

45. Paid
Apps
In-App
Purchase
SubscriptionsAdvertisement
App Monetisation models
AD

46. AMAZON
IAP & SUBSCRIPTIONS API
46

47. Paid
Apps
In-App
Purchase
SubscriptionsAdvertisement
App Monetisation models
AD
Amazon In-App Purchase API

48. A D VA N TA G E S
Provide IAP Items,
Entitlements & Subscriptions
Handles Free Trials, payment
processing, receipts,
rights management
Amazon 1-Click Settings
Why Amazon IAP & Subscription API

49. developer.amazon.com/sdk-download

50. BUILDING APPS FOR TV
IN MINUTES
50

52. FIRE APP BUILDER
STREAMING MEDIA PLAYERS
Plug and Play template for audio and video
apps. Create an app in less than 1 hour.
E A S Y, FA S T A N D
B E A U T I F U L
Contains modules (plugins) to enable advanced
functionality
Handles JSON feeds, branding and
customisation
Supports Amazon Fire TV family
Supports FireOS and Android

54. M O D U L E S
Social logins
In-App Purchasing
& Subscriptions
Ads
Analytics
Media Player AD

55. F I R E A P P B U I L D E R W O R K F L O W
CONFIGURE YOUR
FEED LAUNCH THE APP!
CUSTOMIZE UI &
MODULAR COMPONENTS
SETUP RECIPE FOR
CATEGORIES AND CONTENTS
JSON

56. S TA RT TO D AY !
D O W N L O A D
github.com/amzn/fire-app-builder
D O C U M E N TAT I O N
bit.ly/FireAppBuilderDoc

57. m.amazonappservices.com/IAP-ebook

58. “IT’S A WRAP!”

59. o Content First
o Reduce friction and
clicks
o Login with Amazon
Onboarding
& Registration
Conversion
& Monetisation
Engagement
& Retention01 02 03
Focus on your customers
o 10-foot UI
o Design for Remote
o Follow Design
Guidelines
o Select Right
Monetisation Model
o Implement
Subscription via
Amazon IAP API

60. Thank you!
Mario Viviani
@mariuxtheone
@AmazonAppDev
vivianim@amazon.co.uk
developer.amazon.com/appstore
60