Radio for SoundCloud: Part One
Designing and developing an application for Apple Watch
A few years ago we launched Radio for SoundCloud, an iOS app designed to improve the discoverability of SoundCloud by surfacing popular tracks through 15 custom radio stations. It was a success — people loved it! Two years later it’s still getting rave reviews in the app store and this is something we’re very excited about.
What started out as an internal project intended to push our skills in visual design, motion, and development has evolved into a multi-platform application. With the release of Apple Watch and the new Apple TV, we thought we might revisit Radio for SoundCloud as a means of exploring the new experiences these platforms offer.
In part one of this series, we’ll be sharing our experience designing and developing the Radio for SoundCloud app for Apple Watch.
Revising UX for the Apple Watch
For each new platform, we re-evaluated the user experience of Radio for SoundCloud and made adjustments accordingly. We knew the watch application couldn’t be expected to perform exactly as its iOS counterpart, so rather than forcing all of the functionality into the watch, we chose to focus on primary actions — giving users the controls they need while sparing superfluous architecture. This meant simplifying the experience into two views, a station list and player, allowing users to choose a station and skip through tracks quickly.
Constraints in UI Design and Development
With Apple Watch, we encountered a unique set of visual design challenges. We wanted to maintain the integrity of our original concept, but the Apple Watch’s current processor does not allow for customized views. This meant our app had to be constructed with exclusively stock Apple views — any elements outside the standard components had to be pre-rendered images.
The triangle motif and motion had been key aspects of the visual design of our iOS app, but without custom views we lost the ability to clip album art into a triangular shape. It also seemed unthinkable to sacrifice the iOS motion work of which we had grown so fond. As a result, we made it a priority for our design and development teams to find a solution for doing what we wanted within the limited imagery and animation options of Watch OS2.
Accounting for the watch’s ability to display static images and animations, we created five sets of animated triangle clusters, each with a different color and motion path. Our logic for iOS already had the ability to extract a dominant color from pieces of album art, making it possible to pull the animation that corresponded in color to the album art. Each animation contains three triangles that slowly pan over each other, creating an ambient effect that speaks to the visual design and motion work created for iOS.
A Shared Experience
When adding a watch component to an existing iOS app, additional interactions may be needed to allow both devices to work together in a seamless experience. While developing our watch app, we discovered a new edge case that needed to be accounted for on the iOS side. On iOS, users can only change the station from one of two of the following screens:
Once watch was added, users could change stations from their wrist while in any view of the iOS app. Changing the station from the watch while in the player on iPhone created an unappealing jump between stations. To solve this problem, we created a new response to this interaction. The player view now listens for and reacts to this change. We even created a new animation to help illustrate this transition to users.
So, What’s Next?
When looking to develop for the Apple Watch, it’s important to remember that this platform isn’t perfect for all applications. If you decide your app is watch-appropriate, be ready to roll with the punches when designing and developing for a platform so different than standard iOS.
Making Radio for SoundCloud Watch wasn’t without its challenges, but it was awesome dipping our feet in the waters of a new platform. So awesome, in fact, that after publishing this application we immediately started work on a version for Apple TV.
In part two of this series, we’ll venture from a tiny screen to the big screen with Radio for SoundCloud for Apple TV.
Contributors
Laura Levisay, Designer at thirteen23
Max Wade, iOS and Android Developer at thirteen23
Tom Nelson, iOS Developer at thirteen23
Find us on Facebook, Twitter, and Instagram or get in touch at thirteen23.com.
