A new benchmark GUI for intelligent environmental control
Elsner approached us with a brief that touched every layer of a modern smart home product for consumers. The GUI design unfolded inside an enterprise structure with a UX and UI design team supported by a five person steering committee. The user interface would serve consumers in 54 countries, and dealers from ten countries were woven into the design and validation process.
Delivery took nine months with an embedded design team working shoulder to shoulder with engineers to align the interface with bespoke hardware, existing control logic, and a network of connected components. Because this was a heating and cooling controller, the work began with a detailed map of the system’s physical environment.
The device received inputs from weather stations, CO2 sensors, humidity sensors, temperature probes, and the main heating unit. Sensor accuracy, actuator reliability, and network stability shaped every early decision. The interface had to run on current APIs while anticipating future ones, creating a foundation that could evolve with new firmware and product variants.
OUR CONTRIBUTIONS
Requirements Mapping
User Research
Benchmarking
UX Design
Prototyping and User Testing
UI Design - Light and Dark
Organisation-wide Design System
Quality Assurance
STRUCTURED COLLABORATION ACROSS DISCIPLINES
The project advanced through interconnected layers that strengthened one another. User research and competitive benchmarking provided the initial understanding of needs, constraints, and industry patterns. Sessions with dealers from ten countries added lived experience and highlighted behavioural differences across markets. The dealers also gave input into local pressure from competition and emerging trends.
Early engineering sessions revealed practical truths about firmware behaviour, including the timing of temperature updates and the conditions under which the heating unit applied new values. Armed with this knowledge, we entered the divergent phase of the double diamond, where wireframes and concept routes were opened up, tested, compared, and analysed for strengths and weaknesses.
Prototypes were exercised with engineers who exposed hidden behaviours in lag conditions, calibration drift, and control synchronisation. All emerging directions were brought to the steering committee, who helped refine the long term vision and maintain coherence between the technical, strategic, and experiential layers.
DESIGN SHAPED BY REAL CONSTRAINTS
The hardware behind this controller influenced the entire project. It was a bespoke device with unusual behaviour, limited memory, and modest processing power, yet it carried a surprisingly versatile set of functions for a four inch round TFT LCD panel at four hundred eighty by four hundred eighty pixels. Very early discussions with the engineering team revealed critical constraints related to available voltage, the graphics interface, and the processor’s performance envelope. The client needed us to mind technical specs from display suppliers regarding the voltage required for the panel and its backlight, along with the thinking around the graphics interface, colour depth, and sample availability.
When the redesign began, the final screen had still not been selected, so our only reference consisted of the previous unit and a sizable body of field feedback concerning scroll lag, load delays, and inconsistent rendering under sensor activity. Engineers outlined memory budgets, the timing of data refresh cycles, and the behaviours of the heating system during calibration. To minimise risk, we made a strategic choice and designed the experience at a smaller resolution of three hundred twenty by two hundred forty pixels and later scaled it once the final panel was confirmed. Every visual and behavioural choice respected the physical and electrical limits of the device, and every constraint became a prompt for invention. Throughout the process we linked each technical decision to human factors to preserve clarity and comfort inside a narrow operating envelope.
Findings from Human Factors Research
In practice
INTERFACE TUNED TO REAL CONTEXTS
The controller needed to function reliably across many contexts, so physical and environmental factors shaped the interface design. The installation height of one hundred forty centimetres placed the screen at natural eye level. This defined touch target sizes and constrained vertical scanning patterns. Most interactions would occur in daylight, while evening use required an automatic dark mode triggered at sunset. Common flows included lighting control, scene activation, and blind adjustment, while installation logic was configured separately by system engineers on desktop software.
The interface also had to handle non ideal conditions with clarity. When sensors produced delayed readings, contradictory values, or calibration faults, the interface communicated these states calmly and without ambiguity. Alerts from the main heating unit were treated as primary signals, while minor notifications such as open windows remained visually secondary. This dual system preserved both transparency and cognitive balance.
Get a sense of the GUI
UI COMPONENT EXAMPLE: TEMPERATURE CONTROL
The temperature control offers a concentrated view of the balance between design thinking and engineering reality. The vertical scale was inspired by a classic thermometer, with the current temperature placed at the midpoint. This structure matched behavioural findings, which show that users rarely adjusted more than four degrees in either direction.
Engineering partners helped us understand how temperature updates arrive from the heating unit and how to visualise delayed readings without introducing confusion. Pressing the plus or minus button produces a clean colour cue, red for warmer and blue for cooler. Each increment moves in half degree steps because the firmware applies new values through discrete internal commands.
The desired temperature appears as a dotted line and remained pinned at the limits when scrolling beyond the midpoint range. Animations are tuned to avoid stutter on the limited processor. All decisions were reviewed with the steering committee to ensure long term stability and clarity.
Interaction concept of the temperature UI component
Division: 100 slices = 0.5°T/per slice
Removed: 20 slices → 80 slices remaining
Arc per circle: 360°/100 = 3.6°
Conclusion: 0.5°T = 3.6°arc , 1.0°T = 7.2°arc
UX/UI DESIGN EXAMPLE: CIRCULAR CONTROL
The circular temperature gauge introduces a different form of precision. The circle is divided into one hundred slices, each representing half a degree. Removing the bottom twenty slices created a visual boundary and left eighty active segments. Each slice corresponds to three point six degrees on the arc, which means one full degree of temperature equals seven point two degrees of rotation. This level of mathematical rigour was necessary because the device had strict limits on rendering.
Animation timing was aligned with firmware update intervals so that visual changes never drift out of sync with real thermal values. The gauge displays the current temperature neutrally, with adjustments marked in red or blue. Once the user changes the temperature, the field beneath updates to show the new value and the direction of travel. In parallel, we restructured navigation into a modular system with an overlay menu and configurable shortcuts.
One difficult negotiation centred on blind controls. Engineers insisted on keeping all blind functions on a single screen for technical reasons, while user research showed the risk of clutter. After several iterations with the steering committee, we reached a configuration that preserved usability while respecting engineering constraints.
Behaviour of radial temperature UI component
PRECISION IN EVERY DESIGN DETAIL
The finest work lives in the smallest details. Touch targets were calibrated to the millimetre so the interface would feel natural at standing height. Reading distance and panel luminance shaped spacing and typography. Every colour value was tested directly on the hardware to ensure that no element washed out in daylight. Prototype testing revealed the exact lag curve during sensor updates and helped refine micro animations to guide the eye without overwhelming the processor.
Beneath the visible precision sat an entire layer of structural refinement. Reorganising menus and rebuilding the information hierarchy proved essential for both clarity and speed. Navigation patterns were kept consistent across the entire interface and were updated throughout the project as insights accumulated. States were clarified and aligned, and the colours for light and dark modes were treated as paired systems to keep the user’s cognitive map stable at all times. The result is a device that feels simple only because every hidden detail has been resolved with discipline and care.
We also delivered a complete design system containing organisation wide design tokens, a comprehensive component library, and clear governance models that support long term consistency.
Design system with organisation wide design tokens
A NEW STANDARD FOR SMART HOME UX
This project brought together every demanding aspect of embedded GUI design. It operated inside strict technical boundaries, a multi layer governance structure, and an ecosystem of interconnected sensors and actuators. Instead of being limited by constraints, the team used them as the scaffolding for invention. Designers, engineers, dealers, researchers, and a steering committee shaped the product across nine months of collaboration. Methodology supplied continuity, from early user research to concept exploration to technical prototyping aligned with real firmware behaviour. Validation on prototype hardware ensured the interface behaved correctly even under delayed sensor readings, contradictory values, and recovery states.
The modular architecture now supports future firmware evolution and new product variants. During the project, navigation was refined through several rounds of iteration until it allowed both fast access to frequent actions and a complete menu structure where all functionality could be found. This balance gives the product long term stability and adaptability.
Navigation reflects real usage patterns. Temperature components translate technical realities into confident interactions. Alerts communicate operational truth without panic. Every layer is coherent, from the physical constraints of the device to the cognitive comfort of the user.
The result is an embedded interface that stands as a reference point for technically demanding GUI design, bringing together precision, realism, and a structure that can grow over time.