UX case study: Slovak radio app

When I was little I always listen to audiobooks and stories in radio to fall asleep. I felt protected by the heroes from the fairy tales. Now, when I am older, it still gives me a feeling of calmness. These days, I often use a radio app by Slovak radio. It’s a simple app with only two screens but the design is rather confusing and hard to navigate. So here is my UX solution how I would do it better.

What problems I identified

There are several problems with the app that I’ve identified and which are decreasing overall User Experience. I will present design solutions to these problems and show you the prototypes made in Sketch.

Problem n.1 | First screen: When the radio is playing, you don’t have a stop/play option

Once, the app opens the first screen shows. Here you can pick which station you wish to listen to. Also, you can switch between the stations only on this screen. Once the radio is playing, it is not possible to stop or play the currently selected radio.

Problem n.2 | First screen: You don’t know what is on air on different stations and you don’t know the name of the selected station

Once you open the app, you need to pick which station you want to listen to. It is, however, quite a hard task when you don’t know what is currently on. To do so, you need to go into the station and switch between stations if you are not happy. Also, the currently selected station doesn’t show its name, only the currently running program.

Problem n.3 | Screen two: Play buttons confusing, small and out of the thumbzone

Once you select the station, you get to the screen n.2. To play the station you need to tap the play button in the upper right corner. Which one? The lower one – I got to know based on trial error. The two same buttons are confusing, they are both very small and hard to touch because of their size as well as the location on the screen.

Problem n.3 | Second screen: The program shows too much detailed information

The program shows the producer, who plays in the radio play etc. This info is not relevant and should be hidden if not requested.

How I improved the UX of the app

Based on identified problems, I prepared a few sketches with design solutions to improve UX of the app and later moved my ideas in Sketch. Here are my proposed solutions:

  • Show player on every screen, to be able to pause & play music
  • Show program on the First screen and a bar showing how long the current show runs
  • Keep only one play/pause button on the second screen to avoid confusions
  • Keep play button in the thumb area for quick access
  • Keep Timer button close to thumb are as well. Updated Timer screen

I have also prepared a short video with the interaction on the app trying out prototyping option in Sketch. But first…

Outcomes

  • Look at the apps or website with a critical eye and think of solutions. Also, think about the apps in a complex way
  • How to use and what is in the Material design plugin for Sketch
  • Prototyping in Sketch

Disclaimer: I haven’t done any UX research or testing for this app and design. It’s based on my subjective ideas and general understanding of users interactions with apps. The purpose is to apply my knowledge of material design and keep working in Sketch.