Developed a comprehensive web design system for dbt Labs, creating a cohesive user experience across over 50 pages, a documentation site, and a learning management system.
Created and documented a robust design system with a detailed pattern library and component specifications to ensure visual consistency and scalability.
Crafted over 70 custom web illustrations that enhanced the design system’s visual engagement and reinforced dbt Labs’ brand identity.
As the Senior Web Designer for the Web Design System project at dbt Labs, I was responsible for ensuring the design system met the organization’s needs and was delivered on time. My role involved coordinating with cross-functional teams, setting deadlines, and overseeing the creation of design components and documentation. I initiated the project by defining the scope, creating initial wireframes, and ensuring that every component was meticulously designed and documented.
dbt Labs required a scalable design system to unify and streamline the user experience across its extensive web presence, including over 50 pages, a documentation site, and a learning management system (LMS). The challenge was to build a system that not only provided visual consistency but also facilitated efficient content management for marketers and supported future scalability.
The design system needed to cater to a diverse audience including end-users navigating the dbt Labs website, developers implementing the design system, and marketers managing content. Understanding the needs of these groups was crucial to creating a system that was both functional and user-friendly.
We examined existing design systems and websites in the data analytics and tech industry. Key inspirations included robust systems from companies like Atlassian and Salesforce, which offered insights into effective design patterns and component documentation. We aimed to incorporate best practices in usability and visual design, focusing on creating a system that was both elegant and highly functional.
I began by outlining the project timeline and setting milestones in our project management tool. We started with a "design system roadmap" in Figma, which included sections for component design, pattern library, documentation, and CMS integration.
Our initial phase involved designing individual components such as buttons, forms, and navigation elements. We created high-fidelity prototypes and gathered feedback from stakeholders to refine our designs. Key design considerations included ensuring visual consistency and usability across different platforms.
Additionally, I developed over 70 custom web illustrations that enriched the design system and contributed to a visually engaging user experience. These illustrations were crafted to align with dbt Labs' brand identity and enhance various web pages with unique, tailored graphics.
Once the core components were designed, we turned our focus to integrating them into the CMS. We created a detailed Notion database documenting each component's specifications and usage guidelines. This database served as a critical resource for developers, ensuring that they could accurately implement the design system. The developers would leave comments and questions in Figma, Asana, and Notion to ensure feedback loops. We created looms to show the marketing team how to use the new page builder in the CMS
As we moved into implementation, we continued to iterate on our designs based on feedback from usability testing and real-world use. We developed a comprehensive pattern library and refined our CMS templates to enhance usability and flexibility. The final design system included pre-built templates and a user-friendly page builder, allowing the marketing team to manage content efficiently.
The design system successfully delivered a cohesive and scalable framework for dbt Labs’ web presence. One significant tradeoff was balancing design flexibility with the need for consistency. We resolved this by creating a flexible pattern library that allowed for some degree of customization while maintaining overall design integrity. The integration of custom illustrations added a unique visual element that set the design system apart from more generic solutions. This project taught me the value of clear documentation and the importance of iterative design processes in achieving a successful outcome.
Key Metrics:
Conclusion:The Web Design System for dbt Labs was a success in unifying and streamlining their digital presence. By focusing on meticulous design, thorough documentation, and seamless CMS integration, we created a system that met the needs of all stakeholders and set the stage for future growth and adaptability. The inclusion of custom illustrations further enriched the user experience and reinforced the brand’s visual identity. This project highlighted the importance of cross-functional collaboration and iterative design in achieving impactful and scalable solutions.
