I’ve always been a huge fan of designing for connected devices, especially the Google Cast (which I’ll be referring to as the Chromecast from now on). When my coworker showed me their prototype of SoundCloud for Chromecast, which they built in their spare time, I volunteered to help with the refined version. I was in charge of the design for the receiver (TV-side) app.

Logic

Before jumping into visual design, I started by creating a logic diagram to understand the complexity of the app. I referenced Google’s Cast requirements in addition to conversing with the people who planned to build the official app.

The finished diagram.

Ideation

Next, I began sketching designs for the interface using sticky notes and graph paper. I sketched a loading state, home screen, player, and error states. I also wrote down open questions I had.

Sketches of the interface.

High-fidelity design

Once I’d shown the diagram and sketches to the team, I started working on the design for the home screen and player. I decided to keep the home screen simple, like most Chromecast app home screens – the user is likely concentrating on their phones during this step.

The final home screen design.

The SoundCloud Chromecast player is also simple. It intentionally mimics the design of the SoundCloud mobile app and web players for the sake of consistency and familiarity. However, the Chromecast receiver app does not have any actionable UI since all actions are taken through the user’s phone, so there are no buttons like on the mobile and web players.

The Chromecast player.

The web player, which inspired the Chromecast player design.

Polish

After getting agreement from my team on the home screen and player designs, I began working on animations for the app loading state and transitioning period between tracks in the player.

Receiver app loading state.

Animation of the transition from one track to another.

Error states

Finally, I designed error states for cases in which the receiver app doesn’t load or a track fails to play.

Receiver app load error.

Track error.

Launch

The feature was launched in August of 2015. Currently, SoundCloud Chromecast integration is only available on Android. Even so, many people celebrated. People on Twitter celebrated, and the feature even received a writeup on Engadget. I’m proud I could bring a feature to a device I enjoy daily and hope to be able to do so again in the future.

You can download the app and try out the Chromecast feature via Google Play.