The LED controller board had four separate functionalities that a user could be using the board to evaluate: a buck controller, a boost controller, a linear LED controller and a Pulse LED controller. 

The challenge was to give users detailed feedback and control of four different parts on the same evaluation board in a way that would be intuitive, and powerful. 

The UI layout matched the layout of the board, so it was easy for users to get oriented. The color of the LEDs on the board were mimicked in the UI to give additional visual reinforcement.

Careful consideration of the information hierarchy, and hiding controls when they were disabled also helped users focus on the controls they needed when they were needed. 

Davidralley.com

Early low-fidelity wireframes drawn during discussions with stakeholders about the needed controls and preferred layout

The final interface, showing how telemetry, icon and control details were worked out.

An mid-fidelity wireframe showing the arrangement of controls, and information hierarchy.

​LED Controller

As controls for groups of hardware parts were disabled, a scrim animated across the controls, showing them to also be disabled.