An illustrative customer portal rebuilt around operator tasks, performance budgets, and a real design system.
A portal accumulated over years had inconsistent patterns, slow data-heavy pages, and no shared component language, which made every change expensive.
Each new screen was built from scratch, so the surface grew faster than the team's ability to maintain it.
Establish tokens and a component library before rebuilding screens.
Prototype the three highest-frequency tasks and validate with real operators.
Set performance budgets and enforce them in CI.
Migrate screen by screen behind a routing layer, never in one cutover.
Server-rendered React application with route-level data loading.
Tokenised design system published as an internal package.
API gateway consolidating several legacy backends behind one contract.
Progressive migration routing between old and new surfaces.
Design foundations
Shared library
Assembled, not bespoke
Progressive migration
Budgets in CI
Accessibility requirements defined as acceptance criteria, not a later audit.
Performance measured on representative low-end devices.
Design system documentation delivered alongside the code.
New screens assemble from existing parts.
Patterns transfer between screens.
Budgets enforced rather than hoped for.
