Pandora on Android TV
The newly-redesigned Now Playing screen in AndroidTV
Project Description
TVs are one of the fastest growing platforms for users to play Pandora in the home, and so it's a priority to provide a world-class user experience. In 2016/2017, the Pandora HTML5 app on AndroidTV app was slated for updating and improvement. The app had not been updated in a while and it had a variety of UX challenges. This redesign project was key in developing the design/interaction framework for the new Pandora app on all HTML5 platforms.
As a result of this UX/UI redesign on AndroidTV, metrics in all areas (from signups to monthly actives to hours listened per session) saw significant growth. More details on that later.
Role: UX Lead
This feature team was comprised of two designers: myself primarily focused on UX and another designer primarily focused on UI. We worked very closely with the product manager on all parts of this project's development.
IDEATION, WIREFRAMES, DESIGN, PROTOTYPING
TV are a unique platform to design for because, unlike phones and websites, listeners must use a remote control to navigate the screen. Some remote controls have microphones which can help perform actions, but even then, the microphone can only be used to provide inputs in limited fields, and can't be used to deliver every command the user wishes to execute.
In reviewing the status of AndroidTV, we found several opportunities for an improved user experience. There were several other heuristic violations that could lead to user confusion in the app.
Some of these challenges:
- Lack of clear information architecture and persistent navigation
- Navigating through tracks in session history could be laborious with many unnecessary clicks
- Search results displayed in a format that was difficult to navigate using a remote control
- Lack of interaction guidelines for voice search which is now possible via the addition of a microphones in many remote controls
- Virtual/onscreen keyboards clashing with UI when the user needed to complete onscreen forms and manage account settings
- Confusion about the state of music when playing/paused
- Metadata of search results
- Error states
I collaborated with the product manager and the other designer on this project to completely redesign the Pandora app for AndroidTV. Working together closely, we developed a set of interaction rules and product requirements that would dramatically improve the user experience on not just the Android TV product, but the entire suite of HTML5 Pandora apps.
Sample wireframes and user flows
Example 1: Keeping search simple with a search module that can accommodate either text or voice input, and can switch back and forth easily between the two:
Wireframes for search via text or voice. Search results displayed in a categorized grid with 'view all' link out to a child-page of all results in a particular category.
Example 2: Ensuring coverage for corner cases and suboptimal scenarios:
Wireframes illustrating the opposite of the Hero Flow. This outlines rules for situations in which an unauthenticated user initiates voice search and must complete the slow version of registration, during which they also encounter form field errors before finally completing registration successfully and reaching their desired station.
LAUNCH
To validate our ideas, I led a few quick in-house usability tests with employees who work in other departments outside of product, design and engineering. We also collaborated closely with the engineering team to continually test and refine the build of the new product, sharing ideas and high fives along the way.
By moving nimbly and iterating quickly, our team was able to meet our deadline for shipping the product with an entirely refreshed user experience and interface design.
Solutions:
- Introduction of clear information architecture and persistent navigation
- Streamlined navigation through tracks in session history
- Introduction of default focus states to make navigation and selection via remote control simpler
- Redesign and new interaction rules for virtual keyboard behavior
- Better labels to indicate system state
- Introduction of contextual menus
- Redesign of search results page with categorized grid sections
- Introduction of interaction guidelines for voice search via microphone
- Improved metadata for search results
- Improved error state handling and streamlined modal design
- Optimized animations to better correlate with a remote control's D-pad navigation
The app launched in the Google Play store in Spring 2017. Following this release, metrics in all of the following areas increased:
- Monthly active users
- Listening hours per month
- Listening hours per session
- Days active per month
- Signups
I was proud to be a part of the team that made these great improvements to the user experience on AndroidTV and the entire suite of Pandora apps built with HTML5. Enjoy!