HomeAboutResumePortfolioContact

Navigation

  • Home
  • About
  • Resume
  • Portfolio
  • Contact

Contact

  • drewcampbell013@gmail.com
  • New York, NY

Socials

  • GitHub
  • LinkedIn

Legal

  • Privacy Policy
DREW CAMPBELL
© 2026 Drew Campbell. All rights reserved•Jack of all trades, master of 'some'
CitigroupCase Study

Enterprise UI Modernization

A modernization effort that transformed legacy AngularJS workflows into a scalable Angular architecture with stronger testing.

Enterprise UI Modernization

Core Stack

Framework

  • Angular 19
  • Router: Angular Router

Language

  • TypeScript

Frontend

  • RxJS, Jasmine, Ag-Grid
  • Reusable Component Library
  • RxJS Observables

Backend

  • Runtime: Spring Boot
  • API: REST + GraphQL

Database

  • Dev: OracleDB

Tooling

  • Linting: ESLint
  • Other: Cypress, GlassBox Analytics

Timeline

Oct 2023 — Apr 2024

Role

Frontend Engineer/Individual Contributor

Links

Overview

Context

Overview

This project focused on replacing brittle AngularJS flows with modular Angular components to improve maintainability, reliability, and velocity for enterprise teams.

Problem

The frontend relied on a tightly coupled AngularJS architecture that limited scalability, slowed development, and increased production risk due to low test coverage. At the same time, the lack of real-time analytics reduced visibility into user behavior and made it difficult to identify performance and UX issues.

  • Insufficient Test Coverage
  • Race-Condition Bugs
  • No User Analytics

Approach

Joined a product team with the task to refactor the current codebase

  • Identified architectural bottlenecks in the AngularJS codebase; tight coupling, low modularity, and poor test coverage. Driving slow development and high regression risk.
  • Evaluated system behavior and design patterns to uncover gaps in scalability and maintainability.
  • Defined a migration path to a modular Angular architecture, prioritizing separation of concerns, testability, and scalability.
  • Aligned solutions with internal constraints and product goals, using research and data to guide decisions and challenge tradeoffs.
  • Incrementally refactored the codebase to reduce coupling and avoid high-risk rewrites.
  • Increased test coverage to improve release confidence and integrated Glassbox analytics to enable real-time visibility into user behavior and performance.

Key Decisions

  • Drove cross-team alignment on the Angular upgrade, ensuring dependent applications adopted compatible versions to prevent fragmentation and integration failures.
  • Implemented a phased deprecation plan for the legacy AngularJS system, reducing risk by enabling incremental migration rather than a full rewrite.
  • Established clear service boundaries and interaction patterns to support a modular frontend architecture and long-term scalability.

Design

A modular Angular frontend platform powering internal trading and deal workflows, supported by shared services, enterprise APIs, automated testing, and real-time user analytics.

Results

Achieved a 26% reduction in UI-related defects by refactoring to a modular Angular architecture, and introducing real-time analytics for faster issue detection.
Increased frontend test coverage by 33%, enabling more reliable releases and significantly lowering the risk of production regressions.

Reflection

  • Navigated a steep learning curve by ramping up quickly on a complex, pre-existing architecture and collaborating across multiple teams within an established enterprise environment.
  • Overcame challenges in securing cross-team buy-in, aligning stakeholders around modernization efforts and shared technical direction.