The Gust Launch Marketing Pattern Library
A Systematic Approach to Rapid Iteration
The Challenge: How can we experiment as fast as possible?
Gust's introduction of a new three-tiered product model for Launch posed a critical question: How could we optimize conversion through our marketing funnel? The immediate need was for a new marketing site but, more importantly, we needed to gather data as fast as possible to validate or disprove our assumptions as we moved towards product/market fit.
I designed and built the marketing site we used in this early discovery phase of the product’s lifecycle, but it wasn’t a site that was meant to be static. We needed to be able to update aesthetics, layout, and content rapidly to run tests and respond to data as we learned how to best position Launch in the market. To do this, I designed a modular, parametric design system and implemented it as a pattern library directly in the codebase.
Building a Better Design System
This wasn’t the first time I’d crafted a design system, but this challenge demanded a more nuanced approach: We didn’t just need a library of components with which to populate a site; we needed a system that could be updated, overhauled, and pivoted at a moment’s notice. We needed tools robust enough to handle rapid testing, modifications, and experimentation without breaking. The goal was a system that would not just showcase a content and a brand, but that could showcase any content or brand we could throw at it.
A truly systemic approach
Since we weren’t sure what would need to change over time, there was no one part of the design system that could act as an anchor. That meant building the entire thing from an abstracted, systemic point of view that allowed us to change any aspect as needed.
The fully responsive grid had a configurable number of columns and breakpoints. Instead of being based on static values, the type hierarchy was proportional and those proportions were tuneable. Colors were variable based, inherited through components, and modified mathematically for statefulness. Every aspect of the system was built on relationships and flexibility.
So, what does that look like in practice?
Say we wanted to change the color of a set of CTA buttons. In a traditional design flow you’d have to go into a design file, change the colors of the buttons, select additional color values for the hover, disabled, etc., states, spec those values, and hand them off to a developer for implementation.
In the system I built, all we had to do was change the value of a single variable.
From components to layouts
By building the components in this interconnected way, I had created an extremely powerful tool that enabled me to do my work faster than ever. There was one area of the site in particular where the speed this approach enabled really shone.
As a part of a separate project, I had developed logos and sub-branding for our three product tiers. Marketing was looking to add feature pages to showcase the value of our different offerings and I wanted these pages to reflect the specific identities of the products.
At this point I was already accustomed to how quickly my design system would let me craft and release a single layout. The first feature page’s information hierarchy, design, and aesthetics went from ideation to polished in record time, but the real magic happened when it came to building the remaining two pages: With nothing but updates to a few variables, one set of styles immediately became three. The branding differentiation was basically free. All we had to do was update the content for each product and within a couple hours we were ready for release. The system I’d built was a force multiplier.
Efficiency and Rapid Iteration in Practice
Using a system like this allowed us to make structural and branding updates exceptionally quickly. Need to try a different set of brand colors? Just update a few variables. Want to test a different type hierarchy? It only takes a few keyboard strokes and a git commit.
Since the codebase itself was the design tool, details never got lost in translation from design to dev. We never had to deal with the wasted, redundant work of building something once in design software and then building it again in code. Once the design was done and approved, we just merged to master and released.
More than once, I worked with the head of marketing to identify a new direction to test and, to the surprise of the whole team (myself included), it would be ready to ship an hour or two later. It was an incredibly efficient toolset that allowed for some of the most shockingly fast iteration and fine-tuning I’ve ever been a part of. All built on the foundation of my parametric, modular, design-in-code system.
Unprecedented Experimentation and Insight
During the course of this marketing site’s lifetime I’d estimate we averaged about one marketing experiment a week, with A/B tests allowing us to test multiple variables in tandem. This approach took us from an understanding of our marketing funnel that was ill-defined and mysterious to a place where we knew our market, knew our targets, and knew how to hit them. We identified the most effective conversion strategies for our products in record time and helped the organization move forward with confidence and clarity, and we did it with the fastest design system I’ve ever built.