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
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.
Spacing Rule — Designer: Michael Hoang, Peng Yu Chen
English Typography System — Designer: Michael Hoang, Peng Yu Chen
Japanese Typography System — Designer: Michael Hoang, Peng Yu Chen
Color System — Designer: Siqi Luo
Atoms
Molecules