Design System for B2B Sites

- Process - I worked closely with another designer, we began by conducting a full audit of the B2B experience — inventorying pages, reviewing documentation, and identifying patterns, gaps, and inconsistencies across the site. From there, we partnered closely with developers and PMs to understand constraints, explore technical possibilities, and align on what we could realistically build within the project timeline. Together with engineering, we also established a shared naming convention for styles, components, and sections to ensure consistency across design and code. Because the design system needed to operate across multiple environments — a design library in Figma (taking advantage of the use of tokens and variables), a reusable component library in Storybook, and styles and sections in Contentstack for authors — the system was intentionally structured to support cross-tool coherence and a unified workflow for page creation. To move efficiently within time constraints, the work was organized into four main stages: 1. Audit & Definition: Understanding the current state, identifying the highest-value components and sections, and defining core styles. 2. Initial Build: Designing and developing the first set of reusable components and page sections, along with foundational documentation. 3. Expansion: Designing and developing the second set of sections and an additional composable page, followed by migrating existing ones. 4. Evolution: Iterating on previously created sections and introducing a new type of composable page based on emerging needs. Throughout the process, we maintained close collaboration between design, engineering, strategy, and supporting teams — staying aligned even as priorities shifted and requirements evolved. Once the system was established, we led a full migration of existing B2B pages to adopt the new components, guidelines, and standards — ensuring consistency, scalability, and a more predictable foundation for future enhancements. - Outcome - The result was a dedicated, reusable B2B design system aligned with Brand that enabled faster and more consistent page creation. Authors gained flexibility and autonomy in Contentstack while still operating within clear patterns and standards. A designated design–engineering pair now oversees quality assurance, system governance, and ongoing evolution — ensuring the design system continues to grow with business needs, user expectations, and the product’s long-term vision.