A unicorn startup backed by Andreessen Horowitz

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.

• Migrated site from Netlify CMS to Sanity in collaboration with front end devs
• Refreshed the design and established a web design system in Figma with over 50 pages of documentation and 70+ illustrations
• Landing page publishing time went from a quarter long request system to instant publishing with marketing self service
• Role: sole Senior Web Designer on the Web Strategy team
• 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

dbt Labs: the Challenge

Inefficient publishing timelines

Marketers would wait three months from starting a request to landing page publish. 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.

We were our own biggest competitor

Why sign up for the enterprise product dbt Cloud when dbt Core is open source and free? 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.

Lack of cohesive visual identity

Flat diamonds, waves, confusing 3D diagrams

Too technical to sell the product

Needed to make sense to a non-technical audience making purchasing decisions, while still serving the analysts and engineers hunting for documentation

dbt Labs: What we needed

Customizable CMS

Needed a CMS that could reuse components for marketing teams to be able to self service. 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.

Website Design System

Needed a design system with pre-designed reusable patterns and components so marketers could create pages with templates

Sell convenience to every vertical

Using the CMS we have blogs and case studies to speak to every vertical for lead generation through SEO and AEO

Simplified for Sales

Created an illustration system with swappable pieces and established a visual language for simplifying complex data engineering pain points

dbt Labs: Who are the Users?

Business Leaders

Quick access to case studies and simple to understand pricing structure. Business leaders were evaluating dbt Cloud as an enterprise solution and needed clear, jargon-free explanations of the value proposition.

Analysts and Engineers

Want quick access to documentation, forum discussions and help guides. Data analysts and engineers needed efficient paths to documentation and honest comparison between Core and Cloud.

Marketing and Sales

Internal teams needing to self service pages for adding pages and use the website as the first touchpoint in the sales pipeline. The marketing team needed a content management workflow that didn't take a quarter.

Enterprise Clients

Need to quickly decide between purchasing dbt Cloud or having their developers implement Core

dbt Labs: The Research

Web Design Audit

Understand what common patterns are currently in use, and what is still needed. 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.

Stakeholder Interviews

Spoke with the Marketing and Sales teams to understand their needs

Competitor Analysis

Compared platforms and looked into solutions used by similar companies. I ran this 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.

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.

dbt Labs: 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.

dbt Labs: the Design System

Made using the Atomic Design model

Started with the smallest components and tokens based on our brand and product guidelines, then bigger patterns and eventually full pages. 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.

Designed in Figma, Documented in Notion, Built in Sanity

Every component, built for desktop, tablet, and mobile, had a documentation page in Notion and was then built out by the front end team in Sanity. 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.

Custom Illustration System

Over 70 images with a visual language to explain complex data workflows with swappable componentized elements for quick illustration creation. 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.

dbt Labs: Migration from Netlify CMS to Sanity

Netlify wasn't user friendly

It was too developer oriented, so the marketing team had to put in a request for each new page and wait a whole quarter for design and development

Customizable CMS

Every component, built for desktop, tablet, and mobile, had a documentation page in Notion and was then built out by the front end team in Sanity

Design System led Sanity building blocks

Pages were built with patterns from the design system, so CMS users could select pre-designed page templates or build the page themselves choosing from the different options for heroes and content blocks

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.

dbt Labs: Us vs Ourselves

Problem: Enterprise developers could implement our core software without needing to purchase dbt Cloud

Solution: Added comparison pages, pillar pages, landing pages, case studies, and FAQs to boost search and answer engine rankings highlighting cloud features

Solution: Used Sanity to content manage hundreds of case studies and articles speaking to different use cases and industries

dbt Labs: Usability Testing

User Interviews

Spoke with the marketing team to understand what features in Sanity were straightforward and what needed further customization

A/B Testing

Ran campaigns parallel with different language and landing pages, monitoring which signup forms had more conversions

Heatmapping

Employed the heat-mapping tool HotJar to understand where users are reading and navigating

Content Personalization

Used Mutiny to serve personalized content and language based on the user's needs

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.

dbt Labs: Accessibility

• Built for WCAG Standards
• High Contrast Color Schemes
• Alt text for all imagery
• Keyboard navigable components
• Typographical hierarchy for screen readers
• Pass level AA success criteria
• Also regularly speed test etc.

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.

dbt Labs: 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.

Self Service Publishing

Instead of a quarter-long design and development process, marketers could self-service, publishing whatever they needed. 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.

Clear definition of Core and Cloud

With increased content stressing the features and advantages of cloud, we saw improved enterprise lead conversion rates. The Core vs Cloud distinction finally had a consistent visual language across every surface.

Web Design and Illustration System

Pages are on brand every time because they are built out of templates made from the established design system. Wait time for illustrations reduced with componentized design. 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.

Simple language = More Sales Inquiries

And with more sales inquiries, dbt was able to get acquired by Fivetran shortly after the web refresh

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.

‍