En bonne compagnie : comment les éditeurs utilisent Figma pour faciliter le design de l'actualité
Pour des titres de référence comme le New York Times, The Economist et le Minnesota Star Tribune, un design de qualité contribue à un journalisme d'excellence. Voici comment les équipes des médias utilisent Figma pour collaborer sur le design de l'actualité et explorer de nouveaux formats.
Partager En bonne compagnie : comment les éditeurs utilisent Figma pour faciliter le design de l'actualité
Illustration principale par André Derainne
Avec la transition vers Internet et le mobile et l'exploration de nouveaux formats, les médias d'information se sont complètement réinventés au cours des deux dernières décennies. Alors que les éditeurs cherchent des moyens de tirer leur épingle du jeu à l'ère numérique, le rythme du changement ne fait que s'accélérer. Compte tenu d'un marché publicitaire imprévisible, les stratégies basées sur les abonnements ont le vent en poupe. Mais si les lecteurs sont habitués à payer pour la presse écrite, ce n'est pas le cas en ce qui concerne les informations en ligne. Pour les publications traditionnelles, cette situation pose un défi : comment nouer des relations avec de nouveaux lecteurs au sein de cet écosystème numérique et informationnel en pleine évolution.
Pour répondre aux exigences du moment, ces entreprises de médias font appel à Figma. Que ce soit pour redessiner une application, introduire une police de caractères ou lancer un site web, les équipes doivent rester synchronisées pour garantir précision, clarté et accessibilité tout en expérimentant de nouvelles façons de diffuser l'actualité. Nous avons rencontré des leaders des médias afin de découvrir comment ils gèrent le changement.
Comment le New York Times a lancé une refonte complète de son application
Depuis le lancement de son site web dans les années 1990, le New York Times s'est progressivement transformé en une marque axée sur le numérique. Son modèle économique actuel se concentre sur la conversion des abonnés à l'une de ses offres numériques (Actualités, Jeux, Cuisine, Audio, Wirecutter et The Athletic) en abonnés à l'ensemble de ces produits. Avec plus de 11,4 millions d'abonnés au total, dont près de la moitié paie pour plus d'un produit, on peut affirmer sans risque que cette approche porte ses fruits.
Lorsque leTimes a repensé son application, qui a été relancée en octobre 2024, il a conservé cet écosystème de produits au cœur de sa stratégie. Dans la version précédente, les lecteurs devaient appuyer et faire défiler plusieurs sous-rubriques pour trouver les articles et les dossiers qu’ils souhaitaient consulter. Désormais, les utilisateurs accèdent à la rubrique « Today » (Aujourd’hui), qui met en avant les dernières actualités, tandis qu’une barre de navigation en haut de la page les aide à découvrir d’autres rubriques et produits. Chacun possède son propre écran d'accueil, ce qui facilite la découverte de tout ce que leTimes propose au-delà des principaux titres à la une du jour. « L’idée, c’est que tous les autres éléments gravitent autour du soleil, et ce soleil, c’est le journalisme », explique Jak Horner, Principal Product Designer auTimes.
Tous les autres éléments gravitent autour du soleil, et ce soleil, c'est le journalisme.
Plutôt que d’être une « super-application » regroupant toutes les offres du Times dans un fil d’actualité central, l’application encourage les utilisateurs à faire défiler d’autres fils d’actualité, chacun doté de sa propre identité visuelle. La rubrique Lifestyle, par exemple, présente une grille d'images sur lesquelles sont superposés des titres — une adaptation d'un composant visuel que leTimes appelle un « poster » — tandis que la rubrique Opinion propose des titres stylisés qui véhiculent un point de vue différent.
Figma est l’un des outils auxquels l’équipe a eu recours pour gérer l’ampleur, la complexité et le nombre de parties prenantes impliquées. Les rédacteurs en chef des différentes rubriques, les ingénieurs et la direction ont tous dû travailler de manière asynchrone sur le fichier, aux côtés, bien sûr, du groupe « storytelling » : une équipe de designers qui collabore avec la rédaction pour créer des formats de reportages intégrant images, texte, vidéo et audio dans diverses mises en page. Peter Rentz, Principal Product Designer au Times, appelle cela « définir la forme même du journalisme ». Au lieu d'une collaboration par-dessus l'épaule, explique Peter, « c'est plutôt, 'Allez, on se connecte sur Figma.' Nous n'avons pas besoin d'être en visioconférence ou de partager notre écran. » Comparé aux anciens workflows, Jak n'a pas eu besoin de créer autant de présentations ; il a pu, à la place, partager des prototypes directement dans Figma.
L'équipe apprécie de pouvoir se faire immédiatement une idée du projet sur lequel travaillent ses collègues. « De temps en temps, je regarde ce que fait Jak, juste pour m'assurer que je ne fais pas exactement la même chose », commente Peter. « C'est une belle façon de travailler ensemble sans se marcher sur les pieds. C'est une manière efficace de travailler. »
L'équipe design a organisé des séances de brainstorming sur FigJam, en s'appuyant sur ces sessions pour élaborer des esquisses dans Figma concernant les éléments de chaque rubrique de l'application. Par exemple, il était crucial pour les éditeurs de trouver le bon modèle visuel pour la couverture de l'élection présidentielle américaine de 2024, qui changeait d'heure en heure. Ils ont considéré des questions telles que : à quelle fréquence le panneau électoral devrait-il changer chaque jour ? Quels éléments doivent figurer dans cette rubrique plutôt que dans la rubrique Today ? Comment pouvons-nous mettre en avant les éléments visuels ? À la suite de ces discussions, les designers Chen Wu, Nate Clancy et Frannie Ello ont développé un panneau électoral avec une nouvelle fonctionnalité vidéo qui permet aux utilisateurs de diffuser des reportages en direct.
Chen Wu, Lead Product Designer, et Jay Guillermo, Senior Product Designer, tous deux du New York Times, expliquent lors de la conférence Config 2023 ce qu’implique le fait de « concevoir au rythme de l’actualité ». Regardez leur session ici.
L'équipe design s'efforce de répondre aux besoins éditoriaux à l'aide des composants existants, mais il lui arrive parfois de devoir s'écarter du plan initial. « Il y a ce jeu de tensions entre les design systems et la manière dont nous utilisons les composants », explique Peter. « Même si nous disposons de composants dans le code, nos parties prenantes dans les médias s'intéressent davantage à la meilleure façon de traiter un sujet et à une expérience utilisateur optimale. »
Tout cela a pour but de concevoir au rythme de l'actualité. « Cette interaction entre le chaos et l’imprévisibilité de l’actualité, d’une part, et la stabilité inhérente à la création d’un produit à plus long terme, d’autre part, constitue une source constante de créativité », remarque Thea Lorentzen, Product Design Director auTimes. « Il s'agit en quelque sorte de concevoir pour l'incertitude. »
Comment The Economist a déployé une police de caractères adaptée au numérique
Au début de l'année dernière, The Economist a lancé deux nouvelles polices, Economist Serif et Economist Sans, ainsi qu'un logo actualisé. Bien que la publication ait fait l'objet d'une refonte plus approfondie en 2018, « elle s'adressait à un public davantage tourné vers le support papier », explique Adam Morris, Head of Product Design chez The Economist. Depuis, le lectorat de la revue a progressivement adopté le numérique. Plus de 65 % des abonnements sont exclusivement numériques, par rapport à 35 % il y a quatre ans, et 85 % des nouveaux abonnements sont numériques. Dans le cadre de sa stratégie multiplateforme, The Economist avait besoin d’une police capable de s’adapter aisément à tous les supports, tout en rendant hommage à l’héritage de sa marque.
« Il existe de nombreux contextes différents qui n’étaient pas une priorité en 2018 », précise Adam, soulignant que l’entreprise a élargi son lectorat via sa newsletter et son application, ainsi que son audience sur TikTok, LinkedIn et Instagram. « Votre typographie doit désormais être beaucoup plus performante. Mais surtout, les lecteurs sont prêts à payer pour lire nos articles, et il faut donc disposer d’une police agréable à lire. »
Il existe de nombreux contextes différents qui n’étaient pas une priorité en 2018. Votre typographie doit désormais être beaucoup plus performante.
Le typographe Henrik Kubel de la fonderie A2-TYPE a collaboré avec Stephen Petch, Creative Director chez The Economist, ainsi qu'avec Adam et son équipe pour créer les nouvelles polices de caractères variables. S’inspirant de la riche histoire du journal, fondé il y a 180 ans, la police à empattement fait référence à Plantin ; la police sans empattement, à Venus. Adam et son équipe ont fait appel à Figma pour s'assurer que chaque forme de lettre s'adapterait à divers cas d'utilisation, des graphiques au corps de texte en passant par les titres en gras. Parfois, certains caractères semblaient trop chargés une fois placés, ou juraient avec la mise en page. À titre d’exemple : l’équipe a longuement débattu de la longueur de la queue de la majuscule « Q » avant de finalement retenir trois versions, allant d’une version courte pour les lettrines à une version plus longue destinée à des applications spécifiques, telles que les titres ou les cartes de vœux d’entreprise.
« Grâce au nouveau système typographique et à Figma, nous pouvons offrir une expérience fluide en toutes circonstances », déclare Mark Mitchell, Principal Product Designer chez The Economist. « La gamme typographique et la grille sont suffisamment flexibles pour s’adapter au site web, à l’application et aux newsletters. » L’équipe centralise dans Figma ses polices de marque dans une bibliothèque de références, ce qui facilite le déploiement des modifications sur toutes les interfaces. « C’est tout simplement une meilleure expérience, et nous disposons d’un meilleur contrôle. »
Pour la refonte de 2018, The Economist a utilisé Sketch pour concevoir les interfaces, InVision pour le prototypage, et Zeplin pour transmettre les réalisations à l'équipe d'ingénierie. Pour ce projet, les workflows ont été consolidés dans Figma et Dev Mode, ce qui a permis à l’équipe de mettre en œuvre les modifications sans avoir à créer des ressources distinctes pour divers programmes. « Nous travaillons tous au même endroit, plutôt que dans trois ou quatre outils différents », souligne Adam. « Cette approche a facilité la transition d'une tâche à l'autre et réduit les coûts, mais a surtout favorisé la rapidité et la simplicité. Figma avait tout ce dont nous avions besoin. »
L'équipe utilise Dev Mode sur la majorité de ses projets depuis l'année dernière, et estime que l'outil d'inspection et son lien avec les variables de Figma sont les fonctionnalités les plus utiles. The Economist utilise des variables pour l'espacement, les couleurs, les thèmes et la typographie, et toutes ces variables sont répercutées dans le code sous forme de tokens de design sur ses plateformes web et mobiles. « Les variables sont vraiment utiles pour les designers, car elles fournissent un ensemble de valeurs fixes qui permettent de garantir la cohérence de notre langage visuel et de réduire le nombre de décisions que nous devons prendre, mais c’est surtout lorsqu’on travaille avec des ingénieurs qu’elles révèlent tout leur intérêt », explique Mark. Grâce à Dev Mode qui synchronise des tokens de design dans le code et des variables dans Figma, les ingénieurs peuvent copier-coller ce qu’ils voient en Dev Mode sans avoir à multiplier les allers-retours avec les designers, ni à passer par le service d’assurance qualité lors des revues.
Les variables sont vraiment utiles pour les designers, mais c’est surtout lorsqu’on travaille avec des ingénieurs qu’elles révèlent tout leur intérêt.
Ce projet typographique a précédé la prise en charge variable de la typographie ; l'équipe s'est donc appuyée exclusivement sur les styles de texte. Depuis, elle a mis à jour tous les styles de texte en associant les tailles de police à leur échelle typographique, ainsi qu'aux variables d'interligne et de police. « Nous disposons de centaines de styles de texte ; le fait de pouvoir désormais gérer ces valeurs de manière centralisée à l’aide de variables nous fait gagner énormément de temps », précise Mark.
Comment The Minnesota Star Tribune a réinventé sa marque pour séduire de nouveaux lecteurs
The Minnesota Star Tribune, qui compte parmi les 10 quotidiens les plus diffusés aux États-Unis, s'est donné pour mission de devenir un modèle de référence pour l'actualité locale. Le journal bénéficie certes d’un lectorat fidèle, mais sa présence en ligne avait besoin d’une refonte pour attirer un public plus jeune et assurer la pérennité de l’entreprise pour les années à venir. De fait, entre le site pour ordinateur de bureau et le site mobile, l'expérience utilisateur différait sensiblement. Les deux sites contenaient beaucoup d'informations et de texte, et reposaient même sur des bases de code différentes. « Nous étions dans une situation assez fragmentée », reconnaît Josh Penrod, Head of Design au Star Tribune. « Nous ne disposions pas d’un site réactif unique, ce qui nuisait à la confiance envers la marque. »
En collaboration avec l'agence numérique primée Code and Theory, le Star Tribune a développé un nouveau site web réactif, lancé en août de l’année dernière parallèlement à une refonte complète de la marque, comprenant notamment un nouveau logo et une nouvelle typographie. Désormais, lorsque les lecteurs se rendront sur le site du Star Tribune depuis leur mobile ou leur ordinateur, ils bénéficieront d'une expérience similaire. « Nous avons abordé ce projet avec l’idée d’éliminer les obstacles et d’adopter une approche indépendante du type d’appareil pour le contenu, les articles et les récits », explique Francisco Seiz, Senior Design Director chez Code and Theory. « Il est essentiel de proposer une expérience totalement fluide et transparente, car dès qu’elle ne l’est plus, elle provoque le rejet chez les lecteurs. »
Cette refonte a également donné lieu à l'adoption de Figma, ce qui a permis à Code and Theory et au Star Tribune de prendre connaissance de leurs modèles conceptuels et de leurs processus respectifs, et de présenter les modifications en temps réel. Auparavant, l'organisation utilisait Sketch et la suite Adobe Creative, et il y avait eu quelques tentatives infructueuses de création et de maintien d'un design system. Comme l’explique Josh : « Voir un design system dans Figma et constater la fluidité avec laquelle on peut y travailler, c’est vraiment magique. » L’équipe de Francisco pouvait montrer, dans le feu de l'action, comment choisir l’une des six instances d’un composant si un design devait être ajusté. « Lorsque vous participez à un examen de design en direct avec de nombreuses parties prenantes, on peut difficilement surestimer à quel point cet outil est efficace pour gagner en rapidité et obtenir l’adhésion de tous », poursuit Josh. « Chacun a pu apporter son influence, son inspiration et ses suggestions sans jamais quitter le fichier de design », confirme Francisco. « Il en est résulté un processus véritablement transparent, ouvert et honnête tout au long du projet.
Chacun a pu apporter son influence, son inspiration et ses suggestions sans jamais quitter le fichier de design.
Les équipes de Code and Theory et du Star Tribune ont travaillé presque exclusivement dans Figma, depuis la phase d’ateliers stratégiques jusqu’au prototypage et aux itérations. Pendant les sprints de design, il était utile de se référer aux diagrammes et wireframes qui permettaient de définir la voie à suivre. « La beauté de ce processus résidait dans le fait que nos livrables n’étaient pas seulement des créations finales », souligne Josh. « Nous pouvions présenter notre travail et mettre directement en avant les décisions stratégiques ainsi que les données clés. » Cette méthode de travail est désormais devenue un modèle que l’équipe prévoit d’utiliser à l’avenir.
À la mi-juillet, ils ont procédé à une relance en douceur du site en conservant leur typographie existante, afin de recueillir les retours des utilisateurs et de tester la vitesse et les fonctionnalités ; trois semaines plus tard, ils ont déployé de toutes nouvelles polices de caractères. Désormais, le site de TheMinnesota Star Tribune semble plus soigné et offre une expérience cohérente, sur ordinateur comme sur mobile. Le design est simple, mais il répond à l’objectif du projet : l’expérience utilisateur du site ne doit pas faire obstacle au journalisme. « Je ne sais pas comment nous aurions pu y parvenir sans l’efficacité d’un outil tel que Figma », conclut Josh. « C’est l’outil que nous attendions... depuis des années. »
Je ne sais pas comment nous aurions pu y parvenir sans l’efficacité d’un outil tel que Figma.
La relance n'a pris que sept mois, mais le travail de replatforming interne au TheMinnesota Star Tribune est en cours. L'espoir est que davantage d'équipes à travers l'organisation adopteront Figma. Les UX designers utilisent actuellement FigJam pour créer une charte d'équipe, et l'équipe UX expérimente un plug-in d'annotation afin de mieux communiquer avec les fournisseurs qui ne sont pas familiers avec Dev Mode. Et plus tôt ce mois-ci, Josh a acheté un Figma Creator Micro, un clavier personnalisé pour les raccourcis Figma. « Si je n'étais pas enthousiaste au sujet de cet outil, je ne ferais pas cela », affirme-t-il.
Alors que le secteur de la presse cherche des moyens de fidéliser ses lecteurs, de conquérir de nouveaux publics et de consolider son activité, la nécessité de travailler en collaboration et de manière efficace ne fera que gagner en importance, notamment compte tenu de l'évolution rapide des technologies numériques. Pour les professionnels de l'information, Figma s'est révélé un outil essentiel pour s'adapter à ces changements. Pour découvrir comment cet outil peut profiter à votre équipe, contactez-nous pour une démo.
