—DIGITAL ASSET MODEL
UX/UI & App Design — Energy Infrastructure 2022—present
Design for the Digital Asset Model (DAM) — a feature within a large-scale internal platform for monitoring and managing national gas network infrastructure. DAM integrates BIM 3D models of physical infrastructure — compressor stations, pipelines, reduction plants — directly into the platform, giving operators and maintenance engineers a digital twin they can query and navigate in real time.
What it does:
The experience is split into two layers. A 2D homepage provides access to the full asset hierarchy, letting users browse and filter across the network. From there, a 3D scene opens — rendered in the browser via JavaScript — where users navigate with WASD controls, select objects parametrically, and inspect individual components. Each object surfaces two data streams: cold data (static metadata, BIM attributes, SAP records) and hot data (live sensor readings from connected systems). Users can save custom view templates to configure their workspace for recurring tasks.
Design focus:
Translating industrial-grade data into a navigable interface without losing precision. Structuring the asset hierarchy for both spatial (3D scene) and logical (tree view) navigation. Designing metadata panels that adapt to different object types and data depths. Defining consistent patterns across a large, multi-team codebase that spans functional, frontend, backend, and design workstreams — and has been in active development for over two years.
The challenge:
Before any design work could stabilise, three parallel POCs ran simultaneously — Unity, Unreal, and JavaScript — each with different rendering capabilities, performance profiles, and integration constraints. Design had to remain technically portable while still advancing UX decisions that would carry forward regardless of the final stack. JavaScript/React was ultimately chosen for its compatibility with the existing ACR frontend, lower infrastructure costs, and mobile viability. The tradeoff was rendering quality — a constraint that shaped every visual decision that followed.
