How Datadog built an enterprise platform by scaling their design system with Figma
Datadog is one of only a few enterprise SaaS companies that has built a true multi-product platform while growing exponentially over the past few years. A critical piece of that success is their product organization. VP of Design Stephen Boak, Staff Product Designer Derek Howles, and their product and engineering teammates have focused on building a product development process that can scale, create unified experiences across every one of their products, and inspire early and meaningful collaboration between their PDE teams. Figma and FigJam, as well as Datadog's internal design system, DRUIDS, rapidly became the key to executing on this strategy.
Snapshot
- Industry: Software
- Segment: Enterprise
- Edition: Enterprise
- Time savings: 100 hours a week
- Products: Figma, FigJam
- Integrations: GitHub
Datadog is the essential monitoring and security platform for cloud applications, helping businesses secure their systems, avoid downtime, and make sure their customers are getting the best user experience. Datadog solutions are used by engineers to solve very technical problems. The platform must enable users to visualize and understand incredibly dense data in a way that makes sense, and that's the fun part and the challenge for Stephen Boak, VP of Design, and his team.
Datadog is also one of the few companies that can objectively claim to have built a multi-product SaaS platform. In 2019 they went public with $330 million ARR and only a couple of products. Today they have passed the $1.5 billion ARR mark while expanding to more than 15 products. This marks a continuous growth of up to 70 percent year over year and 130 percent NRR (something only a few tech companies have achieved). One of Datadog's keys to success has been building a true multi-product enterprise platform to continue their exponential growth. In fact, 80 percent of their customers now use two or more of their products.
Datadog has built this business on the back of a few key principles:
- a product development process that's built for efficiency and scale;
- a connected user experience across every solution making up their broader platform;
- strong and early collaboration between their product management and engineering counterparts; and
- a constant MVP and early iteration cycle, so they can improve their product quickly based on early feedback from customers
But it didn't just fall into place overnight. The Datadog product team had to build out a scalable design and product development process to realize the full potential of this approach.
Growing pains and the realization they needed to scale their product development process
In 2016, Datadog began the shift to becoming a multi-product company. They had big plans to continue growing out their product suite, but within a couple years the design and engineering teams had started to notice problems at scale."We were starting to face the same hurdles with our design process as many other companies that grow super fast. We got to this point where no one person could really hold all the different UI components and variations in their head, and they were being expressed differently for no good reason," Derek Howles, Staff Product Designer, explained.
Datadog's engineers were having to repeatedly duplicate code for core patterns, like displaying tabular data, searching and filtering, picking time ranges, and selecting options from dropdown menus. They didn't have reusable components, and as they tried to scale these solutions across different products with different contexts and behaviors, product development became particularly difficult.
The relationship and collaboration process between design and engineering teams was far from ideal. Both groups were spending too much time duplicating work and trying to understand each other during project handover. In one situation, design didn't include engineering early enough, leading to major delays in shipping a product.
All this meant less time was available for solving Datadog's bigger product challenges and iterating on customer feedback.
Building great multi-product businesses requires “connectedness”
Most important of all: Datadog wanted to build familiar, dependable experiences across their entire product suite. It was important that their customers could enjoy the same great experiences as they move throughout the Datadog platform, regardless of which product they were using.
Stephen calls it "connectedness rather than consistency," and it's incredibly hard to do well at scale. Standard user interactions, like drilling into table data, or reviewing logs by time, need to be reusable and familiar across their whole platform, even while operating slightly differently in every context. "In platform UX you learn the motions that customers go through in product, once you learn them, you repeat them, and that UX becomes a repeatable motion throughout your different products," explains Stephen.
This new discipline was incredibly valuable, but it also made it harder to move fast, iterate, and release new capabilities.
DRUIDS—building a product development process that works at scale
Derek and a few of his engineering counterparts started to lay the groundwork for a design system to help them scale and build this connectedness. The lightbulb moment didn't truly appear, however, until engineering realized how fast they could get to market and gather customer feedback on prototypes and minimal viable products.
"Using components, our design system, and boilerplates for common user experiences across Datadog products, we can get to market on an MVP really fast, and get valuable customer feedback," Stephen explains.
Datadog was saving 10 hours per prototype and around 100 hours per week by using Figma and their design system. The business case was clear.
The business leaned into building out their design system; the result was DRUIDS. A combination of Figma as the design layer along with all of their corresponding code in GitHub. DRUIDS is built to be as engineering friendly as possible, with multiple states and variations detailed out with corresponding documentation. And it looks phenomenally slick.
Figma and FigJam bring their product team together
Datadog's whole product team (product managers, designers, and engineers) collaborate using Figma and FigJam throughout their product development process. Product managers and designers start in FigJam for ideation, user feedback, and brainstorming. As designs become more tangible and built out, they move into Figma, where engineers and designers collaborate and iterate heavily.
Next, their designs are connected to their DRUIDS design system, matched with the relevant code, and shipped. At the end of the process, reviews, product critiques, and mockup collaboration all take place in FigJam."FigJam straddles both sides of the design process, and lets our leaders have visibility and provide feedback in a simple solution" explains Steve.
Datadog’s efficiency has also benefited from building plugins using Figma's open platform. They've built a plug-in to flip any component to dark mode instantly, one that integrates relevant customer data to their designs and prototypes for more relevant user testing, and another that lets designers drop in any of the more than 900 integration logos that can appear on the Datadog platform.
Finally, Stephen also saves a ton of time by using some of Figma Enterprise's more advanced admin capabilities.
"The management portal, SSO and automated provisioning and Figma's security capabilities has made it really easy for me to manage, giving me time back to work on more strategic projects"
Building DRUIDS has been one of the keys to Datadog's success
Datadog is now able to ship products faster. Repetitive, simple tasks are all catered for by their design system, and there's more time to solve the more complex problems they care about—and that their designers get more satisfaction in solving.
Designers and engineers can onboard faster because they're able to get up to speed on the technical side of the product by reviewing all the states and user interfaces across different products in their own time."Datadog is a complicated platform, there's a lot of new technical concepts to understand and having robust documentation means that you can spend more time trying to really understand the product itself, and the use cases,"
Despite growing to more than 15 products, and having a much larger product team, Datadog's product designers are iterating on designs earlier and getting engineering's input on critical behaviors in a shared language that encourages better product development and stronger team alignment. This has been one of Derek's prouder achievements; maintaining the same strong Product Development culture they had in the beginning, despite how much the team has grown.
But most importantly, by freeing up more time to solve the big problems, Datadog's designers and engineers can cut their teeth solving technical, complicated problems that have a huge impact on the businesses that use the Datadog platform.
For Stephen and his team, designing an enterprise B2B SaaS company, and getting it right at scale across every product, is incredibly rewarding. "We don't measure value in terms of billions of users, but we're fixing complex, technical problems for the thousands of organizations that love our product, use us every day, and are passionate about how they work."
The proof shines through in Datadog's amazing multi-product growth so far.
The Total Economic Impact of Figma
This Forrester report shows how teams are using Figma and FigJam to speed up their workflows, consolidate their design stack, and build better products.
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