UI Refresh & Component Library

The product is a web app that outdoor-design professionals use to plan and quote projects. I owned its UI and UX, and I implemented a refreshed interface across the app.

It already had a shared component library. My job was to modernise the interface and grow that library so new screens stay consistent as the product changes.

The existing UI needed refreshing, and the library had gaps. Several newer patterns weren't covered, so screens kept drifting back into one-off styling.

The app is also genuinely data-heavy. There are large tables with server-side data, filtering, multi-selection, and bulk actions, and those had to stay fast while the refresh happened around them.

I implemented the refreshed UI across the app, building on the existing library rather than replacing it. I added 25+ new components, which took the library to 50+ in total, and kept theming, dark mode, and shared styles consistent along the way.

For the data grids I used AG Grid Enterprise with a server-side row model, and handled state reactively with RxAngular so the UI stayed responsive as data streamed in.

I rolled the refresh out screen by screen against the live product instead of doing one big rewrite, so the app stayed usable the whole time.

Extend the existing library instead of forking it. New screens compose what's already there, and I only added components for patterns that genuinely didn't exist yet.

Drive colour and contrast from tokens so theming and dark mode stay consistent as the library grows.

Keep grid interactions on a server-side model so the app holds up with real datasets.

The app now runs on a refreshed, consistent UI, and the shared library has grown to 50+ components (25+ of them new) for the rest of the team to build on.