Case Study: improve a feature into a French Radio App

9 min readJun 26, 2021

INTRODUCTION

As part of our Final Project in our Ironhack Bootcamp, we had the opportunity to put our knowledge in UX/UI Design at the service of professionals, to help them solve a concrete problem, for 2 weeks. I was paired with the wonderful Hélène (Hi Hélène LE VEVE!) for this project. Our mission was to improve the “reaction via voice note” feature in the France Inter native app and to increase the interactions’ opportunities between the users and the programs.

Let’s start with a bit of background to discover our client, our challenge and the competition.

BACKGROUND

Our client

France Inter is a French national public radio, part of Radio France Group. It’s the first radio station in France, with 6.7 million daily listeners (source: Médiamétrie, 126.000, LV, 5h-24h, 13+, jan-march 2021). The application was launched in 2014 and allows you to :

Listen to the radio live,
Speak and react live in the programs to ask questions, testify, give an opinion (via telephone, email, social networks, voice note),
Discover the program grid of today and tomorrow,
Listen to your favorite programs in podcast, on demand.

During this project, we were lucky to be surrounded by a great team of professionals working at Radio France: Fanny (Digital Director France Inter), Anne (Product Manager Radio France), Jean-Baptiste (Product Owner App France Inter) and Aurélie (UX Designer Radio France).

Our challenge

France Inter launched a few days before our collaboration a new feature into its native app which is the ability to react to a program by using the voice note functionnality. This feature is powered by an external service provider called VoXM and it’s a webapp implemented within the app. They‘re testing this new feature on 2 programs and we have been asked to find a way to improve it. We have decided to work on an iOS device for this project.

Our competition

We conducted an analysis of the different features integrated in the radio apps. If RTL is the only one to offer a personalized account to the users, France Inter is the one that offers the most features in terms of “interaction with the programs”, and is also the only one that allows the voice note reaction.

It’s time to move to the empathize step now, to understand our users and their needs.

EMPATHIZE

Survey

We started this important stage by a survey to get more info on the voice note command, the radio app usage and the people’s habits regarding reacting to a program. We had 105 respondents, in a nutshell:

60% of them use the voice note command in their daily life.
44% of them have a radio app on their smartphones and among them, 86% have never reacted to a program: this is not something common for people.
Nevertheless, 60% of them could react to a program via voice note because it’s convenient, quick, easy and interactive.

Qualitative Interviews

We decided to realize 7 qualitative interviews to deepdive the subject, with women from 34 to 41 y.o.

We used the affinity diagram to condense the feedback and bring out the users’ problems. Here are some relevant quotes from our users:

To sum up, let’s have a look on our findings below:

The temporality is important for the users because they don’t really listen to live programs (mainly podcasts), and when they do so, they’re busy doing something else at the same time.
The lack of legitimacy regarding the testimony is also a fact, they have the feeling their opinion doesn’t count.
They really want to be thanked for taking the time to testify, because it’s engaging and time consuming.
They also need an easy and well explained process on how to do it, because they’re all super busy so it has to be quick and simple.

So how do we create a feature that matches all their expectations? It’s time to use new tools super helpful for this.

Value Proposotion Canvas & Job Stories

We used the Value Proposition Canvas to imagine how we could respond to all of their needs and problems in terms of services, offers and value proposition.

After this, we created 4 Jobs stories to understand what motivates the user to interact (with voice note) during a program on the radio?

As there are many similarities highlighted from Value Proposition Canvas, Job Stories and Persona, It’s time to introduce you to Sophie, our primary persona!

User Persona

Now you have met Sophie, let’s jump into a typical moment of her daily life with the User Journey.

User Journey

All the emotions she lives during this journey helped us to find several ways to improve the interaction feature within the app. Let’s define the problem statement to see in which direction we went for the ideation step.

DEFINE

Problem statement, hypothesis statement and How Might We questions

Let’s see how this comes to life by jumping into the ideation stage.

IDEATION

User Flow

You can see below our User Flow, which is a visual representation of the path Sophie can take to react to a program within the app — from the home page to the program grid.

We can now move to our Mid-Fi prototypes, it will be easier for you to understand this user flow with a more detailed representation of France Inter app’s screens.

Mid-Fi Prototypes

We created it from the current app, made some changes and added a new screen into the app (the last one on the right). We completed several tests and highlighted here all the feedback in red.

If you want more details to understand what changed from the gathered feedback, you can read the following bullet points or move directly to the next part:

On the “Home Page” (1st screen): we redesigned the “react” picto to make it more clear, we increased the size of the “react” button to make it more visible and we added a new picto to the tab bar to create our new “notification” page.
On the overlay “reaction” (2nd screen): we just classified the different ways of reactions and added a “new” label to highlight the ‘voice note’ feature.
On the “program grid” (4th screen): we added the “react” picto in the current program grid (left side) and in the sticky player at the bottom (this is a new proposal vs the current app where you only have the “play” picto for now).
On the “broadcasted page” (5th screen): we added a reassuring message to encourage the user to react and changed the design of the central card to make it look more like a button (because nobody understood this was clickable on the current app screen).
On the “VoXM webapp” process (screens 6 to 10): we reduced the journey from 5 different screens to 3, and added personalized content at the end.
On the new “Notification page” (last screen): we wanted to offer a more personalized experience by adding features that don’t exist today: the reaction follow-up, the upcoming favorite programs, the suggestions you may like, etc.

Thanks to all the amazing feedback we collected from our tests, we were able to start our Hi-Fi prototypes. Before revealing the result, let’s see all the elements we used to style our prototypes.

DESIGN

Style Guide

Here, you can find the different colors, typography, iconography, and components we used to create our final prototype.

Atomic Design

As we designed for iOS we created an atomic design: you can see below an example of our “broadcast page”. It’s organized in atome (icons, colors), molecules for tap bar and buttons; and organisms which gather the previous elements together to create a template of the page.

Now you know everything about users, our ideas, prototypes and design, I think it’s time for the big reveal!

HI-FI PROTOTYPE

Video Hi-Fi Prototype

Here are some additional comments to help you to understand what you can see on this video. I also add in italic the changes we’ve made from the Mid-Fi prototypes, after some other tests:

Home page: “Grand Bien vous fasse” is broadcasted in live, you can listen, react or watch the show. If you want to know more about today’s program, just click on “programs” in the tap bar.
Changes from mid-fi: we finally detached the “notification” picto at the top right of the screen and came back to the initial tap bar of the current app, removing our “my alerts” picto which was not clear for the users.
Program Grid: you can see all the programs of the day. Here you click on the live program to have more information about it.
Broadcast page: you have all the information on the broadcasted program (article, speakers, explanation of the “voice note” feature at the bottom), you can have more details on your favorite show by clicking on the top central card, but more importantly, you want to react to this program!
Changes from mid-fi: we redesigned the top central card to make it look more like a button, so the user can understand it’s clickable.
Overlay reaction: you can respond vocally by using the new “voice note” feature (or by writing or using Social Media) and you click on it to share your testimony.
VoXM webapp process: you enter your information and start recording.
When you’re done, you click on stop (you can listen to your message, or restart if you’re not convinced). Once you’re ready, you send it and have a personal thanks message for your participation.
Changes from mid-fi: we add a stop recording button during the voice note process to make it less confused.
Back on the Home page: you have a new notification!
Notification Overlay: you can see here a recap of all your interactions within the app (for today with the little red dot, or in the previous days with a light grey background).
Changes from mid-fi: instead of adding a new page into the app which was very confusing for the users, we decided to create a simple overlay to focus on your activities within the app: we categorized them by days and insisted on different pictos for each action you did (play, podcast, share).

NEXT STEPS

As we had time at the end of our project, we decided to redesign the current “favorites” page (additional to the initial brief), because we thought it was possible to improve it regarding the feedback gathered by our interviews or tests:

First we add a new feature at the top by providing visibility on the start time of your favorite programs: we can link it with the new notification feature and send a notification when your program is about to start.
Then we kept the “last episodes” feature but added a filter system to sort them (by guest, host, length, program, etc.)
Finally, we added at the bottom a slider to help the users to discover more programs they may like.

CONCLUSION

I had a lot of fun working on this project, because the Radio France team gave us a lot of freedom during these 15 days. I also learned a lot from their feedbacks, this professional immersion was a good opportunity to improve my skills and to push my thinking further.
I would also like to thank Hélène with whom I had a lot of fun working on this final project. We are both very proud of the work done (we only know UX/UI Design for 2 months, as a reminder 💪🏻), and to have been able to represent our class during the June 2021 Ironhack Hackshow (you can check our 8-min presentation at 1:03:50).