Datadog web UI library

Design: Eunmo Kang, Michael Hoang
Web Coding: Won Choi

Problem

When I joined Datadog, there was not a web guideline or an UI assets library. This fact allowed so many inconsistent styles throughout the Datadog web pages since there was not a specific rule for designers to follow. As the design team was growing up, a specific web UI asset library and guidelines were necessary to make web component styles consistent.

Goals

Making inconsistent visual elements consistent on the web pages
Creating a web UI asset library and guidelines for designers and developers

Solutions

Teamed up with the Websites team, I started to investigate and collected inconsistent visual elements such as types, spaces, buttons, and colors used on Datadog web pages, and cleaned up to make them consistent.

TYPOGRAPHY
Even though there was a type hierarchy setting, some random font sizes and inconsistent spacings between type classes were existing on the web pages. We’ve replaced the random size fonts with the most similar existing type classes except on some pages that might cause bigger issues. The spacings between type classes also have been newly defined.

︎︎︎ Spaing charts for desktop and mobile devices

︎︎︎ Type setting examples

BUTTONS

There were different sizes of the same CTA buttons existing. We’ve reduced them into two sizes, and combined different tab menus into one style.

︎︎︎ Button styles

COLORS AND SPACING

First of all, there were too many different grays. We’ve reduced the number of grays to six according to their usages. For spacing, we’ve set up the basic increment for spacing as 10px, and defined spaces between elements and sections.

︎︎︎ Spacing settings

︎︎︎ Card styles for desktop and mobile devices

︎︎︎ Icons

Conclusion

We’ve created the UI asset library and style guide web pages, and provided them to designers and developers as the final step.

︎︎︎ Datadog Corpsite Style Guide

Now, the most of the webpages are following the guides and rules, and it has got much easier and faster for designers and developers to create new pages and managing them as there are certain guides they can follow.