This document outlines the communications plan for the execution of the Design System strategy. It is the wider communications plan for all engineers, designers, and product managers that interact with the Design System daily. This plan shows how to share an execution plan with a large audience that will all be affected by large scale changes that are being made to an internal system.

Tara Wellington

The memo was written to help us broadly share the design system strategy changes with the wider organization.

Design System (DS) Execution Plan Communication

 Design System leadership team, CTO, CPO, advisors.

Design System internal customers. The email from DS will be forwarded by each functional leader to their groups with, we hope, explicit support/endorsement.

“Engineering Weekly Highlights” email from Eng

Slack channels (design-system-general, eng-news, product-all, product-and-friends) and alias (ask-trinity-eng)

 Design Systems (web) – October updates

we’ve completed the hard look at BILL’s web design system in response to your feedback. Since the last communication in July, you’ll find some changes and more executional guidance. We know this transition period can be confusing and tough on teams, so do not hesitate to reach out to the DS team or your pillar leaders.

The FY24 Design System charter & strategy was approved by Ken Moss and Irana Wasti. The three key strategies are as follows:

(engineering) Gradual evolution from agnostic to framework-specific libraries in both Angular and React

To deliver on the first strategy with process, the DS team will introduce a new governance model to support a co-ownership approach between the DS team and feature teams. The intent is to balance central oversight with distributed ownership in Design & Engineering – at scale. This is the federal/state/local mindset with local “librarians” you may have heard about from Nick Hahn.

From a design perspective, the DS team will invite designers across BILL to a series of design jams as we co-create components and patterns together. What comes out of these workshops will be updated Figma for Trinity components.

On the engineering front while the (web) design system refreshes, the interim guidance is:

Trinity web components in code, which are being augmented for Angular via 3rd-party libraries

Designers and engineers collab if Figma/code don’t match.

Trinity Core FigmaorHubblefor design, at your discretion

Designers and engineers collab over discrepancies.

When it comes to timing, the target milestones look like this:

Q2 FY24. The DS team optimizes web components for Angular developers. Update React library for BILL standards. Meanwhile, design jams are happening to refresh visual and interaction standards.

Q3 FY24. Implement the refresh per design jams for Angular & React libraries.

Q4 FY24. Start moving to Angular framework. Continuous improvement in React.

Keep reading for guidance on the tactical approach. We are open to feedback on all of it – start with Gina Han (PM), Nick Hahn (PX), or Rajwant Hayer (Eng). Thank you!

What is the new governance and co-ownership model for how the DS team works with feature teams?

Even more so than before, expect to take an active role in designing and coding the design system as we scale with a decentralized model. You’ll be in the kitchen with the DS team, side by side.

Think of federal/state/local laws in the US (or a tiered equivalent in other countries). At BILL,

Federal refers to the BILL corporate brand identity across product, marketing, sales, and support.

State refers to the visual design system that is consistent throughout the logged-in product.

Local refers to visual styling and interaction variations specific to some logged-in product areas and not others. The local (design & engineering) caretakers outside of the DS team are dubbed librarians for now.

This operating model kicks off with a design reset via a series of design jams across the design community at BILL to redefine the visual design and interactions we want in Trinity components – together. We hope this infuses our design system with a shared vision of the use cases and requirements that serve the most teams.

What does co-creation, co-development, or co-ownership mean for feature teams? How is taking on Trinity work going to enable my team to go faster?

By front-loading time spent on requirements and feature context with teams closest to end-customer problems, we can execute on the right things more efficiently. When you’re in the kitchen, what comes out will satisfy your tastes better.

Feature team designers have a hands-on opportunity to draft components in Figma during the workshops. Component variations unique to a local area can be built by the local engineering team in service to distributed ownership. If those are found to serve multiple areas, they can be elevated to the global design system (state level) in the federal/state/local model.

This is a new concept to shape together so attend the design jams or set up time to talk with us, if you don’t hear from us first.

What can we expect with web components (WC)?

We are still moving towards a framework-specific approach in Angular and React, but we are taking a more measured approach to minimize disruption to teams. The DS team will continue to maintain WC, especially for simple, atomic elements. We will address bugs we determine as P0/P1 and ask for contribution on P2/P3.

For more complex patterns like overlays and forms, enhancements, and new patterns that serve multiple teams, the DS team will optimize for Angular developers with an enhanced Angular library called tri-ng based on third-party Angular systems. All of these will be found in the existing WC Storybook and in internal “demo” web applications where developers can play with the components to observe how they work.

React developers use Skylab, which is also being enhanced to match BILL standards.

Any Trinity web components used in areas built in React (e.g., bank, vendor, settings) can be evaluated at the feature team’s discretion and timeline to transition to a framework-specific library in order to inherit future improvements.


When will the Angular & React design systems be ready to use?

Angular developers can continue using web components and will find more complex components optimized for Angular via a third-party library that will be the basis for the Angular set.

React is available to use immediately, but expect enhancements as the DS team updates it to BILL standards around remote modules, host apps, performance tuning, and theming.

This is BILL’s co-created visual/interaction design language starting from a blank slate. Attend design jams led by the Design Systems crew to facilitate the co-created designs. We invite all designers and UI engineers to participate and code what goes into the design system. We are switching to a decentralized federal/state/local model in order to scale (see 

Once the redesigned components are available in code, feature teams can start building entirely with framework-specific libraries where Figma and the code match. This represents the future state we all seek.

What is the design systems team doing now?

The team is balancing current maintenance and future state work in WC, Angular, and React.

DS designers are facilitating role definition for design & engineering “librarians,” design jams, and refining the federal/state/local governance model.

Evaluation of more powerful documentation tools.

Exploring ways to include written content standards.

Accessibility training to uplevel a11y guidance for all teams.

Questions? Meet with us! This transition is not one-size-fits-all for teams. Designers cansign up for office hours or we are happy to talk.

Expect Figma and code mismatches for now – designers and engineers negotiate.

Make room in your schedules and roadmaps to participate in upcoming design jams and other opportunities to co-create, co-develop, and co-own Trinity.

Yes, if business demands require using a 3rd-party design system, your teams have the discretion to choose that path. The bank channel is an example where the visual design language is determined by partners rather than BILL. They use a blend of Trinity and a third-party system for now. We’ll be working together to find a balance between leveraging Trinity and customization specific to each bank’s branding.

However, exceptions are outside the scope of the Design Systems team, which means teams that choose this path are responsible for accessibility conformance, appropriate branding, upgrades, and ongoing maintenance. Feature teams can weigh the pros and cons of going off-the-grid.

Information overload! Is there a forum for Q&A?

Yes, Slack #design-system-general or designers can attend DS office hours.

Design System Strategy FY24 Part 1: Intro & Challenges

Design System Strategy FY24 Part 2: Challenges and Solutions

Design System Strategy FY24 Part 3: Governance & Co-Creation

Thank you for your support and contributions to our design systems.

Design System Execution Plan Communication at BILL

Design System (DS) Execution Plan Communication

Milestones

Reviewed by

Media channels

Sign up to see more