Object and asset mapping
Utility design, UX/UI
Object mapping is essentially the process of associating or tagging the ports of physical devices with the underlying automation and control networks, no matter the physical layout of the site. This configuration map allows the system to monitor and control devices, to track and schedule energy consumption, to keep environments comfortable during occupied periods, and more.
This tagging process can be labor-intensive, especially at larger sites where there may be many hardware devices with many control points, and with complex scheduling needs across several buildings. This is why my team built our object mapping tool, including its AI-assisted auto-tagging feature.
ℹ️ FogHorn Systems was a leading developer of industrial and commercial applications optimized for industrial edge environments with limited or no network connectivity. FogHorn was acquired by Johnson Controls in January 2022.
Early wireframe concepts
To figure out how to present a complex task like this to the user—what its interaction model should be—I like to start with loose sketches. Thinking procedurally and iterating over versions allows me to work through core questions with my team: how should the steps be sequenced, how should we present the information in an extensible way, and what controls should be surfaced where?
A little bit of this progression is shown above. The earlier sketch focused on the basic relationship of assets to objects, and what properties might be listed for each. The latter sketch reflects an evolution after many conversations my team had about how the user would actually go about the tagging of the assets and objects, from bulk selection of entities to the setting of their properties.
Early concepts: UI for site hierarchy and selection
The user would be establishing the layout of their site—its floorplan—in our tool, so in the meantime I was exploring concepts for hierarchical workflows. Once defined, the user would need to be able to select any of those areas for tagging, and the approach would have to scale well for sites with potentially hundreds of hierarchical nodes.
Site setup properties editor
Once we’d established our design approach to the site setup, we provided the user with the means to tell us the “where” and the “what” of their site, by entering the properties of their floorplan, and uploading a list of the assets installed there. Our system had to be able to accommodate sites of all sizes and complexities.
Mapping assets and objects
I designed every dynamic and state to work in a tactile, intuitive way, working side-by-side with engineers to keep everything on course. And as we invented new approaches, we built out our component library so that others could benefit from our work in the future. Because even though VEL Studio was purpose-built as a Solution creation tool, conceptually its visual approach to configuration design might apply to a myriad of use cases.
And as word spread about our tool within the company, we were gratified when other teams began to look for ways they could use aspects of VEL Studio for their own unrelated projects.
Early concepts: UI for site hierarchy and selection