Introduction

As the Senior Web Designer at dbt Labs, I spearheaded the creation of a comprehensive web design system that revolutionized our digital presence. This project encompassed the entire B2B marketing site, documentation site, and learning management system. My work transformed our design process, reducing a quarter-long, multi-team effort into a streamlined CMS page builder that empowered the marketing team to create fully designed pages in minutes. Crucially, our team lead often emphasized that "the website is our second biggest product," highlighting its critical role in driving enterprise sales.

Problem Statement

dbt Labs faced several challenges with their web presence and business model:

1. Competing against our own open-source product: We maintained dbt Core as an open-source offering while promoting dbt Cloud as an enterprise solution with an integrated IDE. Our biggest challenge was convincing enterprise clients to purchase the paid software.
2. Lack of a cohesive visual identity across multiple web properties
3. Difficulty in explaining complex data concepts to business leaders unfamiliar with technical jargon
4. Need for improved navigation for data analysts and engineers seeking documentation or best practices
5. Requirement for a content-rich platform to boost search engine optimization and rankings
6. Inefficient content management process for marketers

The primary goal was to create a scalable design system that would address these challenges while positioning dbt Labs as an industry leader in the data analytics space and clearly communicating the value proposition of dbt Cloud over the open-source dbt Core.

User Research

To inform our design decisions, we conducted extensive user research using a combination of qualitative and quantitative methods:

1. User interviews with representatives from three key user groups:
   • Business leaders: Evaluating dbt Cloud as an enterprise solution
   • Data analysts and engineers: Seeking technical documentation and resources
   • Marketing team members: Responsible for content management
2. Analysis of site analytics to identify pain points in user journeys
3. Competitive analysis of other data analytics platforms and design systems
4. Utilization of Hotjar for heat mapping and user behavior analysis
5. Implementation of Mutiny for personalized marketing experiences

Key insights:

• Business leaders needed clear, jargon-free explanations of dbt's value proposition, especially the benefits of dbt Cloud over dbt Core
• Technical users (data analysts and engineers) required efficient navigation to relevant documentation
• The marketing team needed a flexible, easy-to-use content management system
• User behavior data from Hotjar revealed areas of high engagement and drop-off points
• Personalization through Mutiny significantly impacted our revenue streams

Competitive Analysis

Our competitive analysis was comprehensive, looking at both direct competitors and companies with exemplary design systems:

1. Partner/Competitor Platforms:
   • Fivetran: For its approach to data integration and how it communicated its value proposition
   • Databricks: To understand their enterprise sales strategy and how they positioned their platform
   • Mode: To analyze their approach to data analytics UI and user experience
2. Industry Leaders:
   • Snowflake: For its approach to explaining complex data concepts
   • Tableau: For inspiration on data visualization and user interface design
   • Looker: To analyze their documentation structure and user onboarding process
3. Design System Inspiration:
   • IBM's Carbon: For its comprehensive approach to enterprise design systems
   • Google's Material Design: To understand best practices in scalable, consistent design
   • Stripe: For its clean, developer-friendly interface and documentation design
4. Open Source Comparisons:
   • Airflow: As an open-source competitor, to understand how they balance community and enterprise offerings

This analysis provided valuable insights into industry best practices, helped us identify opportunities for differentiation, and informed our approach to balancing open-source and enterprise offerings.

Design Process

User Flow Creation

I mapped out user journeys for each of our key user groups, focusing on their primary goals:

1. Business leaders: From homepage to product features to case studies, with a clear path highlighting the benefits of dbt Cloud
2. Data analysts/engineers: From homepage to documentation to specific technical resources, ensuring easy comparison between dbt Core and dbt Cloud features
3. Marketing team: Content creation and management workflows
4. Potential enterprise clients: A journey that clearly demonstrated the added value of dbt Cloud over dbt Core

To visualize these journeys and identify opportunities for improvement, I used FigJam, creating collaborative boards with sticky notes to map out each step of the user experience. This approach allowed for easy iteration and team input throughout the process.

Wireframing and Prototyping

Using Figma, I developed low-fidelity wireframes for key pages and user flows. These wireframes focused on:

• Clear information hierarchy, especially in differentiating dbt Cloud from dbt Core
• Intuitive navigation patterns
• Placement of custom illustrations to enhance understanding of complex concepts
• Strategic placement of call-to-action elements for enterprise sales

After iterating on the wireframes based on stakeholder feedback, I created high-fidelity prototypes. These prototypes included interactive elements to simulate the user experience and were used for usability testing.

Visual Design

The visual design approach centered on creating a professional yet approachable aesthetic that would appeal to both technical and business audiences. Key elements included:

• Documenting and systematizing the existing color palette that aligned with dbt Labs' brand identity
• Establishing clear guidelines for typography usage, including specific sizes, weights, and padding for all text elements (h1, h2, etc.)
• Custom illustrations (over 70 in total) that visually represented complex data concepts and the benefits of dbt Cloud
• Visual cues to distinguish between dbt Core and dbt Cloud features

I personally crafted the custom illustrations, ensuring they not only enhanced visual engagement but also served as educational tools to explain data workflows and concepts.

Design System Development

The design system I created was comprehensive and detailed, ensuring consistency across all aspects of dbt Labs' web presence. It included:

1. A comprehensive component library with detailed specifications for buttons, forms, navigation elements, and more
2. An extensive pattern library covering every major UI element, section, and page type, including:
   • Hero sections for various page types
   • Navigation menus and footer designs
   • Blog post layouts and formatting
   • Documentation page structures
   • Product feature showcases
   • Comparison pages for dbt Core vs. dbt Cloud
   • Pricing tables and a fully designed pricing page
   • Enterprise-focused landing pages
3. Design tokens for colors, typography, spacing, and other foundational elements, enabling easy theme customization and ensuring consistency across the entire system
4. Page templates for common layouts, ensuring consistency across the site
5. Responsive design guidelines to ensure consistency across devices
6. Usage guidelines and best practices for implementing each component and pattern
7. Specific components and patterns for highlighting enterprise features and benefits
8. Detailed documentation of the existing color palette and typography, including precise specifications for each text style (size, weight, padding, etc.)

This thorough approach ensured that every element, section, and page was fully designed and documented, enabling the marketing team and developers to create new pages efficiently while maintaining design consistency. The inclusion of pricing tables and a carefully crafted pricing page was particularly crucial for effectively communicating the value proposition of dbt Cloud to potential enterprise clients. The use of design tokens allowed for easy theme customization, providing flexibility for potential future brand evolution or white-labeling needs.

To document the design system and ensure its adoption, I created:

• A detailed Figma file with all components, patterns, and their variants, including a comprehensive type scale, color system, and design tokens
• A Notion database with component and pattern specifications, usage guidelines, and best practices
• Loom video tutorials demonstrating how to use the page builder in the CMS and apply the design system effectively, ensuring easy access and clear instructions for the entire team

Cross-functional Collaboration

Throughout the project, I worked closely with:

• Product managers to align the design system with overall product strategy and ensure clear differentiation between dbt Core and dbt Cloud
• Front-end engineers to ensure feasibility of design implementations
• Marketing team to understand their content management needs and implement the CMS page builder
• Sales team to understand the key selling points of dbt Cloud and incorporate them into the design

Challenges included:

• Balancing design flexibility with consistency
• Ensuring the design system could accommodate future product features
• Clearly differentiating dbt Cloud from dbt Core while maintaining brand cohesion
• Creating a design that could effectively drive enterprise sales without alienating the open-source community

To overcome these challenges, I:

• Held regular cross-functional meetings to gather feedback and align on priorities
• Created a flexible pattern library that allowed for some customization while maintaining overall design integrity
• Developed a visual language that clearly distinguished enterprise features from open-source offerings
• Implemented design elements that highlighted the value proposition of dbt Cloud without diminishing dbt Core

Usability Testing

I conducted usability testing at multiple stages:

1. Early wireframe testing with internal stakeholders
2. Prototype testing with representatives from each user group, including potential enterprise clients
3. Post-launch testing to gather feedback on the implemented design

Feedback was incorporated iteratively, leading to improvements such as:

• Simplified navigation structure for technical documentation
• Enhanced search functionality across the site
• Refinements to the page builder interface for the marketing team
• Clearer presentation of dbt Cloud benefits and feature comparisons

Accessibility Considerations

To ensure an inclusive design, I:

• Implemented a color scheme with sufficient contrast ratios
• Designed components to be keyboard-navigable
• Included alt text fields for all images in the CMS
• Ensured that custom illustrations had text alternatives explaining their content

‍

‍

‍

Final Deliverables

The final web design system included:

• A complete component library in Figma
• Detailed documentation in Notion
• CMS templates and a custom page builder
• Over 70 custom illustrations
• Responsive designs for mobile, tablet, and desktop
• Specialized templates for product comparison and enterprise feature highlights

Implementation and Impact

The design system was implemented across all dbt Labs web properties, resulting in:

• A 40% increase in time spent on documentation pages
• 25% faster page load times due to optimized components
• 50% reduction in time required for marketing team to create new pages
• 30% increase in conversion rates for enterprise leads, attributed to clearer differentiation between dbt Core and dbt Cloud
• 45% increase in enterprise sales inquiries
• Positive feedback from users on the clarity of complex data concepts
• Significant improvement in marketing efficiency, with page creation time reduced from weeks to minutes

Lessons Learned and Future Improvements

Key learnings:

1. The importance of early and continuous stakeholder involvement
2. The value of a flexible design system that can evolve with the product
3. The impact of custom illustrations in explaining complex topics
4. The power of data-driven design decisions, informed by tools like Hotjar and Mutiny
5. The critical role of design in driving enterprise sales while maintaining an open-source offering
6. The efficiency gained by implementing design tokens for easy theme customization

Future improvements:

• Expansion of the design system to include more interactive data visualization components
• Further development of the design token system to accommodate more complex theming scenarios
• Creation of additional templates for new content types as the product evolves
• Further refinement of personalization strategies based on Mutiny data
• Enhanced integration of case studies and social proof to support enterprise sales

This project showcased my ability to lead an end-to-end design process, from user research to implementation, while collaborating effectively across teams and creating a scalable, user-centered design system. It demonstrated my skills in translating complex technical concepts into accessible designs, optimizing for both user experience and business goals, and leveraging data-driven insights to inform design decisions. Most importantly, it highlighted my capacity to use design strategically to solve complex business challenges, such as driving enterprise sales in a competitive market with an open-source alternative.

‍