Gijs Bakker

This is a portfolio/blog of Gijs Bakker, UX (interaction and UI) designer from Amsterdam.
Read more about me, filter work by tags or mail me at .

Radium for Apple Watch

What is it A self-initiated project to familiarize myself with the Apple Watch design (patterns)

At the time I’m writing this, the Apple Watch is not yet available.
What is available are a lot of articles and images on the web and a pre-release Human Interface Guidelines doc by Apple.

I couldn’t wait to try-out a little app idea for the Apple Watch with one of my favorite apps as a base: Radium, a radio streaming app for iOS and OSX.

Apple made it clear that the Apple Watch should be an extension of the user’s iPhone. With that in mind, I figured the Radium app for Apple Watch could function as a remote for the Radium app on the iOS device (or perhaps also the OSX version).
Such a remote could be handy while exercising, in a crowded metro or on the couch when your iOS device or Mac is streaming to Apple TV.

To get some sense of the approximate scale and experience of the screen I used a 6th generation iPod Nano, which comes close to the Apple Watch’s form factor.

I started with some ideas about how the Apple Watch could be used for Radium.
I figured the core tasks in the app should be:
– Listening to the user’s pre-defined radio stations (which the user’s has added via the iOS app)
– Be able to switch stations

Assumptions
I made this mock-up while keeping in mind that the iPhone provides the content and the Apple Watch controls and monitors the host iPhone. Earphones are of course plugged into the Phone (unless of course the user has Bluetooth headphones). I left out the option to add new stations via the watch since it’s not the core activity.

Sketching
I started with some sketching. Below are some re-created sketches to give an idea about how and what (initial sketches were drawn here and there).

Sketch app
Because I only wanted to mock-up two screens for myself, I skipped a digital wireframe and went from sketches to Sketch app (see bottom of this page). The pink-ish colors are drawn from the Radium logo / app icon.

Sketches for the Radium app.

Sketches for the Radium app.

I used a 4:5 ratio, 30 x 28mm). The physical width matches the iPod Nano.

I used the specified 4:5 ratio, on paper 30 x 38 mm. The physical width roughly matches a 6th gen iPod Nano.

A sketch of the radio player

Sketch of the radio player. Here I only had a ‘Change stations’ button (besides play/pause).

A sketch of the radio stations list

Sketch of the radio stations list. At first I figured a hierarchical flow would work here (< Page), but later I wanted to return to the player after the user selected a station. A modal screen is better for this.

Later sketch of the player

Later sketch of the player. Here I added a settings button and volume control.

Later sketch of the stations list

Later sketch of the stations list, this time in a modal screen.

Radio playing with song meta-data. Buttons for the radio stations list, settings (assuming there are some), play/pause and volume control.

Radio playing with song meta-data. Buttons for the radio stations list, settings (assuming there are some), play/pause and volume control.

Radio stations list in a modal screen, also indicating currently selected station. Once a station is chosen the modal screen closes and the new station starts loading and playing.

Radio stations list in a modal screen, also indicating currently selected station. Once a station is chosen the modal screen closes and the new station starts loading and playing.

This was a design attempt that is in line with the Radium iOS app*, but is kinda contradicting Apple Watch HIG. * In the Radium iOS app, the artist album cover artwork is displayed (if available) and a gradient is applied using the dominant color of the artwork.

This was a design attempt that is in line with the Radium iOS app*, but is kinda contradicting Apple Watch HIG. * In the Radium iOS app, the artist album cover artwork is displayed (if available) and a gradient is applied using the dominant color of the artwork.

Post navigation