A unique User Interface for internal HVAC network in Katerra's Advanced Building Systems.

I contributed with UX UI Design, UI Motion, Animation, and Prototyping through the end-to-end project. I programmed usable code components and animations on the target platform so engineers could rapidly assemble UI screens.

Concept & Planning

Innovation opportunity came from Katerra's own component building approach. Internal control over these components allowed for new and more efficient custom designs.

Rapid Prototyping

Early rapid prototyping helped getting a real feel of the interface, its physical size, and the interaction experience. These rough prototypes were used to compare ideas, do user testing, and define the UI navigation patterns.

High Fidelity Prototyping

By simulating an end-product experience these helped share the product vision and polish the user experience without blocking or waiting for development implementation.

Motion Explorations

I created key visuals and motion explorations in multiple dynamic tools like Animate CC, After Effects, Javascript, and QT (target development platform).

Implementation

As the hardware platform became available I prototyped the animations in order to help the design play accordingly with hardware limitations. This ensured a design quality consistency by avoiding design-development translation issues.

UI Design System

In parallel to my prototyping and animation work I helped in the design and componetization of the UI System that was required to assemble the interface.

Component Development

I took my part in development by coding the UI Components in the hardware platform, this lifted the visual design burden off the developer who focused in assembling the interface and program the logic instead.

Outcome

The product successfully began production for internal use at many Katerra construction sites. It was however put on hold due to the global pandemic effect on the construction industry.