Spotify as a 10-foot UI

Reimagining the Spotify Fire TV App

I recently purchased a Fire TV Stick and was excited to play music through Spotify from my TV. Although this added functionality was for the most part simple and straightforward, interacting with the Spotify app on the Fire TV Platform was not. 

Items were layed out horizontally and could be scrolled through from left to right.

Apps on TVs are referred to as “10 foot UIs” which is a user interface experienced from 10 feet away. As smartTVs are becoming more popular, 10 foot UIs are becoming more common. I was passionate about the music listening experience, especially as an avid Spotify listener, so I decided to look into why I experienced the problems I had and how I could design a better solution.
I looked into why this problem was occurring by performing the “5 whys” exercise. Instead of taking the issues at first glance, I asked myself why things are the way they are and stumbled onto the root cause. The interface was very simple and native users weren’t able to easily navigate comfortably with the four way directional remote. Information density should be low because this is a “casual consumption” experience, but music listeners wanted precision and choice. Many users preferred to use their mobile app but users who use the remote should still be able to have a efficient and delightful experience.

Only a portion of your albums were available on the TV app. I'm assuming that scrolling through all of your potential albums would be too time consuming.

I first looked into app reviews on amazon’s website. There were hundreds of reviews for the app, 200 within the last two months. I read both good and bad and got a sense of what worked, what people liked, and the issues people had. This one review pretty much sums up the problem.
“I’m not a big fan of apps that force you to use your phone/tablet for navigation because creating a good UI for the remote would be too hard” — Johnathon Mayeron, Oct. 3rd 2016
I then decided to send a survey to the r/Spotify subreddit which I frequent quite often. This dedicated community of not only passionate music listeners, but big fans of Spotify as a product, gave me detailed insight into how they listen to their music. The survey got 88 responses and I found out what features in the “Browse” section they liked and what song identifiers (artists, albums, song titles) they look for most. I took this information with a grain of salt, knowing I need to validate them in the design phase.
I also read the design guidelines from AmazonApple, and Google for their TV platforms. They all covered common topics like typography, navigation and layout. This helped guide my design decisions and informed me of common design patterns.

Scrolling through a list of search results can be tiring and hard to visually scan from '10 feet' away due to the scrolling speed.

I focused my design on the navigation of the interface. I decided to add a second row of items that lets you move from menu to menu without having to click through each column. The content area displayed more items from that menu which supported decision making by giving listeners more insight as to what was in each category. This grid of items was also easier to navigate. More songs could be seen at any given time which lets listeners see more items with less scrolling.

My prototype for a Spotify TV app redesign

Other projects

Rendia - browse and share engaging health content
Document, Track, and Recover all your things
REI on the Apple Watch
Towing in Baltimore
Rendia brand re-design
Medical In Maryland
2015 Motion Graphics Reel
Fly through anatomy with the Exam Mode
Back to Top