MYTF1 streaming service

Context

MyTF1 is a video streaming service of the French TF1 group deployed on the OTT, responsive web, AMP, Android, and iOS platforms. The service features direct and replays from 5 channels (TF1, TF1 série, TMC, TFX). Our redesign goal is to provide a quality experience as excellent as their regular TV.

00_TF1@2x
01_TF1@2x

Challenges

+ General summer vacation period with World cup happening in France 
+ New hires within the agency in the same period under my responsibility for the trial period
+ High risk and profile project for the agency who is culturally in ergonomics instead of holistic design
+ The client was in the process of learning agile process and re-organization of the leadership team

Approach

+ Directing parallel tracks for speed. Track A stream to create a high-fidelity reference design to ensure the board of directors sign-off. Track B to provide collaborative workshops to clarify the client's visions and stakeholders' alignments

+ Communicating a coherent rationalization of design
+ Being present to ensure the design delivery and guiding client in design decisions.
+ Being firmly directive by doing vs. creating ground for exploration to cut execution time

Strength

An eye and know-how on details of the design (visual and interaction). Knowing the relation between business impacts and design directions.

03_MYTF1@1x
00_TF1_Divers-1

Outcome

24% viewership increase for the top 10 programs for replay. I would like to think that our work contributed to that increase. 

01_TF1_Divers_mob@2x-1

Outcomes

24% viewership increase for the top 10 programs for replay. I would like to think that our work contributed to that increase. 

Onboarding & Framing

The framing process is a standard one with many high-resolution design comps as we are dealing with the entertainment industry. 

  1. Service benchmark + Existing analytics analysis
  2. Proto-personae & MVP workshop
  3. Design Thinking workshop
  4. Information architecture audit and recommendations
  5. High-rez targets UI design for each persona.
  6. High-rez video player reference prototype

I was confident enough to be able to improvise co-creation workshops for digital products despite an aggressive schedule. So, I supported my collaborator to learn and do the co-creation workshop for personae & MVP. Firm guiding and rehearsing made the workshop successful in confronting people's vision of the service. 

Among the two reference designs proposed, the client decided to go with the conservative White theme design. 

01_MYTF1_Divers

High-Fidelity Prototype

For the entertainment industry, the critical experience is the video player. We are not just testing the mental flow of step by step form filling. The fluidity of the interaction is part of the emotional experience. The team worked hard to create beautiful prototypes and design comps. 

Made for presentation with an emphasis on the "live" feature set for a native player.

User test version. Home page.

User test version. The video player portion.

Concept to Design

Design development started with the first set of visual components delivered on Zeplin at the end of the fixed price contract. We had a prototype of the video player as well as test results of the concepts. That made the second phase easier focusing on hashing out the design details.

AttrakDiff_logo

Beyond usability

The look cannot be "usability tested" because it is not about usability but a mixture of perception created from visual communication and what users assume as a personality of a brand. The online test had included the Attrakdiff analysis. We were aware of how our look&feel was perceived. We were right on the spot of the conservative with the White theme, and we had conservative personae as a primary focus.

Doubt

Hesitation arises as many people see Netflix and Youtube as an example to follow and copy. Also, as time passes, anxious people inevitably start doubting previous decisions. The dark theme came in the mind of all. The white theme was dropped out for the video page from the beginning. It certainly added up our engagement time on their budget.

Artwork vs. Container

The business of each program editorial is about the thumbnail. It is a call to action and critical text elements for the SEO. We did not have the luxury for an A/B testing to determine the result of thumbnail style. I used an accessible metaphor to convince stakeholders that the styling of thumbnail makes the brand.

Maintaining the quality of arts

The client was open-minded to receive my advice on revising the in-house artwork production department flow by using the service design method. I believed it was important that after the rollout, they kept the same level for the artwork that goes into the container we were building. 

We co-created with the client the ways of working. The proposed governance model takes time by converging the design responsibility of the group into one. Regardless, they added more staff and maintained the quality of the artwork by hiring an additional resource in the graphics department. 

My personal learning

+ People tend to overestimate their capabilities to execute.
+ Communicating the design from the client's perspective does not come naturally to us. You need to take a distance from the detail of the production and contextualize the intent from a broader business perspective.
+ When you are directive, you cannot suddenly let the team be autonomous.

Role

Project Director - Team lead

Tasks

+ Managing, estimating, budgeting & planning
+ Communicating and explaining design activities and design framework
+ Sprint Zero: briefs, workshops facilitation, synthesis, information architecture, design reviews, design guidelines production, revising the test guide.
+ Development Sprint: design reviews, design decision guidance, service design lead for rendering the state of the production workflow, reviewing test guides, contextual interviews, and advising on the re-organization and artwork design guidelines production.

Team

User Research: Ayaka, Christelle
Design: Charlotte, Loic, Ozgur, Chiab, Alexandra, Mathieu, Arnaud, Kevin, Henrik, Zhou, Sergio

Selected Works

Ovi OSDesign System

Emotional UI?Design Language

MSD ConnectDesign Language

Aéroport De Paris Indoor MapInteraction Design

Public TransportVisual + Interaction Design

Drive 2.0Interaction Design

Punkt MP01 |LockedVisual + Interaction Design

ADP POI Admin ToolInteraction Design

MiniDrones UI | LockedVisual + Interaction Design

Lexis Nexis Lean UX |LockedLean UX Service Design

Here Technologie | LockedDesign Performance

Cloud Electronics | LockedForesight Design

Akemi Tazaki All rights reserved 2020 - 2021 Created by using Semplice