LE PROJET

L'objectif de ce projet est le passage du journal quotidien Libération aux supports numériques. Il fallait mettre en place un e-magazine d’information hebdomadaire qui permette de créer une expérience personnelle et qui soit vraiment proche de l'utilisateur. Il a donc fallu étudier l'histoire du journal, son organisation, les lecteurs et potentiels lecteurs, la concurrence, et avoir une réelle approche d'UX Designer. De plus, l'identité graphique de Libération est vraiment très forte et il fallait la conserver pour que la marque reste reconnaissable et que les usagers actuels n'aient pas l'impression de lire autre chose.

ÉTAPE #0 : TEST

Cette étape n'a pas eu un franc succès, même à mes yeux. L'idée était de reprendre les nuages de mots-clés pour les mettre en avant dans chaque catégorie et offrir une nouvelle navigation. Les blocs colorés sont modulables (on peut les changer de place) mais à vrai dire, seul le système d'historique était réellement intéressant. Il s'agissait plus d'un "test" que d'une réelle proposition (d'où le "Étape #0").

Maquettes de la version #0

ÉTAPE #1 : EMPATHIZE

Les recherches se basaient sur le fameux Café de Flore : situé à Saint-Germain des Près (dans le 6e arrondissement de Paris), il est dans les années 1930 le lieu de prédilection de tout le Paris littéraire. L'idée était de recréer cette ambiance et ce haut lieu de débats ; l'utilisateur a alors la possibilité de s'inscrire pour venir participer à des débats (organisés par Libération) sur des sujets de société. Cette version portait le nom "Agora" en référence à son étymologie.

Dans la Grèce antique, l'agora (du grec ἀγορά) désigne le lieu de rassemblement social, politique et mercantile de la cité. C'est une composante essentielle du concept de polis, à tel point qu'Aristote traita les barbares de non-civilisés, car ils n'avaient pas d'agora.

-- Wikipédia

Les notions de partage, de communauté et d’expression sont fondamentales pour le journal Libération. De plus, sa doctrine est :

"Peuple, prends la parole et garde-la"

ÉTAPE #2 : IDEATE

Tous les mardis, environ cinq sujets ouverts étaient proposés par le journal. Les utilisateurs avaient jusque jeudi soir pour en discuter, discussions qui étaient modérées par au moins un journaliste. Le vendredi était dédié à la préparation des conférences qui avaient lieu le lendemain : le nombre de places étant limitées (par le lieu, de la même manière que les fameuses soirées "*di*/zaïn"), les utilisateurs devaient s'y inscrire à l'avance. Il était possible pour le journaliste qui modérait la conférence d'inviter des personnes expertes sur les sujets abordés. Le dimanche permettait aux journalistes de préparer des dossiers beaucoup plus complets, synthèses de la semaine, qui devaient sortir le lundi. Puis rebelote la semaine d'après ! Dans la mesure où Libération n'a pas assez de journalistes pour lancer des enquêtes sur plusieurs mois, permettre aux utilisateurs de débattre et d'apporter leur contenu semblait être un très bon compromis. Mais étant donné qu'ils n'ont pas l'expertise d'un journaliste, la présence d'au moins un de ces derniers est nécessaire.

Timeline pour le concept Agora

ÉTAPE #3 : PROTOTYPE

Une fois cette partie mise en place, il fallait attaquer l'arborescence : c'est ce qui allait définir la manière dont les utilisateurs allaient naviguer à travers l'application. Il était nécessaire que les informations soient accessibles en un minimum de clics, et il fallait détailler toutes les actions possibles sur tous les écrans. Un des premiers obstacles que les utilisateurs allaient rencontrer (et malheureusement inévitable) est l'inscription. Les dossiers peuvent être déverrouillés moyennant (finance) une souscription à un abonnement, l'inscription était donc obligatoire pour lier les informations bancaires au compte. De plus s'ils s'étaient abonnés, ils avaient aussi la possibilité de s'inscrire pour participer aux conférences qui avaient lieues le samedi (et récupérer les synthèses qui tombaient le lundi suivant).

Définition de l'arborescence

La phase suivante concernait les wireframes et le design. Maintenant que l'arborescence avait été établie, c'était beaucoup plus clair de savoir quelle fonctionnalité était disponible à quel endroit, le nombre de boutons cliquables, les informations à afficher, etc. Il fallait aussi conserver les codes graphiques de Libération, à savoir ses typographies si particulières, ses codes couleurs, etc, mais surtout la mise en avant de la photographie qui rapproche l'utilisateur au cœur du sujet ; Libération est plus qu'un journal, c'est une expérience humaine. Certains principes de navigation ont aussi été réadaptés après avoir étudié la concurrence.

Aperçu des wireframes pour tablette
Article sur Ébola

Animations de navigation

ÉTAPE #4 : DEFINE & (RE)PROTOTYPE

Le dossier qui suit contient toutes les phases de la version finale: il présente ce que l'on a étudié plus haut, à savoir le champ de recherche (Empathize) et le concept (Ideate), et y introduit les personas (Define) et de nouveaux wireframes et design (Prototype).

Consulter le fichier PDF

CONCLUSION

C'est mon premier travail et probablement le plus complet et le plus long que j'ai effectué à ce jour en tant qu'UX Designer. Il m'a permit d'étudier les fondements de cette discipline et de comprendre le monde journalistique. Le niveau de rigueur exigé sur chaque phase était très haut, et j'ai pu m'exercer sur la phase DEFINE avec la technique des post-its.

LE MOT DE LA FIN

Voilà, vous n'avez plus d'excuses pour ne pas vous tenir informés ! Vivez une vraie expérience humaine (:

Ce travail est la propriété de son auteur, et ne saurait être utilisé, reproduit, représenté, ou utilisé sans son accord préalable et explicite.