Overview

dbt Labs is a $4.2B data analytics company whose web presence spans a 50+ page marketing site, a documentation site, an LMS, and a community forum. As the company's first and only web designer, I led the design side of a full replatform to Sanity CMS: auditing every page, building a complete web design system in Figma, and documenting every component so the front end team could rebuild the site on a modern stack in a single quarter.

‍

✷ Role: Senior Web Designer (sole web designer)
✷ Timeline: One quarter
✷ Scope: 50+ page marketing site, documentation, LMS, and forum
✷ Tools: Figma, FigJam, Notion, Sanity CMS, Tailwind, Hotjar, Mutiny, Loom
✷ Delivery cadence: 10 to 20 components designed, documented, and handed off per week
✷ Team: Breezy Fasano, John Rock, Jason Karlivage, Joey Gault, Emily Mermell

‍

The Problem

Any time marketing wanted a new page, it took an entire quarter. Every page was hardcoded or a duplicate of a hardcoded page. A single request meant a month for copy and design, then another month for illustration and front end development. The workflow wasn't working.

Underneath the workflow problem sat a business challenge: dbt Labs maintains dbt Core as an open-source product while selling dbt Cloud as the enterprise solution. The website had to convince enterprise buyers of dbt Cloud's value without alienating the open-source community the company was built on, and it had to explain complex data concepts to business leaders unfamiliar with technical jargon while still serving the analysts and engineers hunting for documentation.

We needed a website with a robust CMS built with a design system in mind: reusable templates and content blocks, patterns made of components with consistent sizing, color, and design language. The front end team wanted to adopt best practices like Tailwind and chose Sanity for its CMS capabilities. My job was to design everything they would build from.

‍

Research

Design decisions were grounded in research across our three key user groups:

✷ Business leaders evaluating dbt Cloud as an enterprise solution, who needed clear, jargon-free explanations of the value proposition
✷ Data analysts and engineers who needed efficient paths to documentation and honest comparison between Core and Cloud
✷ The marketing team, who needed a content management workflow that didn't take a quarter

Site analytics identified drop-off points in these journeys, Hotjar heat mapping showed where users actually looked on key pages, and Mutiny personalization data revealed how tailored experiences affected engagement.

I also ran a competitive analysis across three lenses: how peers like Fivetran, Databricks, Snowflake, and Looker positioned enterprise offerings and explained complex data concepts; how open-source competitors like Airflow balanced community and commercial products; and how exemplary systems like IBM's Carbon, Google's Material Design, and Stripe's documentation handled scalable, developer-friendly design.

‍

The Audit

The existing Figma files didn't cover everything. Several live pages predated my hire and had never been mocked up at all, so the site had accumulated years of inconsistency: some sections untouched since the company's earliest days, others freshly refreshed with new illustrations.

To sort it out, I screenshotted every page: every blog post, every pillar page, the documentation site, the LMS, and the forum. I collected every header, multiple competing footers, and inconsistent button treatments, and documented how the site handled buttons, dropdowns, headings, text links, and body copy. I then deconstructed each screenshot in Figma, organizing every element piece by piece using the atomic design model.

‍

User Flows, Wireframes, and Prototypes

Before building components, I mapped user journeys in FigJam for each audience: business leaders moving from homepage to product features to case studies, technical users moving from homepage to specific documentation, marketers moving through content creation, and prospective enterprise clients following a path that clearly demonstrated dbt Cloud's added value over Core.

From those flows I developed low-fidelity wireframes in Figma focused on information hierarchy (especially the Core vs Cloud distinction), navigation patterns, illustration placement, and call-to-action strategy for enterprise conversion. After iterating with stakeholders, I built high-fidelity interactive prototypes used for usability testing.

‍

Building the System

I built the system from the smallest pieces up: buttons, headings, dropdowns, text links, body copy. Every element was aligned to the current brand colors and mapped to our Tailwind CSS. I named every layer, used design tokens for colors, typography, and spacing, and set up booleans and instance variants so information hierarchy stayed consistent regardless of who assembled a page.

From those foundations I created pattern components: hero sections for each page type, navigation and footer systems, blog and documentation layouts, product feature showcases, pricing tables and a fully designed pricing page, Core vs Cloud comparison modules, and enterprise-focused landing page patterns. Because you never know what screen size someone will use, every pattern was designed in desktop, tablet, and mobile versions.

From patterns we built page templates. Every blog post now follows the same structure: navigation, header, body, related articles, footer, replacing the inconsistent layouts that came before. A distinct visual language differentiated enterprise features from open-source offerings, so dbt Cloud's value read clearly without diminishing dbt Core.

‍

Documentation and Enablement

Every component received full documentation before development: a detailed Figma file with all components, variants, type scale, color system, and tokens; a Notion database with specifications, usage guidelines, and best practices; and Loom video tutorials showing the marketing team how to use the CMS page builder and apply the system correctly.

‍

Collaboration and Handoff

The workflow ran on a steady rhythm all quarter: I designed and documented each component, the front end team built it in Sanity, and 10 to 20 components shipped every week until the entire site was systematized. Along the way I worked directly with product managers on Core vs Cloud positioning, front end engineers on feasibility, the sales team on enterprise selling points, and marketing on the page builder they'd inherit.

‍

The Illustration System

Alongside the design system, I personally illustrated 70+ custom pieces and built them into an illustration system in which imagery is composed of swappable puzzle pieces. The illustrations serve double duty: visual engagement and education, translating complex data workflows into something a non-technical buyer can parse. Instead of waiting a month for custom art, marketers could assemble on-brand article imagery themselves in minutes.

Usability Testing

Testing ran at three stages: early wireframe reviews with internal stakeholders, prototype testing with representatives from each user group including prospective enterprise clients, and post-launch feedback on the implemented design. Iterations from testing included a simplified navigation structure for technical documentation, improved site-wide search, refinements to the page builder interface, and clearer presentation of dbt Cloud benefits and feature comparisons.

‍

Accessibility

The system was built inclusive by default: color combinations with sufficient contrast ratios, keyboard-navigable components, required alt text fields for all images in the CMS, and text alternatives for custom illustrations explaining the concepts they depict.

‍

Results

Our marketing and web team lead often said that dbt is our first product, but the website is our second biggest product, and we should treat it that way. After launch, we finally could.

‍

✷ Page creation went from a quarter-long, multi-team workflow to marketers publishing fully designed pages at the speed it took to write the copy
✷ Article illustrations went from a month-long request to a self-serve system
✷ Site performance improved, passing speed tests it had previously failed
✷ Hotjar data on where users actually look informed stronger typography and hierarchy across the system
✷ The Core vs Cloud distinction finally had a consistent visual language across every surface

‍

Applying This Process in Webflow

This build ran through Sanity, which meant every component passed through a front end developer. I now run the same process in Webflow for client sites, where I build the components myself: the same audit, the same atomic system, the same responsive breakpoints, the same CMS and SEO setup, without the handoff step. Marketers get custom components they can assemble into pages, and the system ships as fast as it's designed. Webflow is my preferred no-code platform, and my own site runs on it.