HashiCorp Marketing Design System

HashiCorp Marketing Design System

HashiCorp Marketing Design System

I took up the mantle in creating a design system with a different ethos: empower not just designers and engineers, but the entire organization, and involve them in the design process. The result was a modular system capable of creating various types of pages while ensuring consistency with robust customization. It is elegant, simple, and reflects HashiCorp's need to scale up its digital footprint.

I took up the mantle in creating a design system with a different ethos: empower not just designers and engineers, but the entire organization, and involve them in the design process. The result was a modular system capable of creating various types of pages while ensuring consistency with robust customization. It is elegant, simple, and reflects HashiCorp's need to scale up its digital footprint.

I took up the mantle in creating a design system with a different ethos: empower not just designers and engineers, but the entire organization, and involve them in the design process. The result was a modular system capable of creating various types of pages while ensuring consistency with robust customization. It is elegant, simple, and reflects HashiCorp's need to scale up its digital footprint.

Year

2023-Present

Skills

Design Systems, Design Ops, UI/UX Design, Animation

Role

Lead Designer

Year

2023-Present

Skills

Design Systems, Design Ops, UI/UX Design, Animation

Role

Lead Designer

Year

2023-Present

Skills

Design Systems, Design Ops, UI/UX Design, Animation

Role

Lead Designer

HashiCorp has been a leader in the infrastructure and security space for more than a decade. Its most popular products include Terraform and Vault.

The problem

Hundreds of pages populated with DatoCMS. Dozens of authors creating content on the site hourly. Engineers making their own reusable systems, and designers creating just as many consistent elements as there are inconsistent ones. New pages take a long time to build, and older pages languish for years creating technical and design debt.


When considering how to move forward, we had much to consider.

1

Though we were directed to align with it, the product design system didn't go far enough for us. Many web use cases could not be accommodated and without the use of foundational elements like branded typography and select colors/gradients, it left us unable to be brand compliant.

Though we were directed to align with it, the product design system didn't go far enough for us. Many web use cases could not be accommodated and without the use of foundational elements like branded typography and select colors/gradients, it left us unable to be brand compliant.

2

Marketing was always changing. Sometimes we found ourselves launching a new page only for the messaging to change a month later. Often this would require design revisions and it either pulled our team away from other projects or the pages sat untouched and became outdated.

Marketing was always changing. Sometimes we found ourselves launching a new page only for the messaging to change a month later. Often this would require design revisions and it either pulled our team away from other projects or the pages sat untouched and became outdated.

3

New work was always piling up. We supported 8 product marketing teams, event and field operation teams, as well as corporate comms. Our team was very small and we needed to become much more nimble.

New work was always piling up. We supported 8 product marketing teams, event and field operation teams, as well as corporate comms. Our team was very small and we needed to become much more nimble.

The Solution

HashiCorp’s Marketing Design System (MDS) is built on two core ideas.

Mindful deviation

We extended the product design system to account for web-specific use cases. For example, buttons needed to be larger to stand out next to large images and video, cards needed to support photography and we needed to establish web typography based on brand fonts.

Full-width components

The implementation of full-width 'Block' components that are responsive and map from Figma, to Storybook, to DatoCMS. They are simple to use while containing numerous options under the hood for fine-tuning in the browser.

Theming support gives designers flexibility in page layouts and padding options give tighter control over the live product. In many cases, the browser becomes the design tool.

"Blocks" are full width components and are responsive by nature. They contain many nested properties, exposed in Figma and the CMS, that allows for customization based on content needs.

A selection of blocks and sub-components. Some are more straightforward while others like Bento Box allow for deeper customization.

Two pages created entirely in Dato utilizing HashiCorp's Marketing Design System.

The Solution

HashiCorp’s Marketing Design System (MDS) is built on two core ideas.

Mindful deviation

We extended the product design system to account for web-specific use cases. For example, buttons needed to be larger to stand out next to large images and video, cards needed to support photography and we needed to establish web typography based on brand fonts.

Full-width components

The implementation of full-width 'Block' components that are responsive and map from Figma, to Storybook, to DatoCMS. They are simple to use while containing numerous options under the hood for fine-tuning in the browser.

Theming support gives designers flexibility in page layouts and padding options give tighter control over the live product. In many cases, the browser becomes the design tool.

"Blocks" are full width components and are responsive by nature. They contain many nested properties, exposed in Figma and the CMS, that allows for customization based on content needs.

A selection of blocks and sub-components. Some are more straightforward while others like Bento Box allow for deeper customization.

Two pages created entirely in Dato utilizing HashiCorp's Marketing Design System.

The result

90% of all new pages are spun up in the CMS without any additional engineering effort required. Simply put, ideas are realized sooner.


Additionally, old, outdated pages are getting face lifts every week - an pleasant surprise for those in the org who manage them! Each time this happens, we knock out chunks of design and engineering debt.


My favorite outcome though, was seeing content authors putting new pages together autonomously by using our documentation.

© Benjamin Gage 2024

New York City

The result

90% of all new pages are spun up in the CMS without any additional engineering effort required. Simply put, ideas are realized sooner.


Additionally, old, outdated pages are getting face lifts every week - an pleasant surprise for those in the org who manage them! Each time this happens, we knock out chunks of design and engineering debt.


My favorite outcome though, was seeing content authors putting new pages together autonomously by using our documentation.

© Benjamin Gage 2024

New York City