UI/UX Design: Energy Utility Controls Console, Prototype made in Adobe XD

This is a post about mocking up a controls GUI for an imaginary energy utility (“Regional Utility Co.”) to see how a custom controls interface may look and feel for a SCADA system. The focus of the simulation is: controlling and monitoring feedback of a diesel power-generator installation.

Video of the Controls Prototype Walkthrough

The YouTube video above shows all the features of the prototype, including:

Homepage with scrolling alerts feed
- (it doesn’t scroll because animated GIFs don’t work in XD yet)
Flyout navigation menu
Equipment Sites parent pages
Specific Site (Diesel Generator) child page with:
- Manipulatable controls with feedback, including:
  - Switch Movement,
  - Dashboard state change,
  - Indicator Light state change.
- Warning message with flashing aura to indicate machine-specific location

Adobe XD Prototype Links

ENERGY UTILITY CONTROLS GUI MOCKUP IN ADOBE XD - LINKS MAPPING, ANNOTATED — ENERGY UTILITY CONTROLS GUI MOCKUP IN ADOBE XD – LINKS MAPPING, ANNOTATED

Here’s what the prototype links look like. I could’ve done some of the switch layers more elegantly, but I was throwing this together to see if XD is a viable tool for the design process of making wireframes and prototypes of specialized, GUI-intensive software; not just for web pages and web apps.

Controls Actors Affected by State Changes shown in Bold Type:

ENERGY UTILITY CONTROLS GUI MOCKUP IN ADOBE XD - LINKS MAPPING2, ANNOTATED — ENERGY UTILITY CONTROLS GUI MOCKUP IN ADOBE XD – LINKS MAPPING2, ANNOTATED

To get something like the 3-way selector switch to provide feedback, I used a series of “Overlay” transitions of artboards demonstrating different states of the 3-way switch and start or stop buttons, including the Dashboard feature that would zero-out all readings if the machine were set to OFF or STOP.

Controls UI – 3-way Selector Switch Knob
Controls UI – Cluster – Selector Switch, Buttons, Status Light

Another state is if the machine is set to AUTO (or) MANUAL and the START button is clicked, the green indicator light will glow and the Dashboard will indicate engine activity.

Controls UI – DASHBOARD – Diesel Generator GUI gauges feedback cluster, incl. fuel tanks, oil & engine temp, etc.
Controls-UI-DASHBOARD-OFF-STATE-Diesel-Generator-GUI-gauges-feedback-cluster

ENERGY UTILITY CONTROLS GUI MOCKUP IN ADOBE XD - LINKS MAPPING3, ANNOTATED — ENERGY UTILITY CONTROLS GUI MOCKUP IN ADOBE XD – LINKS MAPPING3, ANNOTATED

Here’s some Artboards from the Mockup:

Energy Utility Diesel Generator Graphical Controls Interface GUI Adobe XD Prototype – CONTROLS HOME
Energy Utility Diesel Generator Graphical Controls Interface GUI Adobe XD Prototype – FLYOUT MENU
Energy Utility Diesel Generator Graphical Controls Interface GUI Adobe XD Prototype – SITES-GENERATORS
Energy Utility Diesel Generator Graphical Controls Interface GUI Adobe XD Prototype – GENERATORS
Energy Utility Diesel Generator Graphical Controls Interface GUI Adobe XD Prototype – CONTROLS-GEN2
Energy Utility Diesel Generator Graphical Controls Interface GUI Adobe XD Prototype – SITES-SOLAR ARRAYS
Energy Utility Diesel Generator Graphical Controls Interface GUI Adobe XD Prototype – SITES-WIND FARMS
Energy Utility Diesel Generator Graphical Controls Interface GUI Adobe XD Prototype – SITES-DAMS

Adobe XD Doesn’t do GIF:

I thought this little info scroller would be a nice touch, so I made a motion graphic and exported it as a looping GIF image, but Adobe doesn’t display animated GIF, sooo… here it is: