Building the Future: Transforming a Fintech UI Component Library

I am currently overseeing a project to re-write an existing UI Component Library using React. The Component Library has over 40 UI components, such as buttons, grids, and forms, which support the internal Design System for a NASDAQ listed Fintech software development company. The Component Library is currently based in Backbone.js.

The project and team were founded about a year ago to create formal structure for the existing Component Library, which had been managed informally by teams throughout the company part-time.

As the hiring manager and development leader, my first task was to determine team size needs and set realistic expectations. I developed a plan to hire two Developers, one Quality Assurance Engineer, and a Designer to also act as Subject Matter Expert for the Design System.

We were able to onboard our team quickly. With three people in the USA, one in the UK, and another in continental Europe, the team has a wonderful balance of cultures and knowledge. My role on the team is part-time for me, so I am engaging as scrum master and project manager to put my time with the team to best use.

Re-writing the existing component library met the same challenge as most software re-writes… unclear and/or undocumented functionality in the system to be replaced.

To counter that problem of unclear requirements, I set the entire team on the task to determine the requirements of the existing Component Library. We established documentation frameworks for the team and created project tasks for each existing component.

For each component, I tasked our developers to work with the developers who consume existing components to determine all requirements in use. Our QA staff worked with consuming QA staff, and our Designer collaborated with their peers, all to fully understand how each existing component was used.

After completing our research into existing requirements, we finalized the project tasks for each component. Those tasks include the full requirements for each component, the design documents, links to any relevant existing code, and test cases shared by consumers. Our team shared each task with our stakeholders and received final sign off on the requirements before we started development.

Our team is now well underway building out each new component in React with full test coverage and well-documented requirements. The result of this project should be a stable and modern UI Component Library that provides quality and consistent experiences to an entire suite of products.