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

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

posted in: Designer | 0

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.

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.

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:

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
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

Leave a Reply about how this blog changed your life.

This site uses Akismet to reduce spam. Learn how your comment data is processed.