BILL's highest-priority initiative in FY26. initiative to modernize an 18-year-old product ecosystem across legacy architecture, fragmented UX, and slow delivery systems, while improving trust, performance, and workflow speed without stopping the business.
My Role
Design Lead
Overview
BILL's product ecosystem had been built and extended across nearly two decades. What customers experienced as inconsistency was actually the visible surface of a deeper systems problem: two frameworks, nine isolated repos, six design systems (or non-systems), and years of local decisions that never had to reconcile into one platform story. We were shipping our org and the customer could feel it.
By FY26, the costs were impossible to ignore. Rollouts were slow and fragile. Page performance lagged. Core workflows were visually dated and structurally inconsistent. Teams were shipping into different shells, with different patterns, through different technical pathways. The company was not ready for a full rebuild, but with competitors scaling faster on newer platforms it could no longer afford to coast.
The result was Modernization as a program. A multi-layered initiative that spanned backend consolidation, frontend unification, an org-wide migration directive, and new standards for the way we work as a culture. As design lead of a cross functional A-team, I was responsible for standardizing system UX frameworks, design system adoption, workflow redesign, and a scalable QA process to build quality control into the culture. into one coordinated program. The job was not just to polish isolated surfaces. It was to help the organization move an entire platform toward a more coherent future without breaking the present.
The problem
Deeply fragmented UX, legacy architecture, slow delivery, poor performance, and eroding customer trust.
My role
Design Lead
The mod squad
3 Directors, 3 Leads, 2 Data Scientists, 1 Project Manager
Outcomes
87% platform adoption YTD, 35% faster eng cycle time, 44% faster LCP, 90% increase in customer satisfaction scores.
“I feel like I have to apologize for BILL… It looks very sort of WEB 1.0, enterprise-y. It doesn't look like modern software.”
-Top AC console user
Constraints
Constraint 01
The company was still not open to a frontend rebuild. Modernization had to happen incrementally.
Constraint 02
We had to use and maintain the current design system platform.
Constraint 03
The product architecture still had to support two frameworks throughout the platform evolution.
Constraint 04
Even though it was the company's top priority, modernization could not negatively impact quarterly revenue goals.
Modernization Strategy
The initiative only worked because modernization was framed as experience, system, and platform consolidation happening in parallel, rather than as isolated fixes.
Ratification of core IA experiences was critical to establish the standard to evolve to. The Trinity Template Library was leveraged as the sublevel workstream to accomplish this.
Used modernization as the leadership-backed forcing function to migrate 63 squads on to a single system and deprecate independent libraries that were fragmenting the experience for our end users.
5→1
Design system migration
The web platform team used Modernization as the opportunity to consolidate the 7 NG repos that were shipping the BILL experience into a single mono repo architecture for more robust rollouts, improve performance, and enforce org-level QA processes.
7→1
Repos consolidated
Workstream 01
In order to migrate the entire product to a unified experience, we first needed to identify what that north star vision of that experience was. The work to do so involved months of deep org-wide collaboration and research that you can learn more about in detail in the Trinity Template Library case study.
By defining the core UX architecture and establishing that through pattern level components, we were laying the groundwork for a consistent and predictable experience that could be propagated at scale throughout the product by way of incremental adoption.
The foundational layout for all primary product views. Defines the relationship between the UI shell, page header, and canvas content area.
Data grid is the cornerstone of the BILL product experience. Structures dense tabular data with inline actions, sorting, filtering, and pagination.
A popover container to serve single or multistep workflows that guide users through tasks like creating payments, onboarding, or completing approvals.
Contextual overlays that slide in from the right to show detail views, edit forms, or secondary workflows without losing page context.
Focused interruption for confirmations, destructive actions, or compact task completion that demands user attention.
Workstream 02
A cornerstone of the modernization initiative was the adoption of the platform design system which boils down to an enterprise level migration.
This is an ongoing effort to hit 100% adoption by the end of FY26. Massive shoutout to staff lead engineer Daniel Tupa and design systems architect David Cai for establishing the component migration process with copilot and scaling it out to all squads.
Deprecating 4 libraries
BDC
Legacy BILL component library
Web Components
Framework-agnostic custom elements
Angular Material
Third-party component library
Hardcoded Custom
One-off inline implementations
Trinity Angular
Unified design system — single source of truth
Adoption over time — Core repo
Workstream 03
One of the biggest opportunities that modernization presented was the consolidation of the angular repositories into a single monorepo.
BILL had been built over 7 isolated angular repositories over 20 years, each with its own build process, versions, test suites, and deployment pipelines.
This fragmentation was a major bottleneck in the development process, a huge factor in the deployment fragility, and a major hit to page perfomrance when the homepage was sliced together with 7 MFEs.
This repo migration, dubbed the Angular Homecoming, is/was the largest factor in improving individual page performance across the product. Big kudos to the web platform team at BILL for driving this and making it happen.
Outcomes
Modernization created measurable progress across system adoption, delivery speed, page performance, and cross-product UX quality, all while de-risking how the company ships change.
63%
Adoption up from 12%
On to the unified platform design system
3
Libraries Deprecated
Leadership directive to sunset 3 legacy libraries and hardcoded implementations
35%
Faster Delivery
Reduction in average development cycle times
44%
Faster LCP
Average improvement across top 10 traffic pages
1
Consistent Shell
Unified UX and UI shell across the product
The most important outcome was not any one percentage point. It was that the product began to behave more like a coordinated platform and less like a portfolio of isolated histories. That showed up in how teams shipped, how pages loaded, and how customers perceived overall quality.
The adoption curve also mattered strategically. Moving from roughly 12% to 63% meant the company finally had enough shared infrastructure to make consistency and speed feel compounding rather than aspirational.
We were not just delivering a visual refresh. We were changing the cost structure of product development: fewer duplicate systems to maintain, fewer bespoke decisions to make, and a stronger shared bar for quality before release.
That is what made the initiative feel like modernization instead of migration. The product got better for customers, and the organization got better at making the product.
Reflections
The strongest choice we made was framing modernization as one strategic program instead of splitting UX, system adoption, performance, and engineering quality into separate initiatives. That alignment gave the work leverage.
Once customers, PMs, designers, and engineers could all see their problem in the same modernization story, prioritization became much easier.
Incremental modernization is inherently less elegant than a rebuild. Legacy realities, framework divergence, and active roadmap pressure constantly push against ideal architectural choices.
A large part of the work was managing those compromises without letting the initiative collapse back into local optimization.
The deepest lesson was that modernization succeeds when customer trust, system adoption, visual refresh, and engineering velocity are treated as one problem. Separating them may simplify org charts, but it weakens outcomes.
The design lead role in a program like this is not just craft stewardship. It is strategic integration: keeping the whole platform pointed at a more coherent future.
