Designing Native Android Apps for TV: How TVPlayer Designed for Amazon Fire TV
Design is one of the pillars of the success of a mobile app, along with the development process and the distribution channels. Defining how the users will interact with your app is as important as implementing the features of the app and integrating an efficient monetization model. Also, when it comes to designing an interface for a new interaction model like TV, a lot of the patterns that work well with smartphone and tablet interfaces needs to be rethought to take advantage of the big screen and the input model provided through the remote.
TVPlayer on Fire TV
This was a task that didn’t scare the developer of TVPlayer, one of most successful TV apps on Fire TV and Fire TV Stick in UK.
TVPlayer is a media streaming native Android app that let you watch Live TV on your Amazon and Android devices for free, granting access to many of the UK’s most watched channels. TVPlayer has been part of the launch of Fire TV in 2014, and its success continued during 2015 and 2016.
Simplestream, the team of developers and designers behind TVPlayer, took the task of creating a TV-first experience really seriously.
We asked Lewis Arthur, Operations Director, and Michael Jordan, Android Developer from Simplestream to share their insights about the design process of their Fire TV app, here’s what they told us.
The Design Process: From Mobile to TV
Before landing on Fire TV, TVPlayer was already available on Amazon Appstore for Fire Tablets and Android devices. The designers of mobile version of the app focused their attention on usability and easiness of access to content. They adopted big bold images on the layout of the landing Activity and a scrollable lists of Live TV channels in the main tabs. The designers decided to maintain a “light” theme in order to make content stand out and also to keep the theming consistent across different platforms.
When it came to providing the support for tablets, the design needed to be rethought to take better advantage of the big screen. The main layout was edited to showcase more content to users straight from the main Activity. This is a good strategy to both catch the attention of the user and provide quick access to multiple relevant content.
For the first implementation of the Fire TV App, the main interface needed to go through a new lifting. The two major differences with phone and tablet UI and UX design, when it comes to design for TV, are embedded in the nature itself of the TV: It has a big display and it doesn’t provide a touch interface, since all the interactions happen through the remote.
Simplestream went all-in with big bold images on the main layout of their first Fire TV App. The “Home”, “On Now” and “Channels” Tab were moved on the side, and the font of the text has been greatly increased in size to make it clearly readable even from a distance.
This first iteration of the Fire TV main interface of app had a clear feeling of the tablet version, with a grid layout showing the main categories of channels.
Developing for Fire TV is Fast and Easy: 4 weeks from Mobile to TV
When we asked Simplestream how long did it take for them to go from the mobile version of the app to the first version of the Fire TV app, they told us that the transition took approximately 4 weeks. Since Fire TV is a full-fledged Android device, running Fire OS 5 which is based on Android Lollipop, the transition was fast and smooth: the main components of the mobile and TV version are the same, and keeping the interface separated from the main under-the-hood app architecture provided the developers enough flexibility to iterate fast and get to a complete TV app in a matter of a few weeks.
The Renovated Interface on Fire TV
After more than a year of availability of the app on Fire TV and after collecting enough feedback about user interaction from the app analytics, the developers and designers of TVPlayer decided it was time to provide a new interface for their Fire TV app. The idea was to make the app more efficient, to provide content in the best way possible to TV users and also to introduce new features in the app.
The key new development was the inclusion of a monthly subscription in app purchase — diversifying the app to include both free and paid content. The Simplestream designers went through a deep competitor analysis to understand what are the current trends in Media Streaming app design and how to design an interface that would maintain consistency even cross-platform and cross-devices.
Choosing the Right Colour Theme to Make the App Easy to the Eyes
First of all, the designers decided to go for a dark colour theme on the Fire TV. This was a decision taken when designing the previous version of the Fire TV app, but in the updated interface they went the extra mile, darkening out most UI components. The main purpose of the dark theme is to avoid tiring the eyes of the user when browsing for content, and therefore provide a more relaxing user experience. This was particularly important for the loading screen of the app, which was changed to be black to avoid ‘burned retinas’.
Avoid tiring the eyes of the user.
When developing apps for TV the usage of light and bright themes needs to be carefully considered since potentially a lot of the usage of this apps could happen in the evenings, when there’s usually less natural light and therefore a bright UI might hurt user experience and lead to abandonment of the app over time. Branding through colours is also very important. For TVPlayer, the use of blue as highlighting colour helped maintain branding consistency from previous version and across different platform. Blue indicates free content and Pink paid ‘Plus’ content.
Content Pagination through ViewPager
The developers of TVPlayer wanted a high-performing UI, but also wanted to maintain brand identity and provide a unique user experience. That’s the reason they decided not to follow the classical Android Leanback interface and they build their own layouts and navigation system.
The TVPlayer Fire TV App main layout relies on a custom implementation of the ViewPager component. The ViewPager is a layout manager that allows to easily flip left and right through pages of content. In TVPlayer, the horizontal scrolling through pages of programs and channels has been implemented through a custom implementation of ViewPager, with every page containing a set of custom views.
Improve Quick Access to Content Drives More Engagement
The grid view created in the previous version has been improved, with more spacing between items and introducing horizontal scrolling instead of vertical. Fast content navigation has been introduced as well: page navigation indicators can be selected by the user and allow fast scrolling through pages. The page navigation indicators are connected to the ViewPager and determine what page is currently shown or needs to be shown next.Faster scrolling means giving faster access to more content to the user, and therefore it helps user engagement and retention.
The Mosaic Interface: Faster Access to Content, Better Monetisation
The final result is a mosaic interface that gives quickly access to multiple channels. The usage of Custom Android Views and Adapters enabled the developers to have control on and mix Free and “Plus” content in the same interface, improving the access to premium content through In-App Purchase and therefore improving revenue generation. TVPlayer moved from a 100% Free approach in the first Version of the app to the introduction of In-App Purchase in the new version. Maintaining a clean user interface and separating the logics behind UI and main app components made the transition to the new model easier and faster, and allowed a faster iteration process in order to deliver a great customer experience and an improved monetisation strategy.
Start Creating Apps for Amazon Fire TV Today!
Amazon Fire TV and Fire TV Stick offer you a great opportunity to your Android or HTML5 app to reach more users. It’s easy to port Mobile Android apps to Fire TV following the documentation on the Amazon Appstore Developer Portal! Here’s some useful links for you:
Amazon Fire TV: Reach new audiences by bringing your apps and games to the Iiving room
Getting Started Developing Apps and Games for Amazon Fire TV
Developing Apps and Games for Amazon Fire TV
Stay Tuned for Part 2 of the “Get Your Android App Ready for the 10-Foot Experience” series: Tools, Libraries and Best Practices for Developing a Successful Fire TV App. Simplestream shared with us more insights on their Fire TV App development process! In the next episode of this Series, we’ll unveil what are Tools, Libraries and Best Practices that Simplestream put in place when developing and testing the new version of TVPlayer. Stay tuned!
Mario Viviani (@mariuxtheone)
Originally published at developer.amazon.com.
