Not How It Looks: Wavesonix Internet Radio

The Product:

Various demos and mock-up screens for an internet-enabled multi-functional radio that also accesses and plays podcasts, local-network music playlists, audiobooks, "widgets" (such as weather), alarm clock functions, and many more features...

It's important to note that this is not a touchscreen device – the way to navigate through the screens & options on this device, and the way to make selections is performed through one large scroll-wheel with a centre click button. The user can also make various on-screen selections through one of three small "soft-key" buttons that sit under the screen.

Responsibilities:

Based on the client's basic requirements, I had sole responsibility for all initial proposed layouts and designs, IA, graphics, build-assets, and everything front-end.

The majority of these screens only show mock-up examples of intended functions with dummy text, rather than actual proposed functions mapped out in precise detail.

Purely out of interest, I am showing various screens from the entire design brainstorming process, including designs that were rejected - either by myself or by the client. The reasons for which are outlined below.

Phase 1: Preliminary mock-up screens...

The Home Screen shows how the screen would display and scroll through a list of options that is longer than can be displayed on the screen all at once.

A more attractive attractive user-interface has been implemented.

Phase 2: Exploring other designs...

This design was very quickly scrapped!

INSTRUCTIONS:

Click the screen on the left once to show how the device would display the various options being scrolled.
Click a second time to see an example option being loaded onto a second screen, complete with a mock-up network-traffic delay before the results are fed back into the device.

Phase 3: Still exploring other designs...

This Home screen shows how the screen would display and scroll through a list of options that is longer than can be displayed on the screen all at once.

A screen showing music playback from an internet-radio station, including:

Radio station name and logo.
Track information.
Album cover artwork.
3 buttons giving further options.

Phase 4: Subtly adapting the designs explored in phase 3...

Various Home screen visual design variations.

Various Internet-radio music playback screen variations.

Phase 5: More Subtle variations on the preceding theme...

Home screen variation.

Internet-radio music playback screen variation.

An animated example of the previous example, showing an internet-radio music playback screen transition from the track initially being loaded, showing off the album artwork to its fullest extent, before settling into the corresponding info screen.

The same two Home and Internet-radio music playback screen designs as above, but reverting back to the very first colour-scheme that was originally proposed. (Sometimes you get it right first time!)

Phase 6: The final screens, now that the design and colours have been decided...

Home screen.

Internet-radio music playback.

Internet-radio music playback screen – the variation here being for a station that does not have album artwork, where we display the station logo instead.

Local-network music playlist – this would include a playback progress-bar, as we have access to the track's length information.

Podcast playback, showing other podcasts available in the series.

Audiobook playback, showing current chapter playing and other chapters available. Playback progress-bar shows current position as well as chapter markers directly on the timeline.

A list of recently-played internet-radio tracks, with various further options for the user.

Date & Time screen, with large font viewable from across a room. Also displaying options to set alarms, time zones, etc.

Sample "widget", in this case a weather widget.

An example of an overlay screen indicating that an action has taken place, in this example a song has been added to the user's Favourites list.

An example of an overlay screen indicating that an action has taken place, in this example simply showing volume adjustment.

A few example screens from the extensive "Help manual" included on the device itself.

The colours here have been reversed to help distinguish it from the rest of the device's functions, and also to aid legibility when reading long paragraphs of relatively small text.