Inspired by Dory (RudderStack's brand guidelines), Built for Growth

Just as Dory laid the foundation for RudderStack’s visual identity, Blueprint DS extended it into a growth-focused system. It wasn’t just about brand consistency—it was about building a system that could flex, scale, and evolve as fast as our growth goals.

Context:

When I joined RudderStack, the marketing team was growing quickly, but shipping campaigns was slow and disjointed. There was no shared design system for the marketing site. Each campaign was essentially starting from scratch. Components were scattered, inconsistent, and not built for rapid testing.

At the same time, RudderStack’s brand was starting to blend in with competitors. Across the CDP space, I noticed a visual sameness—soft gradients, AI buzzwords, and abstract data graphics dominated the landscape.

We needed a scalable system that could help us move faster, test smarter, and elevate the brand.

The Opportunity

How can we help the marketing team:

• Ship faster?

• Test efficiently?

• Build a more recognizable, differentiated brand?

My Role

As Senior Product Designer, I led the creation of Blueprint DS—a modular design system purpose-built for the marketing site. I partnered closely with Brand, marketing, web presence teams to ensure the system supported both campaign velocity and long-term brand consistency.

I also pitched the system directly to the COO to secure stakeholder buy-in, framing Blueprint DS as a lever for cross-team efficiency and faster go-to-market—not just a design project.

The Approach

Step 1: Interface Inventory

I audited RudderStack’s marketing site and cataloged the existing components.

• Text styles were undefined

• Colors were inconsistent

• Components weren’t scalable for testing

There wasn’t a system—just isolated, one-off solutions.

Step 2: Competitive Analysis

I studied how competitors like Census, Hightouch, Snowplow, and Fivetran positioned themselves.

I noticed:

• Visual sameness (gradients, abstract visuals, AI buzzwords)

• Product-led, technical brand voices

• Overuse of whitepapers and webinars as lead gen

I didn’t see:

• Visual clarity

• Brand distinction

• Modular design systems built for experimentation

Step 3: Building Blueprint DS

I created Blueprint DS as a modular, test-ready system to power rapid shipping and consistent brand expression across the marketing website.

The system connected:

• Token Studio for scalable design tokens

• Figma branching for structured version control

• Storybook for live, documented components

• Chromatic for automated visual regression testing

This tool stack made it easier to:

• Build reusable components

• Ship faster without sacrificing consistency

• Support A/B testing at scale

Cross-Functional Collaboration

Blueprint DS was deeply integrated across teams. I worked closely with:

• Web Engineering to ensure components were testable, accessible, and easy to integrate

• Marketing to prioritize flexible layouts that could support rapid campaign shipping

• Brand Design to maintain consistency and build on the Dory visual system

Figma branching became our shared space for collaborative reviews.
Storybook and Chromatic became our shared source of truth for building and testing at scale.

Getting Stakeholder Buy-In

I made sure to position the system in language that resonated with the leadership team:

• Framed Blueprint DS as a growth accelerator—improving campaign velocity, productivity, and experimentation speed

• Tied the system directly to revenue-driving KPIs by showing how faster campaign shipping would impact lead generation

• Quantified time savings across teams to highlight organizational ROI

I pitched the system directly to the COO and secured buy-in by focusing on operational efficiency, not just design quality.

The Impact

• 🚀 200% increase in team productivity

• 🚀 2x faster campaign shipping

• 🚀 A/B testing became a natural part of the marketing workflow

• 🚀 The system enabled RudderStack to show up with a clearer, more consistent brand across touchpoints

• 🚀 Blueprint DS became a trusted foundation across marketing, design, and engineering

• 
  

What I Learned

• Design systems are growth systems when they support speed, experimentation, and brand clarity.

• Modularity isn’t just about reusability—it’s about enabling teams to think faster and test smarter.

• Adoption only happens when the system solves real pain points for other teams.

• Getting buy-in is about speaking the language of velocity, ROI, and cross-functional impact—not just visual polish.

• Cross-team collaboration is key to building systems that last.

Quick Summary

🚀 Problem🛠️ Solution📈 OutcomeSlow campaign velocityModular design system optimized for speed, testing, and brand differentiation200% increase in productivityFragmented brandUnified component library across marketing web2x faster campaign shippingNo scalable testingTest-ready system with Token Studio, Figma branching, Storybook, ChromaticClearer, more consistent brand