TKM

Une agence UX/UI conçoit l'interface éditoriale qui simplifie la veille stratégique de TKM

2025

Innovation
Conception UX
Conception UI

Conception UX/UI

TKM est un spécialiste de la veille scientifique, technologique et économique reconnu depuis plus de 20 ans. Face au besoin de simplifier la diffusion de contenus stratégiques auprès des équipes internes de leurs clients, TKM a fait appel à Wolfox. En tant qu'agence UX/UI, Wolfox a conçu une interface éditoriale permettant aux veilleurs de sélectionner et partager facilement les informations clés avec les équipes concernées.

Interface éditoriale TKM - Vue utilisateur

Contexte  🎯

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

Intervention sur la plateforme existante  🚧

chiffre un dans cercle bleu clair
This is some text inside of a div block.
chiffre deux dans cercle bleu clair
This is some text inside of a div block.
chiffre trois dans cercle bleu clair
This is some text inside of a div block.
chiffre quatre dans cercle bleu clair
This is some text inside of a div block.
chiffre cinq dans cercle bleu clair
This is some text inside of a div block.
chiffre six dans dans bulle bleu clair
This is some text inside of a div block.

Problématiques

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Problématiques

Comment permettre à des veilleurs utilisant un logiciel métier complexe de partager facilement des contenus avec l'ensemble des équipes de leur entreprise ?
Comment offrir aux équipes internes une vue simplifiée et accessible des flux de contenu stratégique ?
Comment concevoir une interface adaptable à l'identité visuelle de chaque entreprise cliente ?

Contexte

TKM développe des solutions logicielles de pointe pour extraire et analyser, à partir d'un flux massif de données, les informations stratégiques essentielles aux décisions d'innovation. Fort de plus de 20 ans d'expérience et reconnu par des institutions telles que le ministère de l'Enseignement supérieur, TKM accompagne les entreprises innovantes grâce à une combinaison d'intelligence artificielle et d'expertise scientifique. Dans ce cadre, TKM a développé pour l'un de ses clients une interface éditoriale permettant de centraliser et diffuser les actualités stratégiques auprès des équipes internes.

Atelier WHY, HOW, CRAZY

Pour cadrer le projet, l'équipe Wolfox a organisé un atelier de recherche UX structuré autour de la méthodologie WHY, HOW, CRAZY, visant à aligner les parties prenantes sur les besoins réels et à explorer des pistes innovantes.

WHY : pourquoi ce projet ?

L'atelier a mis en évidence les objectifs stratégiques :

  • Mettre à disposition des actualités ciblées pour gagner du temps et améliorer la visibilité des projets internes.
  • Renforcer la culture d'entreprise par un accès facilité à l'information.

Deux profils utilisateurs ont été identifiés : les veilleurs spécialisés (sélection et validation du contenu) et les équipes internes (consultation des informations pertinentes à leur activité).

HOW : comment le mettre en place ?

  • Flux de contenus : mise en place d'un back-office permettant aux veilleurs d'ajouter, d'éditer et de catégoriser les articles.
  • Gestion des accès : définition des droits pour chaque service (accès général ou restreint, publication ou simple consultation).

CRAZY : quelles idées hors cadre ?

La phase créative a généré des pistes ambitieuses, comme un système de recommandation automatisé par intelligence artificielle ou la synthèse automatique d'articles, évaluées selon leur complexité et leur impact potentiel.

Résultats de l'atelier

  • Alignement stratégique : mission claire du site éditorial : diffuser efficacement les actualités pertinentes pour chaque service.
  • Cadrage fonctionnel : deux parcours distincts à concevoir (publication/curation pour les veilleurs, consultation pour les équipes).
  • Priorité n°1 : une interface claire et simple, avec un système de recherche et de filtres efficace.

Wireframing

Suite à l'atelier, l'équipe a réalisé des wireframes low-fi de l'ensemble du site afin de valider la structure et les fonctionnalités du MVP. Cette étape de design UX a permis d'affiner la priorisation des contenus et d'identifier de nouvelles fonctionnalités indispensables.

L'interface devait permettre de mettre en avant certains contenus en une, de faciliter la recherche par filtres, et de rendre la page de détail d'un flux plus digeste que le contenu brut de l'outil IP Metrix. L'équipe s'est appuyée sur une structure rappelant les codes de la presse pour catégoriser et afficher les différents contenus.

Une attention particulière a été portée à l'interface d'administration, conçue pour rester proche de l'organisation de l'outil IP Metrix afin de ne pas déstabiliser les veilleurs dans leurs habitudes de travail.

Wireframes TKM - Structure et fonctionnalités du MVP

Conception UI

L'outil ayant vocation à être déployé pour différents clients, l'interface a été conçue comme un template adaptable à l'identité visuelle de chaque organisation. Ce travail de UI design s'est appuyé sur l'expérience de Wolfox en tant qu'agence UX/UI dans la conception d'interfaces à la fois fonctionnelles et esthétiques.

Le premier client ciblé appartenant au domaine du luxe, les choix graphiques ont visé une proposition sobre et cohérente avec cet univers :

  • Mise en page aérée.
  • Typographie en serif pour rappeler l'univers des actualités.
  • Seconde typographie géométrique pour assurer une lecture confortable du contenu.
Maquettes UI TKM - Interface éditoriale finale

Conclusion

Ce projet illustre la démarche de Wolfox en tant qu'agence UX/UI : partir des besoins réels des utilisateurs, cadrer rigoureusement le périmètre fonctionnel avant de concevoir, et livrer une interface intuitive et adaptable. En concevant un outil modulaire pour TKM, l'équipe a posé les bases d'une solution scalable, prête à être déployée pour de nouveaux clients.

Nos dernières réalisations

Découvrez notre approche en pratique !
Découvrez nos réalisations

Contactez-nous

Une question ? N’hésitez pas à nous écrire !

🥳

Votre message a bien été envoyé !
La meute s'en occupe le plus vite possible
Il semble qu'il y ait une erreur, veuillez réessayer...