Case study: Improve the reaction via “voice note” feature in a native app

Final Project: Hackshow / France Inter new feature — UX part 1

This is it: the final project of the Ironhack bootcamp!!

I was lucky enough to be paired with my amazing partner (Julie Drouillard ❤️), and we had the wonderful opportunity to work with a real client and put into practice everything we learned before!

As real problem solver, our job was 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 the background to discover our client, our challenge and the competition…

Our client: France Inter

As you may know, France Inter is a French national public radio, part of Radio France Group. It’s the 1st 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 (obviously)
• Speak and react live in the programs: you can ask questions, testify, give an opinion (via telephone, email, social networks and the new fonctionnality: voice note)
• Discover the program grid of today and tomorrow
• Listen to your favorite programs in podcast.

During this project, we were lucky to be surrounded by a great team of professionals working at Radio France: Anne (Product Manager Radio France), Fanny (Digital Director France Inter), Jean-Baptiste (Product Owner App France Inter) and Aurélie (UX Designer Radio France).
Thanks again to them for this great opportunity and the time they gave us!

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. It’s a webapp implemented by a service provider called VoXM.
France Inter is currently 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.

Now, let’s check the competition to see what’s going on in the market.

Our competitive analysis

We benchmarked radio app features to compare them. RTL is the only one to offer a personalized account, but France Inter is the one offering the most features in terms of “interaction with the programs”, and it’s also the only one that allows the voice note reaction.

To understand and know more our users, let’s move to the empathize step!

1 — EMPATHISE

Survey

First, we conducted a survey (via google form) to identify trends. We had 105 respondents.

• 60% of them use the voice command.
• 86% of them have never reacted to a radio program but the voice note feature could interest 60% of them because it’s convenient, quick, easy & interactive.

Qualitative Interview

After this, we conducted qualitative interviews to deepdive the subject, with 7 women from 34 to 41 y.o.

We used the affinity diagram to condense the feedback and bring out the users’ problems.

Some of our user’s quotes.

Here is what we found :

• The temporality is important for the users because they don’t really listen to live programs (they mainly listen 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 important: 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, (which has to be quick and simple).

So how do we create a feature that matches all their expectations?

Value Proposition Canvas

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.

For example: the customer “wants clear information about the voice note functionality” so we will “add an explanation of the voice note process” to answer his needs.

Jobs Stories

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

There are many similarities highlighted from Value Proposition Canvas, Job Stories and Persona (remember: a persona in user-centered design is a fictional character created to represent a user type).

It’s now time to introduce Sophie, our primary persona!

User Persona

Hello Sophie! 👋

Sophie is an active mother with a position of responsibility who listens to the radio every morning to catch up with the news. She also likes to listen to podcasts sometimes.
She uses the voice note functionality on a personal side, to interact with her friends.

Now let’s jump into a typical moment of her daily life with the User Journey…

User Jouney

Sophie is informed about a new podcast by a colleague, it’s about a subject she knows very well. While listening, she discovers that people can testify via voice memo during the program.
Also, she hears one testimony she doesn’t agree with. She would have liked to share her point of view if she had heard the program live. She’s intrigued by this new “voice note” feature so she goes on the app to see how it works.

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.

2 — DEFINE

A problem statement is a clear and concise description of Sophie’s issues that we need to address, so what is it?

Let’s discover it by moving to the ideation stage!

3 — IDEATION

User flow

Julie and I thought about 2 differents scenarios for the user flow: one focus on the path to access the voice noise feature, the other one included a profil creation to regroup center of interest and purpose more target content for the user.
After presenting it to the France Inter’s team and listen to their feedbacks, we decided to focus only on the voice note feature, which give us this

Our user flow

Our User Flow is a visual representation of the path Sophie takes to react to a program within the app — from the home page to the program grid.

We made this to create our mid-fi prototypes, which are a more or less detailed representation of the app. They will help you to visualise :)

4 — ITERATE

Wireframes

“Your most unhappy customers are your greatest source of learning.” — Bill Gates

We can’t say it enough : usability testing is the key!!
You can’t imagine the number of tests, changes we made to find the solution.

Here’s a glimpse of our mid-fi

“It’s not about ideas. It’s about making ideas happen.” — Scott Belsky

After a lot (really A LOT) of iteration on Low-fi, we finally succeed to create our mid-fi. From the current app, we made some changes and added a new screen into the app. 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 explanations on the bullet point below.
Otherwise, you can skip the following bullet points and 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 this, we were able to start our Hi-Fi prototypes.

Before revealing the result, let me share with you the elements we used to style our prototypes ➡️ part 2: UI here

Thank you France Inter ❤