Incremental UI Enhancements

Introduction

Upon joining EnergyIQ, I immediately took on the challenge of refining the UI for the existing IQinsights application. IQinsights was built to serve as a modern, user-centric successor to the aging monolithic Trusted Data Manager (TDM). With our update to a modern tech stack including Angular and Elasticsearch, we needed a UI that would complement our technical decisions. The pivotal decisions made during this project set the precedent for future applications and the direction of the EnergyIQ product suite at large.

Challenges

While still a rather new and fresh application, IQinsights was already out in the wild and launched before my involvement at EnergyIQ. Several design decisions and structural foundations were already in place:

Material Design as the guiding framework.
FontAwesome serving as the icon library.
Kendo UI component library for interface elements.
An established app structure and layout.

The tech stack changes provided speed and functionality benefits, but it was clear the UI was not up to par.

Solution & Approach

Instead of making big changes, I took a step-by-step approach to improve the UI. I decided to honor the previous design choices, tools, and frameworks chosen. My goal was to make things better overall rather than starting from scratch. A number of factors can be attributed to this decision:

Time constraints due to priorities of delivering new features and functionality
The fundamentals of Material Design, KendoUI, and FontAwesome were solid and aided rapid development
IQinsights was already released and in the hands of customers, and incremental revisions would soften the impact of change

Initial IQinsights UI clean up. Original on the left.

Efforts were made to:

Optimize space utilization and remove unnecessary whitespace
Group and condense similar elements
Boost contrast for enhanced visibility
Clean up tabs, including abbreviating data counts
Preserve original app "feel" and aesthetics
Restructure CSS and implement SASS in the project
Create a base style-library that could be reused across apps

Rethinking the Launch Page

The initial launch page design, intended to mirror the simplicity of a "Google-esque" interface, came across as redundant and unnecessary, with most users bypassing it altogether. Users would simply click 'Search' with an empty query to enter the app. While search is an import piece of our data application, it was not a practical entry point.

Original "google" style launch page with single search component

Addressing this, there were two apparent solutions: add purpose and value to the page, or bypass it altogether.

Choosing the former, I brainstormed ideas with the team to maximize its utility. We settled on adding functional widgets that could potentially be customized or personalized in the future.

Launch Page Enhancements

Quick access to user saved filters and lists.
Links to configured data "subjects".
Admin alerts and messages for important notifications, like maintenance outages or corporate news
Snapshot of system health and API statuses.

Incorporating Quorum Design Standards

Post-acquisition by Quorum Software, we were tasked with matching the brand of other Quorum apps while retaining EnergyIQ's distinct identity. Embracing a new "Quorum blue" theme, this enabled us to further refine our UI.

"Quorum blue" with additional refinements

Results

The slower, incremental approach proved instrumental in progressively refining the UI. By avoiding drastic overhauls, user acceptance remained high. Design changes were well received as opposed to the negativity that can be common with large-scale change. The decisions and code pioneered here became instrumental for future projects, laying down a template for design and functionality. These UI enhancements greatly improved client presentations and demos, driving sales and culminating in the acquisition by Quorum Software.