How Datadog built an enterprise platform by scaling their design system with Figma

Comment Datadog a construit une plateforme multi-produits évolutive avec Figjam et Figma

Datadog fait partie des rares SaaS à avoir construit une véritable plateforme multi-produits tout en connaissant une croissance exponentielle au cours des dernières années. Un élément critique de ce succès est son organisation produit. Le VP du design Stephen Boak, le Staff Product Designer Derek Howles ainsi que leurs collègues du produit et du développement ont concentré leurs efforts sur la construction d'un processus de développement de produit évolutif, capable de créer des expériences unifiées pour chacun de leurs produits et d'inspirer une collaboration précoce et resserrée entre leurs équipes de product management, de design et de développement. Figma et FigJam, ainsi que le design system interne de Datadog, DRUIDS, sont rapidement devenus la clé pour mettre en place cette stratégie.

Aperçu

  • Secteur : Logiciel
  • Segment : Entreprise
  • Édition : Entreprise
  • Gain de temps : 100 heures par semaine
  • Produits : Figma, FigJam
  • Intégrations : GitHub

Datadog est une plateforme de surveillance et de sécurité essentielle pour les applications cloud. Elle aide les entreprises à sécuriser leurs systèmes, éviter les temps d'arrêt et à s'assurer que leurs clients bénéficient de la meilleure expérience utilisateur possible. Les solutions de Datadog sont utilisées par les développeurs pour résoudre des problèmes très techniques. La plateforme doit permettre aux utilisateurs de visualiser et de comprendre des données incroyablement denses de manière évidente. Un défi que le VP du design Stephen Boak et son équipe ont eu le plaisir de relever.

Datadog est également l'une des rares entreprises à pouvoir revendiquer objectivement la construction d’une plateforme SaaS multi-produits. En 2019, elle est entrée en bourse avec 330 millions de dollars de chiffre d'affaires annuel récurrent et seulement quelques produits. Aujourd'hui, elle a dépassé la barre des 1,5 milliard de dollars de chiffre d'affaires annuel récurrent tout en se développant sur plus de 15 produits. Cela marque une croissance continue allant jusqu'à 70 % d'une année sur l'autre et un CA net récurrent de 130 % (un ordre de grandeur atteint par seulement une poignée d’entreprises de la tech). L'une des clés du succès de Datadog a été de construire une véritable plateforme d'entreprise multi-produits pour poursuivre sa croissance exponentielle. En fait, 80 % de leurs clients utilisent maintenant deux de leurs produits ou plus.

Datadog a construit cette entreprise sur la base de quelques principes clés :

  • un processus de développement de produit conçu pour être efficace et dont l’échelle peut évoluer ;
  • une expérience utilisateur homogène à travers toutes les solutions constituant leur plateforme ;
  • une collaboration forte et précoce entre les product managers et leurs homologues du développement ;
  • un cycle constant de MVP et d'itération, afin d’améliorer leur produit rapidement en fonction des retours des clients.

Mais tout cela ne s'est pas fait en un jour. L'équipe produit de Datadog a dû développer un processus de design et de développement de produit évolutif pour exploiter à fond le potentiel de cette approche.

Des difficultés liées à la croissance et le besoin de mettre à l'échelle le processus de développement de produit

En 2016, Datadog a commencé à devenir une entreprise multi-produits. La société avait de grands projets pour continuer à développer sa suite de produits, mais au bout de quelques années, les équipes de design et de développement ont commencé à remarquer des problèmes d’échelle. « Nous avons commencé à rencontrer les mêmes obstacles avec notre processus de design que de nombreuses autres entreprises qui se développent très rapidement. Nous sommes arrivés à un point où personne ne pouvait retenir l’intégralité des composants et l’ensemble des variations d'interface utilisateur, qui étaient exprimés différemment sans raison valable », explique Derek Howles, le Staff Product Designer.

Les développeurs de Datadog devaient dupliquer à plusieurs reprises le code pour les modèles de base, tels que l'affichage de données tabulaires, la recherche et le filtrage, la sélection d'intervalles de temps et la sélection d'options à partir de menus déroulants. Ils n'avaient pas de composants réutilisables, et lorsqu'ils ont essayé de mettre à l'échelle ces solutions à travers différents produits avec des contextes et des comportements différents, le développement de produit est devenu particulièrement difficile.

La relation et la collaboration entre les équipes de design et de développement étaient loin d'être idéales. Les deux groupes passaient trop de temps à dupliquer leur travail et à essayer de se comprendre lors de la livraison des projets. À une occasion, les designers n'ont pas inclus les développeurs assez tôt, ce qui a entraîné des retards importants dans la livraison du produit.

La conséquence ? Moins de temps disponible pour répondre aux plus grands défis de Datadog en termes de produit et pour itérer à partir des retours clients.

La construction de grandes entreprises multi-produits requiert « une capacité à connecter »

Au centre de la démarche de Datadog se trouve la construction d’expériences fiables et reconnaissables au sein de toute sa suite de produits. Il était important que ses clients puissent profiter des mêmes expériences exceptionnelles lorsqu'ils naviguent sur la plateforme Datadog, quel que soit le produit qu'ils utilisent.

Stephen appelle cela « de la connectabilité plutôt que de la cohérence », et c'est incroyablement difficile à faire à grande échelle. Les interactions standard des utilisateurs, comme l'exploration de données dans un tableau, ou la vérification des fichiers logs par date, doivent être identifiables et réutilisables sur l'ensemble de la plateforme, même s'ils fonctionnent un peu différemment dans chaque contexte. « Dans l'UX de plateforme, vous apprenez les mouvements que les clients font au sein du produit. Une fois que vous les connaissez, vous les répétez, et cette UX devient répétable à travers vos différents produits », explique Stephen.

Cette nouvelle méthode était très précieuse, mais avancer rapidement, itérer et publier de nouvelles fonctionnalités devenait plus difficile.

DRUIDS : construire un processus de développement de produit qui fonctionne à grande échelle

Derek et quelques-uns de ses collègues développeurs ont commencé à poser les bases d'un design system qui les aiderait à se développer à grande échelle et à mettre en place cette connectabilité. Cependant, l'idée a véritablement pris forme lorsque les développeurs ont réalisé à quelle vitesse ils pouvaient passer à la mise sur le marché et recueillir des retours clients sur des prototypes et des MVP.

« Avec des composants, notre design system et des modèles pour des expériences utilisateur courantes dans les produits Datadog, nous pouvons mettre un MVP sur le marché très rapidement et obtenir de précieux retours clients », explique Stephen.

Datadog gagnait 10 heures par prototype et environ 100 heures par semaine en utilisant son design system et Figma. L’intérêt est indéniable.

L'entreprise s'est concentrée sur la création de son design system ; le résultat s’appelle DRUIDS, une combinaison de Figma pour la couche design avec tout le code correspondant sur GitHub. DRUIDS est conçu pour être aussi convivial que possible pour les développeurs, avec plusieurs états et variations détaillés dans une documentation correspondante. Pour ne rien gâcher, le tout est très bien pensé et réalisé. Et cela a l'air incroyablement élégant.

Le design system de Datadog

Figma et FigJam rassemblent l’équipe produit

Toute l'équipe produit de Datadog (product managers, designers et développeurs) collabore en utilisant Figma et FigJam tout au long du processus de développement de produits. Les product managers et les designers commencent dans FigJam pour l'idéation, les retours des utilisateurs et le brainstorming. Au fur et à mesure que les designs deviennent plus tangibles et construits, ils passent dans Figma, où les développeurs et les designers collaborent et itèrent de manière intensive.

L'équipe produit de Datadog brainstorme sur les OKR

Ensuite, leurs designs sont connectées au design system DRUIDS, associés au code correspondant, et livrées. À la fin du processus, les examens, les product critiques et la collaboration sur les mockups ont lieu dans FigJam. « FigJam englobe les deux côtés du processus de design. L’outil permet à nos dirigeants d'avoir de la visibilité et de faire facilement leurs retours », explique Steve.

L'efficacité de Datadog a également bénéficié de la construction de plugins via la plateforme ouverte de Figma. Les équipes ont construit un plugin pour passer instantanément n'importe quel composant en mode sombre, un autre qui intègre les données clients pertinentes à leurs designs et à leurs prototypes pour des tests d'utilisabilité plus pertinents, et un autre qui permet aux designers de déposer n'importe lequel des plus de 900 logos d'intégration pouvant apparaître sur la plateforme Datadog.

Un des plugins maison de Datadog permet d’intégrer des données dans les designs en quelques clics. 

Enfin, Stephen gagne également beaucoup de temps en utilisant certaines des capacités d'administration plus avancées de Figma Enterprise.

« Le portail de gestion, la SSO et la provision automatisée, ainsi que les capacités de sécurité de Figma, m’ont rendu la gestion vraiment facile, me libérant ainsi du temps pour travailler sur des projets plus stratégiques. »

La construction de DRUIDS a été l'une des clés du succès de Datadog

Datadog est désormais en mesure de livrer des produits plus rapidement. Les tâches répétitives et simples sont toutes prises en charge par le design system, et les équipes ont désormais davantage de temps pour résoudre les problèmes plus complexes qui les préoccupent, et que leurs designers trouvent plus satisfaisants à résoudre.

Les designers et les développeurs s’intègrent plus rapidement à leur équipe car ils peuvent se mettre à jour à leur rythme sur l’aspect technique du produit en examinant tous les états et interfaces utilisateur à travers différents produits. « Datadog est une plateforme compliquée, il y a beaucoup de nouveaux concepts techniques à comprendre. Avoir une documentation solide signifie que vous pouvez passer plus de temps à essayer de comprendre le produit lui-même et les cas d’usage. »

Malgré une croissance qui dépasse les 15 produits et une équipe bien plus importante, les product designers de Datadog itèrent sur les designs plus tôt et obtiennent les retours des développeurs sur les comportements critiques dans un langage connu de tous. Cela favorise un meilleur développement de produit et met tout le monde sur la même longueur d’onde. Maintenir une culture de développement de produit aussi solide qu'au début malgré la croissance de l'équipe est d’ailleurs une des réussites dont Derek est le plus fier.

Mais surtout, en libérant plus de temps pour résoudre les questions importantes, les designers et les développeurs de Datadog peuvent s'attaquer à des problèmes techniques et compliqués qui ont un impact énorme sur les entreprises qui utilisent la plateforme de Datadog.

Pour Stephen et son équipe, concevoir une entreprise B2B SaaS et la faire passer à une échelle plus grande pour chaque produit est incroyablement gratifiant. « Nous ne mesurons pas la valeur en termes de milliards d'utilisateurs, mais nous résolvons des problèmes techniques complexes pour les milliers de structures qui apprécient notre produit, l’utilisent tous les jours et ont un profond intérêt pour la façon dont elles travaillent. »

Et jusqu’à présent, la spectaculaire croissance multi-produits de Datadog en est le témoin.

Le Total Economic Impact de Figma

Ce rapport Forrester montre la façon dont les équipes utilisent Figma pour accélérer leurs flux de travail, consolider leurs répertoires design et concevoir de meilleurs produits.

Read the report

See how Figma can help you scale design

Great design has the potential to differentiate your product and brand. But nothing great is made alone. Figma brings product teams together in a fast and more inclusive design workflow.

Get in touch to learn more about how Figma can help companies scale design.

We’ll cover how Figma can help:

  • Bring every step of the design process—from ideation, to creation, to building designs—into one place
  • Accelerate design workflows with shared company-wide design systems
  • Foster inclusivity in the product team process with products that are web-based, accessible, and easy to use

Connect with our team

By clicking “Submit” you agree to our TOS and Privacy Policy.