RadioTime Web Tuner Redesign

Last month I had the pleasure of helping out my former colleagues at RadioTime take another pass at the RadioTime Web Tuner.

The endpoint for a successful RadioTime experience is the web tuner. If all goes well and you find what your are looking for, you’ll tune in. Getting the tuner experience nailed is absolutely critical.

Evaluating the current design

From a technical perspective, the tuner is rock solid and has a very intricate set of rules and fall-backs to ensure that listeners get the right stream when they click play (and it plays). Don’t let me trivialize the work behind this in one paragraph – trust me, the guys at RadioTime have spent months getting it right and it shows.

However, the UI problems are immediately apparent:

• There is a significant amount of inefficiently use space
• The olive-to-white gradient just doesn’t work (remember – the best gradients go unseen)
• The iconography at the bottom doesn’t communicate it’s functionality
• The information design lacks a clear structure and sense of priority

An idea

My first approach was to clean up the information design and add some structure to the tuner. One idea was to consolidate the play/pause with volume and to move the “on now” information to the bottom of the player since that information was sometimes unavailable.

Because play and volume (should) only be available when a stream is successfully tuned, that area could also be use to communicate status messages:

This layout works well, but one grip is that it created an unnecessarily long volume slider. That level of fidelity for volume isn’t needed, and could easily be confused with a progress or loading bar.

Round 2

Aside from the long volume slider, I really didn’t like the three horizontal bands (the header, the volume/status bar, and the “on now” info) created. It felt jarring.

In my next revision, I proposed a condensed display where we combine the status and “on now” information into a single line, multi-state display.

This significantly simplifies the interface, put would still provide needed info in a just-in-time fashion.

The Final Product

While the core design changes remain intact, the final product differs slightly in that the multi-state display was shelved for now out of concerns for scope creep.

The beauty of the layout is that it works just as well with one line of information as it does with three. The changes to the state display will follow sometime in the next few months.