Design System Strategy Memo at BILL
Design System
FY24 Charter & Strategy
Executive Summary
In FY24, the Design Systems team is reinforcing its strategy to drive velocity of internal product development teams - in support of eng @ scale with speed and quality in mind. Many internal development teams gave feedback that they are slowed down by the Design System. Internal research uncovered the main challenges: (1) missing foundational design and development elements at the time of building, (2) missing documentation, (3) lack of governance/guidance, (4) unclear expectations around ownership, (5) lack of processes, (6) lack of training, and (7) manual support and maintenance experience.
In order to address these challenges, the Design Systems team will invest in 4 key areas to drive velocity and transform the Design System into an essential product development tool at BILL: (1) Technology (2) Community (3) Process and (4) Integrated Design.
- Technology: (Assumption: UI Architecture requires support for both Angular and React. This decision is not driven by the Design Systems team – we are a consumer of the architectural direction.) The Design Systems team will invest in the technology that best fits the ways internal product development teams work - helping to reduce overhead of using the Design System.
- Recommendation: Consolidate Design libraries now [Link Redacted] While this recommendation will take investment, it will increase the velocity of designers. Up front collaboration via design jams in getting alignment on visual and interaction standards across the design community (more predictable design requirements) can streamline technical execution.
- Implications for Designers: Designers can continue to operate as they do today until the new libraries are ready in Figma and in code.
- Recommendation: Move to framework specific libraries [Link Redacted]. Based on the feedback and challenges some teams face with web components to operate at scale, we are moving from framework-agnostic to framework-specific libraries over the next year or so. To balance productivity and flexibility, we will reinvest in the existing React library (Skylab), web component (WC) “atoms,” and third-party Angular libraries for Angular “molecules,” which are combinations of atoms. A future state for Angular developers is to use fully Angular components (i.e., Angular CDK). This investment will be taken on by the Design System team in FY24. Details in the Engineering execution plan [Link Redacted].
- Implications for Engineers: In the short term, teams can continue as they are operating today with existing design systems or third-party libraries on an exception basis [Link Redacted]. Feature teams that choose the exception (e.g., Angular Materials UI) are responsible for accessibility, BILL branding, bugs, and ongoing maintenance – “use at your own risk.”
- Recommendation: Consolidate Design libraries now [Link Redacted] While this recommendation will take investment, it will increase the velocity of designers. Up front collaboration via design jams in getting alignment on visual and interaction standards across the design community (more predictable design requirements) can streamline technical execution.
Sign up to see more
Create your free account to view the full artifact
Have an account? Sign in
By creating an account, you agree to Reforge's Terms & Conditions