case study: figaro live: interactive live tv

Case studyfigaro live: interactive live tv

project overview

The project started a few months before the launch of the new Figaro app. With less time to spend on this project that was ending, I was up for a new challenge. That's when I started getting involved in the Figaro Live project.

The goal was to create a brand new kind of 24/7 live tv, that would enable the Figaro readers to have real-time interactions with what was happening live. The readers would be able to ask questions, answer polls, give their opinions... And all those interactions would influence what was happening live. The project was pretty much Le Figaro meets Netflix meets Facebook Live meets YouTube. Mindblowing, isn't it?

Le Figaro was to invest 7 million euros in three years for this project.

why launch a tv channel for a newspaper?

creating a brand new product from scratch

Usually at Le Figaro, teams are geographically split. Designers sit with other designers, PMs sit with other PMs, devs sit with other devs, and... well, you get the idea.

Building a squad
To work on this exciting new project, we decided to do things differently and set up a squad, made of a product manager, one lead dev, a React/JS expert, 1 junior designer and myself (playing the part of the lead UX/UI designer). We were gathered in this beautiful (kind of secret) rooftop office, at the 8th floor of the Figaro building. The idea of having a dedicated space for the squad was to be able to only focus on the project, so we could work harder, better, faster, stronger. We wanted to build a proof of concept and be able to iterate fast.
First, asking questions
Creating this product for Le Figaro was a real challenge. Video was obviously not our core business. We were really good at news, how good would be at live programs and replays?


To solve all these questions and align the visions, the squad needed to get all of the ideas out there and decide what direction we wanted to take. So we spent hours workshopping on the benchmark (our main inspirations were M6 Replay, Netflix, YouTube, Periscope and Twitch), the main screens and features we wanted.

In the end, here's what we agreed we wanted for the app:

wireframes & testing

Once we agreed on the basic features, we started wireframing what we considered the central page of Figaro Live: the detailed video page, which would contain the video/live itself, the chat, a layer of interaction above the video, and all the basic information about the video/program.

Once this page was done, we moved on to another big fish: the home page.

Each step of the process was validated by sessions of user tests. Since the project was top secret, we had to restrain our pool of testers within Le Figaro. But that's the good thing about big companies: you always find people, younger and older, who aren't acquainted to the project and who aren't necessarily technophiles.

With our user tests, we were mainly testing the usability of our new product, and the understanding of what was actually happening on screen. One of our focus point was to not repel the current audience with things they might not understand or consider useless or, worse, noise.

a look at the result

After months of design, here's a quick overview of what the team accomplished (I worked on the design with the talented Nicolas Gautier and Arthur Fourniol).
Here are a few prototypes, to show how we imagined the transitions/animations:


Figaro Live was actually much more than "just" a website. The whole design team also got to work on opening credits of the new programs (I worked on the 2 videos below with the aforementioned Arthur).
I also got to create part of a set. One of the studios that was built for Figaro Live was located at the heart of the editorial staff. They were actually not so fond of the idea of being filmed all day long and being blinded by the lights. Part of the solution was to create some kind of filter on the glass walls of the studio so the journalists in the background would have more privacy. Here's what we came up with :
Head back to home page