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

Kris Bunda

6 years ago

GENERATORS GUI Screen from imaginary utility company's diesel generator controls and feedback UI Design prototype, made in Adobe XD by Kris Bunda

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

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

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

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:

Energy Utility Diesel Generator Graphical Controls Interface GUI Adobe XD Prototype – ALERTS SCROLL GIF

Check out the Prototype Online (click for yourself)

See the online prototype here unless I replace it:

https://xd.adobe.com/view/4a0a1c5e-bf0e-4d1e-6178-b1d100142687-3c3b/?fullscreen