CASE STUDY

Online radio interface redesign

Task:

  • Redesign of online radio website in the colours of logo.
  • Designing with mobile-first approach.
  • Creating intuitive custom design to client's requirements instead of original template based website.
My Role:

  • UI designer working under customer specifications.
Problem:

  • Users of online radio tend to listen to music on the go, from mobile phone. Outdated web template used on the website couldn't provide convenient mobile UX.
Before and After
Originally, most of the first screen was occupied by decorative, not clickable images, without any function. To actually start listening to music user had to click the button and go to another page where he could choose the channels.

I redesigned this experience so that a user can start listening to music immediately and even while navigating through the website this won't be interrupted.
Mobile


I started by designing mobile version first.
Desktop

Left vertical menu - for radio channels navigation.

There are three tabs on the right for Playlist, Time-table and Programs.

Player is on the top and sticks to the top while scrolling.

Programs tab contains programs description, frequency, days of week and hours of the program appearance.

Time table screen was the challenging part, as designing tables for web responsively is a tricky task.

Customer asked for all programs and all days to be visible at once, not hidden.
This design is Bootstrap framework compatible and this solution was accepted by customer because it could be easily and quickly implemented.
Made on
Tilda