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.
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?
- Although Le Figaro is an old institution of the French press, it's always been at the forefront of media digitalization. It has been one of the first newspapers to create its website and started merging its web and print editorial staff pretty early. So investing into an emerging sort of media was kind of a consistent choice.
- With the democratization of 4G and optical networks, video consumption was booming. And while pay-per-view ad revenues were slowing down, advertising on videos seemed like a promising new market.
- Le Figaro already had a couple of video programs that were broadcast on its website ("Le Talk Politique", a daily political interview, and "Le BuzzTV", a weekly interview by the TV Mag team). Creating a whole platform to host them and turning taped programs into live programs was like creating a whole new ambition for them.
- As a conservative newspaper, Le Figaro has a faithful audience that is structurally older. Launching a new concept would (hopefully) appeal to a younger audience and bring new people to the brand.
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.
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?
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?
- We had to work without much data to guide us. Sure, we had some videos accompanying our news articles, but they were more of a bonus than the main attraction.
- What kind of programs would the platform be broadcasting? Can you really appeal to a younger audience with conservative contents, hosted by 40+, all-white, people?
- Where did we want to land in terms of product? At the time we began the project, FB Live hadn't launched yet, Periscope was still a shiny new toy and we still thought Snapchat was possibly going to steal FB's thunder. Live, interactive videos were more of video-gamer thing, with Twitch. Could we create a mainstream experience, that would appeal to the young without scaring the faithful audience?
workshopping
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:
In the end, here's what we agreed we wanted for the app:
- As a user, I'd be able to chat live. While replaying a video, I'd be able to replay the messages as if they were live. I might also add mine during the replay.
- As a user, I'd be able to interact with the live programs. A hostess/host would be able to launch a poll to ask my opinion, or I'd be able to display an emotion linked to a certain timeframe.
- As a user, I'd be able to hide all those interactions if I couldn't bear them.
- As a user, I'd be able to access all the past episodes of a program.
- As a user, I'd be able to have an account and customize my experience by adding some favorite programs of mine and have them displayed quicker when connected.
- As a user, I'd be able to see what the most popular videos/programs are.
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.
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:
bonus
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 :
