Problem

The company's flagship administrator dashboard needed to present live drone telemetry — emission heatmaps, flight paths, tile imagery, and per-point sensor readings — as a single, navigable operational picture, without the ad-hoc component patterns that had accumulated across the existing UI making every new feature slower to ship than the last.

Constraints

• No dedicated UI architecture owner previously — patterns had to be introduced without a rewrite, alongside a small team that included junior and offshore developers who needed clear conventions to follow.
• Multiple client brands required distinct visual themes on the same codebase, so styling could not be hardcoded per component.
• Geospatial rendering (ArcGIS Maps SDK 3D) and analytics charting (Plotly) both had to run smoothly alongside the rest of the dashboard without degrading it.
• Role-based access (CASL) and i18n localisation were both hard requirements, not later add-ons, given the dashboard was used by different customer organisations and locales.

Architecture Decision Record

Reusable React + Redux module boundary with theme tokens over hardcoded styles

Standardised on a set of reusable React + Redux modules with clear ownership boundaries, and pushed all visual variation into Material UI + SASS variables rather than per-component overrides. This let a new client theme become a token swap instead of a code change, and let the geospatial (ArcGIS) and analytics (Plotly) panels plug into the same state layer as the rest of the dashboard.

Continuing with the existing pattern of one-off components per feature was rejected — it was the status quo causing the slow delivery problem in the first place. A full framework migration was also considered and rejected as too risky given the dashboard was already in production for paying customers; the module-boundary approach delivered most of the benefit without a rewrite.

Outcome

• New feature delivery time on the dashboard dropped by roughly 30% after the reusable module pattern was adopted.
• Multi-theme support via Material UI + SASS variables enabled instant brand customisation for new clients instead of bespoke per-client styling work.
• Established code review guidelines that, combined with mentoring junior and offshore developers, improved UI stability and quality metrics by roughly 50%.
• Shipped 3D geospatial visualisation (ArcGIS Maps SDK) for drone telemetry — emission heatmaps, flight paths, tile imagery, and dynamic Plotly analytics — as a supported, ongoing part of the product rather than a one-off prototype.