Our developer, Dave, loves Sirius XM satellite radio. Between the Alternative Rock, Classic Rock, Howard Stern and Classic Hip-Hop channels, he easily spends 40 hours a week on their streaming web app. Being around so many UI designers, he’s also become pretty savvy at spotting a user interface that could use improvement. So when Dave suggested we check out Sirius’ design and potentially come up with something better, I knew we had a worthwhile challenge ahead of us.
Their existing web app is featured below:
Our re-design is further down in this post.
The biggest issue that all the UI designers at Fresh Tilled Soil instantly noticed and disagreed with was the navigation for Channels. The way in which you view what channels are available and change what’s currently playing is to mouse over a “radio band” of over 100 options, each measuring 3 pixels in width and 24 pixels in height. This construct makes it hard to explore the selections and requires a very steady hand and a lot of determination. In fact, this navigational construct was the biggest reason we decided to undertake the challenge of re-imagining this interface. While the other elements of the interface looked slightly dated, they seemed standard enough and weren’t a major motivation in undertaking this exercise.
While there is a lot of validity in using metaphors from real life in user interfaces (buttons, badges, icons, gauges on dashboards, etc.) we felt like the radio band was one that didn’t lend itself well to the web – especially when there were so many channels that each one’s target size became so minute. Also, what was clear to us is that each channel had meta data associated with it such as Title, Genre, Sub-Genre and Similar Channels but there was no option to Search. In thinking through a common use case with a more modern music application like iTunes, Spotify or Grooveshark, I realized that my behavior, as well as many of my colleagues’, was to start by entering a search for an artist or genre that I was in the mood to listen to.
In Sirius XM’s current interface, they are leveraging Browse well enough and after digging through a couple of levels you reach a few results that represent Channels you can listen to based on the genre. They also do a nice job of letting you Favorite something and being able to access those Favorites quickly from a single, universal place in the UI, so we decided to keep both of these constructs in our re-design.
Another element that we thought could be introduced to make it easier to explore new channels was the concept of the system ‘learning’ about the user by making some assumptions based on what they spend their time listening to. If the user splits their time between a handful of channels, why not suggest additional channels with similar artists or genres? Right now this is being done, but only on the level of ‘similar channels’ to the one you are currently playing. Additionally, if the user has friends on Facebook that also subscribe to Sirius XM, why not let them opt-into sharing their activity and viewing their friends’ activity as a way of discovering new music socially?
The screenshots below show our take on the interface which makes it much easier to search and browse popular channels, suggestions and friends’ activity while also retaining the concepts of browsing, favorites, and having a mechanism for being able to immediately change a channel if you happen to know the number of it – which some loyal listeners do. One of the places where we added visual emphasis was the Now Playing and Just Heard sections which graphically represent the material being played on a channel and give the user a way to identify a song they might want to buy or share socially.
The last point I’d make about our spin on the Sirius XM interface is that it would be more tablet friendly. Their current web application interface is written in Flash and even if it were in HTML it would be nearly impossible to tap the desired channel in the radio band to find the one you’re looking for. Granted they have a dedicated iPad app, but based on the screenshots we’ve seen in the App Store, the tablet interface also excludes search and relies on browsing to discover channels.
The screenshot below shows the Search Results sliding down using a ‘drawer’ style approach: