annjalina.k

get in touch →

annjalina.k

about

work

approach

contact

get in touch →

annjalina.k

← back to work

case study · 01 of 05

enterprise migration · 2023 · 1 year · gov

enterprise migration · 2024 · 1 year · gov

Driving Digital Modernization Across Legacy Infrastructure

Confidentiality Note: To respect confidentiality, certain visuals have been adjusted. The overall process, design challenges, and results are based on real work.

+40%

User Efficiency

+60%

Development Speed

AA

Accessibility Score

client

gov agency · USCIS

role

UX lead

timeline

1 year

team

12 designers & engineers

tools

figma · storybook · mural · new relic · matomo

figma · storybook · mural ·
new relic · matomo

project overview

Built on a deprecated AngularJS framework and an early-generation design system, the enterprise application struggled with poor accessibility, inconsistent interactions, and outdated UIs that slowed users down. Technical debt kept compounding, security risks were growing, and hiring developers willing to maintain the legacy stack
was getting harder by the quarter.

the challenge

Moving from AngularJS to React while still shipping new features on strict deadlines. When React-ready components weren't available, teams defaulted to legacy code to hit their dates, slowing the migration and stacking more UX and technical debt on top of what we were already trying to retire.

voices from the team

"Each time we touched the legacy code, we uncovered more
accessibility issues and more technical debt. It felt like we were patching problems instead of moving the product forward."

QA Lead

design system makeover

Before and after.

A side-by-side look at how we turned an outdated UI framework into accessible, enjoyable experiences for today's users. Same screens, completely different feel and built on a foundation that finally scales.

fig. 01 · legacy AngularJS vs. refactored React · 2024

fig. 01 · legacy AngularJS vs.
refactored React · 2024

the process · 04 phases

A four-phase migration strategy that ensured uninterrupted product releases.

We modernized the platform from AngularJS to React without stopping delivery by auditing what existed, planning what came next, rolling it out in controlled phases, and validating every step with real users.

Discovery and audit.

01

phase 01

A thorough evaluation of the current system, user feedback, and technical constraints, including a component catalog, pattern inventory, code review, and a full accessibility audit.

what we found

— 90+ accessibility risks across the existing platform.

— 20+ outdated workflows that had outlived their original context.

Design system planning.

02

phase 02

Built a modern, accessible component library without disrupting established user workflows, prioritizing components that unlocked upcoming UI work so development never stalled.

how we built it

— Created a modern, accessible library while preserving familiar workflows to ease adoption.

— Updated accessibility guidelines in parallel, so new components shipped with WCAG expectations already baked in.

— Implemented design variables so the library could adapt without rewiring every component.

Migration strategy.

03

phase 03

A phased rollout that minimized disruption while keeping the user experience consistent, supported by a clear testing strategy and a defined rollback plan before release.

how we rolled it out

— Defined a phased migration roadmap that minimized risk at each stage.

— Built a testing strategy before the first cut, not after, so regressions surfaced early.

— Documented a rollback plan per release so the team could move fast without fear.

Testing and implementation.

Testing and execution.

04

phase 04

A collaborative development process guided by continuous user feedback and accessibility validation, translating Angular patterns into the React framework and tracking real performance at every step.

how we shipped it

— Translated AngularJS components into the React framework with full feature parity.

— Completed user testing on every milestone before the next one began.

— Captured system and user performance data through New Relic and Matomo to prove each release.

outcome and impact

Measurable success across every lane we touched.

The migration delivered faster workflows for users, quicker delivery for developers, and consistent accessibility compliance across all screens.

UX improvements

Task completion rate

+40%

Support requests

−25%

First-time task success

+20%

Error rate

−30%

development

Development speed

+60%

Bug reports

−45%

Deployment time

+35%

Duplicated UI code

−46%

accessibility

WCAG compliance

AA

Color contrast

4.5:1

Keyboard navigation

100%

Screen reader support

100%

key achievements · the scoreboard

Beyond the metrics.

The real win wasn't the numbers, it was the foundation. A scalable design system that could carry consistent user experiences and faster product development into everything that came next.

60+ components and patterns migrated.

Technical debt reduced by 40%.

100% feature parity held through the transition.

Page load speeds improved 3×.

Established a design system for future growth.

Design system now used across 5 products.

key insights · what we learned

Learnings that shaped how I approach UX.

Discovery sets the foundation.

Understanding legacy functionality, technical constraints, and real user flows before touching anything saved months of rework later.

A phased approach actually works.

Clear goals and timelines per phase kept everyone aligned and gave us room to correct course without blowing up the release train.

Collaboration accelerates adoption.

Engaging every stakeholder early, engineers, PMs, QA, and accessibility, was what turned the migration from a mandate into shared momentum.

what's next

Where the system is headed from here.

Expanding the design system.

Extending the component library across five more products to carry the same consistency further into the org.

Extending the component library across
five more products to carry the same consistency further into the org.

Continued usability testing.

Running usability rounds on the new components to refine interaction patterns and close any remaining friction.

← previous case

Back to work

← previous case

next case →

Scaling a Design System with CSS Variables

next case →

annjalina.k

Senior UX/Product designer based in Maryland. Research, systems thinking, measurable outcomes.

connect

portfolio

case studies

approach

colophon

built in framer

fraunces + inter + jetbrains mono

↑ back to top

annjalina.k

Senior UX/Product designer based in Maryland. Research, systems thinking, measurable outcomes.

connect

portfolio

case studies

approach

colophon

built in framer

fraunces + inter + jetbrains mono

annjalina.k

Senior UX/Product designer based in Maryland. Research, systems thinking, measurable outcomes.

portfolio

case studies

about

resume

connect

colophon

built in Framer

set in Fraunces & Inter

↑ back to top

Driving Digital Modernization Across Legacy Infrastructure

Driving Digital Modernization Across Legacy Infrastructure