A powerful, flexible design system, that supports the detailed storytelling of Hexagon’s website.

After a recent rebrand. I was hired by the brand agency to define the design system that underpinned Hexagon’s new marketing site. The system translated the brand style guide into a usable set of components and tokens that could be configured into a wide variety of layouts. 

 The team

• Design Systems designer (me)
• Design technologist (manager)
• 2 art directors
• Client design team
• Client developers

The opportunity : build a design system based on a brand style guide that was still evolving

• The system needed to support variation and complexity, not rigid patterns.
• Balance visual appeal with accessibility
  
• Visual and interaction design for forms and product discovery. 

Research & planning built my strategy

Audited other systems
I compared marketing design systems with UI design systems and analyzed tradeoffs between 

Architected a system that combined libraries
Worked with the client to build a system that could bridge the gap between two style guides and reduce redundancy

Learned the brand style guide
Took careful risks and scaffolded the system based on on the brand book. 

I aligned with the team on two priorities 

Extensibility over simplicity
Token structure that could grow to accommodate colors and surfaces.

Layout flexibility
A small set of controls and extensive set of content containers, adaptable to viewports. File structure that separated prebuilt layouts and structures that could be picked up and combined into a variety of page layouts. 

Complex components were built that stayed to true to the brand vision. 
 

Cards, in their variability and inclusion of line art, required the most care to produce. At the time, Figma didn't provide a good way to preserve aspect ratio as a component resized. 

Though I simplified where I could, I embraced the beauty of designs that relied on detailed line art and careful cropping. The beauty of the system became its ability to flex and adapt. 

I followed it up with tight dialogue with designers, wrote documentation as I went, and adapted properties and descriptions to make them easy to use.

A robust grid system and set of spacing tokens supported rhythm in the layout. 

Reverse engineering the brand style guide lead to a robust grid system for layout and component spacing. 

An ongoing dialogue with art directors led to a virtuous loop where I would note where we could standardize values, art directors would build with the updated tokens, and the designs became more harmonious over time.   

My favorite forms, ever.

Working in collaboration with the art director, I created form designs that prioritized short, beautiful experiences.

We created two sets of forms, with one set being for short high-conversion scenarios and one for longer, more traditional data entry. 

Variables were carefully and extensively remapped when the client mandated we use Material Web

At about 75% through the process, the client asked us to adapt our tokens from our custom implementation to the framework they used for their front end.  

This led to a careful mix of Adapt, Extend, and Break. 

Adapting existing tokens to meet the current system. Extending the existing system to accomodate our needs, and breaking where we had to. 

Along the way Adapt  became Variable Gymnastics, a term so popular with the client they made us include it in documentation. 

I designed updated components for product search & navigation.

The client requested a redesign of their product discovery flow. We audited best in class experiences and proposed a strategy of intentional curation.

These new concepts fed both the product search page and other component and layout combinations.

Once these were approved, the lead art director updated the visual design,

I tracked everything meticulously by collaborating on tools that lived in the client’s files.

Changelogs, inventories, and delivery agendas were built within the Hexagon's figma library, creating crosslinks and references between the UI and Web style guides. 

When we updated the web style guide, stakeholders would be notified via an update to the changelog. 

I wrote extensive documentation for developers and (particularly) future system maintainers

A complex system with a lot of custom artwork and built in quirks requires complex documentation. I wrote a multi-page “Read this First” section that outlined surfacing, component slots, and all our variable gymnastics. 

A successful system built from scratch 

By embracing the challenge of incorporating dynamic storytelling and variability I ended up creating a robust, durable system that allows for both standardization and dynamism. 

4
Color themes that pass AA accessibility

50+
Pages designed that use the design system

99
New components