Over time, Capital One had launched multiple consumer and dealer facing products. The products were created by different teams operating fairly siloed. The lack of consistency was beginning to hinder our ability to scale our efforts.
I led an initiative to eliminate arbitrary uniqueness across 10 work streams by unifying the code base and design system via micro frontends for each of the functionalities.
Problem to solve
Across the Capital One Auto portfolio of digital products, there were multiple products that had similar consumer and dealer facing functionality that was not coded or designed in a consistent manner. Each separate code base was having to be maintained independently, leading to wasted time and making it slower to push code deployments.
The differences in design were leading to inconsistencies from an experience and branding perspective. Not leveraging a unified design system was making it difficult to elevate the quality of the work.
Discovery
I led an audit across the different product experiences to identify the areas within the product that should be unified. In partnership with product and tech, we identified 10 areas that would become the 10 work streams:
- Search
- Pre-Qualification Application
- Share with Dealer
- Stipulation submission
- Customer identity
- Build and review the deal
- Brand customization
- Dealer website integration
- Saved deals
- Pricing orchestrator
Definition
With the work streams identified, I determined who the working teams would be for each area of focus, established a weekly huddle and biweekly design review to stay in sync. I setup a review every 6 weeks with executive leadership to ensure consistent alignment and increased speed to market as we made progress.
I worked closely with each of the working teams to determine how the micro frontend would function to ensure it would work for all of the product experiences. I guided each team to leverage the existing design system or contribute back to the design system if a new design pattern was truly needed.
Build
This was a high visibility effort, so it was important that we worked in lock step with our product and tech partners throughout the process and escalated concerns quickly to stay on track to deliver by end of year. While each of the 10 work streams worked with their pods to build out the functionality, I focused on removing barriers and resolving concerns quickly to keep the work on track.
Measure
Throughout the process, the project management team kept a scorecard with detailed information on the status of each of the 10 work streams. A green scorecard meant that everything was on track to deliver. I was able to keep the design team on track and green on the scorecard throughout the entire effort. I partnered with tech and product closely to ensure their progress and scorecards stayed on track as well. If they were ever in the yellow, I would ensure we were coordinated and get them back on track quickly.
We were able to complete the initiative by end of year as projected with all micro frontends live within each product experience.
Iterate
Once the micro frontends were live, we were able to collect data from each of the product experiences to inform what was working and what wasn’t working. This data informed how functionality would evolve while staying consistent across all products.
Iterations were significantly easier to execute and deploy with the unified code base and design system.