Designing user experiences is an iterative process of understanding the User Problem: who the user is, what “job” they’re trying to do, and how to design an experience that helps them do their job.
In the case of the Lightcloud Blue mobile app, a major category of user is the “installer:” a worker, often an electrician, whose job is physically setting up and commissioning a Lightcloud network.
Electricians can come with vastly different specializations and experience levels, and there’s no guarantee that they will have ever encountered something called “Daylight Harvesting.” This is a system that saves energy by ensuring the artificial light isn’t used when it doesn’t need to be, i.e., when it’s daylight out.
So when InventBuild was tasked with rethinking how to help installers figure out how to select values for the Daylight Harvesting system, I took several steps back to imagine my ideal experience.
In one particular variant, Closed-Loop Daylighting, the installer must select a “Target Light Level” that the system attempts to always maintain by a combination of artificial and natural light. But selecting an absolute lighting value without being a lighting designer is essentially guessing, and that’s if you understand what the value is in the first place.
As such, the first thing I envisioned was an interactive diagram that visually communicates the idea that as daylight changes, the artificial lighting will change to ‘make up’ the remainder of the target level.
The initial part of the design process took place in Figma: iterating through multiple generations of selector directions, beginning with including a frame of reference for the installer: the current sensor value.
I then manually created window, light fixture and sunlight vector assets (also in Figma), and began experimenting with ways of communicating the sensed daylight value and output light levels.
Placing the “input” and “output” bars next to the slider felt right to me, so I then moved into Cursor, using React, TypeScript and Vite to rapidly build and perfect an interactive prototype:
Try it for yourself! You’ll immediately notice that it’s a live simulation that allows the user to adjust both the ‘input’ daylight level as well as the target light level, and the prototype changes using exactly the same underlying algorithm as the actual Daylighting system.
The resulting user experience ‘teaches’ you everything you need to know to use the system by interacting with it. When you drag the target slider to the right, you instantly discover that the system reacts: the artificial lights grow brighter. Conversely, when the Daylight level goes up, the lights dim.
This kind of UI is worth far more than a textual explanation—not only does it give the user an intuition of how the system works, in doing so, it actually allows them to accomplish the job they were trying to do in the first place.