Design System Strategy at BILL: Empowering Teams for Enhanced Velocity 🚀

The purpose of this article is to elucidate the strategic advancements in the Design System at BILL, aimed at enhancing the velocity and effectiveness of internal product development teams.

1. Introduction to the Design System Strategy 🛠️

In the fast-paced environment of product development, efficient design systems are pivotal. At BILL, the Design Systems team has embarked on a strategic overhaul aimed at addressing the challenges faced by internal teams and optimizing the effectiveness of the design process. Through four primary focus areas—Technology, Community, Process, and Integrated Design—the team seeks to transform the Design System into an invaluable resource.

2. Addressing Key Challenges of Product Development Teams 🔑

Internal feedback reveals several pain points that hinder the velocity of product development:

• Missing Foundational Elements: Teams often find themselves building from scratch due to the absence of certain design elements.
• Lack of Documentation: Inadequate guidance results in confusion and inefficiencies, as multiple sources of truth exist without clear paths for access.
• Governance/Guidance Issues: The absence of structured decision-making leads to misalignment across design and engineering teams.
• Unclear Expectations: Contributions to the Design System often become frustrating when not integrated into project scopes.
• Training Gaps: Designers and engineers frequently grapple with knowing when and how to engage with the existing system.

3. Strategic Investment Areas to Drive Velocity 🚀

To overcome these challenges, the Design Systems team has identified four strategic investment areas:

3.1 Technology Investments 💻

The architecture of the user interface must accommodate both Angular and React. The primary recommendation involves consolidating design libraries to enhance developer velocity.

• Framework-Specific Libraries: Transitioning from framework-agnostic to framework-specific libraries will facilitate ease of use. Existing React and Angular libraries will be expanded upon to meet the teams' needs comprehensively.

Implications for Designers and Engineers: Designers can maintain current workflow practices until the new libraries are finalized. Engineers are encouraged to utilize existing systems while ensuring accessibility and maintenance across all libraries.

3.2 Building a Collaborative Community 👐

The Design Systems team aims to foster a collaborative environment that integrates design, engineering, and content design teams into a cohesive decision-making framework.

• Design Jams: Through collaborative workshops that align visual and interaction standards, the team encourages collective ownership of the Design System.

Implications for Teams: This inclusive governance model allows both designers and developers more opportunities to shape the Design System, facilitating a faster and more straightforward contribution process.

3.3 Streamlining Processes 📈

The Design System team will refine and communicate user-friendly processes to facilitate easier adoption and use of the system.

• Enhanced Documentation and Support: Investing in improved processes for onboarding new hires, integrating the Design System into product development life cycles (PDLC), and implementing an efficient ticketing system will streamline user experiences.

Implications for Teams: A more coherent process will reduce the time spent seeking guidance, allowing teams to focus on design and development tasks.

3.4 Integrated Design Approach 🎨

The incorporation of BILL’s branding into the Design System is crucial for ensuring consistency across all product experiences.

• UP Program and One Color Initiative: These initiatives will aid in translating the BILL brand into the Design System, ensuring a unified look and feel.

Note on Customization Needs: The system must accommodate custom branding for specific projects while maintaining a coherent style.

4. Conclusion: A Collaborative Future for Design Systems 🌟

BILL is poised to redefine the Design System landscape through strategic investments that enhance both designer and engineer experiences. By focusing on technology, community, process, and integrated design, the team is set to create a robust framework that alleviates common pain points and accelerates product development.

This ambitious strategy not only aims for improved velocity but also fosters a culture of co-creation, ultimately driving satisfaction and effectiveness across BILL’s design and engineering teams. The future of the Design System at BILL is bright, emphasizing collaboration, clarity, and a unified purpose.