Datadog Web Design System

Developing Datadog Brand Design Team’s first web design system, using an event web template as the foundation for exploration.

Designers
Peng Yu Chen, João Miranda, Michael Hoang

Art Director
Michael Hoang

Role
UX/UI Design, System Design

Year
2024 – WIP

Challenges & Goals

Since its founding in 2010, Datadog has experienced rapid growth, continuously evolving and expanding. This fast-paced development has led to a focus on delivering content quickly, often without a structured design system in place. As the company scales, these inconsistencies have become more pronounced, highlighting the need for a unified approach. To address this, Datadog established its first dedicated design system team to create a cohesive web design framework.

The goal of this project is to develop a scalable, reusable, and on-brand system of components and styles, ensuring consistency and efficiency across all web experiences.

Our Approach

Using Datadog Live to Building a Scalable Event Template & Design System

Datadog Live is a unique event series hosted by Datadog. While each event is relatively small in scale, there are approximately 80 held annually across the globe. Given the varying locations and event sizes, the landing page needs to be both modular and scalable to accommodate different requirements seamlessly.

This presented an opportunity to use the event template as a foundation for developing a unified design system while also consolidating and refining outdated design styles.

Datadog Live Event Assets. Designer: Melissa Yu

Current Event Pages & Industry Audit

We explored large and complex design systems used across industries, including:

Polaris by Shopify

Material Design by Google

Atlassian Design

IBM Design Language / Carbon for IBM Cloud products

Wireframes

Design Solution

Design Mockup

CHECK THE LIVE SITE

Tablet and Mobile

Component & System Breakdown (WIP)

Grid System

We incorporated the atomic design methodology into our system, creating simple and maintainable pattern libraries by building larger, more complex components from smaller, fundamental ones.