Design System Execution Plan Communication at BILL 📊

This article outlines the strategic changes and execution plan of the Design System at BILL, emphasizing co-ownership and optimized component development.

1. Overview of the Design System Strategy 🌐

The recently revised Design System (DS) strategy aims to enhance collaboration across teams by implementing a new governance model that promotes co-ownership between the DS team and feature teams. This model is characterized by a federal/state/local mindset, wherein the corporate identity remains anchored, while allowing flexibility for localized design variations. The aim is to achieve a comprehensive approach that aligns product, marketing, sales, and support under a unified brand vision.

2. Governance Model and Communication Channels 📣

The governance model creates shared responsibility for design consistency and quality. Communication is facilitated through various channels to keep all stakeholders informed. Important communication tools include:

• Engineering Weekly Highlights email
• Eng All-Hands meetings
• Dedicated email lists (product@ and engineering@)
• Slack channels (design-system-general, eng-news, product-all, product-and-friends)
• An alias for inquiries (ask-trinity-eng)

These communication avenues ensure that all updates regarding the design system are disseminated effectively across the organization.

3. Component Optimization for Frameworks 🔧

3.1 Angular Development

The DS team is currently focused on optimizing web components specifically for Angular developers. This optimization includes enhancing existing components and integrating third-party libraries to support more complex functionalities. The goal is to align these components with the BILL standards to ensure consistency and robustness.

3.2 React Development

For React developers, the existing repository will be updated to meet BILL standards. While the current framework is accessible, upcoming enhancements will focus on improving performance tuning, remote modules, host applications, and theming. The aim is to establish a seamless link between design in Trinity Core Figma and implementation in code.

4. Phases of Implementation 📆

The execution plan is divided into three distinct phases:

4.1 Phase 1: Optimize (Q2 FY24)

This initial phase will concentrate on optimizing the existing components for Angular while updating the React library. Concurrently, design jams will be organized to refresh the visual and interaction standards, facilitating collaboration among designers and developers.

4.2 Phase 2: Refresh (Q3 FY24)

The second phase focuses on implementing the designs created during the design jams for both Angular and React libraries. This collaborative process encourages a shared vision and a unified approach to design.

4.3 Phase 3: Move (Q4 FY24)

In the final phase, the redesigned components will transition into code, empowering feature teams to build using framework-specific libraries. This evolution signifies the desired future state of the design system, where design and implementation are in perfect harmony.

5. Roles and Responsibilities in Co-Creation 🤝

The co-ownership model outlines roles for both design and engineering, where local teams—dubbed "librarians"—manage localized design variations. Designers will actively participate in drafting components during workshops, enabling localized features to be built collaboratively. If variations serve multiple products, they can be escalated to the global design level.

To foster an inclusive process, team members are encouraged to participate in upcoming design jams, where they can collaborate and share their insights.

6. Navigating Challenges and Encouraging Participation 📈

BILL understands that transitioning to this new model may present challenges. Therefore, designers and engineers are urged to maintain open lines of communication to resolve discrepancies between design and implementation. The DS team is also exploring enhanced documentation tools and accessibility training to ensure a robust understanding across all teams.

To promote participation in this transition:

• Schedule time for team members to engage in design jams and collaborative sessions.
• Utilize Slack channels for ongoing discussions and queries—ensuring everyone feels included in the process.
• Feature teams maintain the discretion to employ third-party design systems when business needs dictate, provided they remain conscious of accessibility requirements and consistent branding.

Conclusion 🌟

The Design System Execution Plan at BILL epitomizes a transformational approach to design governance and collaboration. By promoting shared ownership and sustainable frameworks for Angular and React, the strategy encourages innovation while maintaining brand consistency. As participation and collaboration are key to the success of this system, every team member’s contribution is invaluable in shaping the future of BILL’s design landscape.