HashiCorp Marketing Design System
HashiCorp Marketing Design System
HashiCorp Marketing Design System
I took up the mantle of 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 many types of pages while ensuring consistency with robust customization. It is elegant, thoughtful, and reflects HashiCorp's need to scale up its digital footprint.
I took up the mantle of 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 many types of pages while ensuring consistency with robust customization. It is elegant, thoughtful, and reflects HashiCorp's need to scale up its digital footprint.
I took up the mantle of 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 many types of pages while ensuring consistency with robust customization. It is elegant, thoughtful, 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 adding to technical and design debt.
When considering how to move forward, we had a lot of options to weigh.
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 shortly thereafter. Often this would require design revisions and it either pulled our team away from other projects or the pages sat untouched for a while.
Marketing was always changing. Sometimes we found ourselves launching a new page only for the messaging to change shortly thereafter. Often this would require design revisions and it either pulled our team away from other projects or the pages sat untouched for a while.
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 cases like this, the CMS became 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 DatoCMS 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 cases like this, the CMS became 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 DatoCMS 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. It gives our team a lot more time back to think about what lives outside the system - moments of surprise and delight through complex animation and more "expensive" graphics.
© 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. It gives our team a lot more time back to think about what lives outside the system - moments of surprise and delight through complex animation and more "expensive" graphics.
© Benjamin Gage 2024
New York City