Energy Manager Utility Data Management App

emu-collage
Creative Fields // Data visualization, Web app design, user research, prototyping, Email design
Client // EnerNOC, White branded for utility clients


Project details

Energy Manager turns data into interactive visualizations so businesses can find anomalies and problematic usage patterns that cost them money. Energy Manager was designed for tablet and desktop use.

 

I was the design lead for this energy management application from the initial phases of user research, requirements gathering to data visualization and interaction design. Using best practices and workflows of energy managers in the field, Energy Manager was created to accommodate quick prioritization, exploration and deeper analysis.

 

Developing empathy and learning from domain experts

Throughout the project I worked closely with the product manager to interview a panel of energy advisors as well as internal experts. We would meet for informal interviews both in-person and remotely to gain insights, domain knowledge and to do qualitative user testing for new features. We would distill our findings to identify common pain points and frustrations to create user stories and prioritize features.

Workflows and product features were influenced by the goals, frustrations and pain-points captured in user personas. Blurred for confidentiality.

user personas influenced workflows of energy manager

Open to iteration

Working closely with my development team I produced wireframes at differing levels of fidelity to communicate interaction behaviour as well as visual design. I strove to communicate with my team the detailed specs and overall user goal of a feature so everyone involved in building the product shared the same definition of success. Many features required rounds of definition and collaboration to ensure back-end development and intended feature behaviour was balanced.

Wireframes used to communicate intended behaviour of data visualizations and space hierarchy navigation with development team.


wireframes from Balsamiq to high fidelity

Clickable prototypes used for testing and for communication to development team.

prototypes created in Invision and JustinMind

Interaction and visual design

New data visualizations, colour logic and custom icon fonts were created. Keeping the visuals consistent within the product family was important as components were often reused. Depending on the program, customers may have access to multiple products at the same time. Ensuring visual and interaction consistency helped lower the learning curve across applications. The information architecture and navigation of the application was greatly improved, which helped lower task time.  Flexibility in data exploration was a key improvement with new configurable controls that provided immediate feedback.

Linked views follow energy management workflows of viewing coarse data and drilling down to details.

Visualizations follow energy managers workflows of working from coarse overview data to linked details.

Different visualization methods of combining and dividing demand data

animation showing different visualization methods of combining and dividing demand data

To help with communication and presentation to clients I created a UI guidelines document outlining the various visual components and behaviour logic of the application. The customer success team found this document helpful as a starting point for managing white-branding expectations. It was also a useful reference tool for those less familiar with the application.

A few pages from the UI Branding Guidelines document used by the customer success team.

ui guidelines documentation

Seeing the whole picture

There were also other touchpoints I worked on to improve the overall user experience. I used customer journey mapping to identify gaps in the service for email, developed better onboarding materials for both the business utility side and the end to end program lifecycle of the user, this included the landing page, registration process and various emails for different product lifecycle stages.

Customer engagement journey map through a typical program. Blurred for confidentiality.

customer engagement journey map through a typical program

Product engagement email design and illustrations for educational and alert notifications.

Product engagement emails

 

The list below is a description of the product that was shipped for MVP. I worked in an agile development environment to build and iterate the features below. All features were designed to provide flexible tools that get out of the way of the energy analyst and allow them to make better business decisions.

Features:
  • Data visualization for different energy investigations
  • Time analysis modes to spot patterns
  • Configurable homepage widget cards
  • Data configuration options for exploration
  • Contextual help menu design
  • Portfolio and access control based on business organizational structure
  • Tags for data segmentation
  • User management for your team
  • Alerts based on analytics
  • Bookmarks for saving explorations
  • Notes for record keeping and sharing
  • Data exports in visual and data forms
  • Email engagement design and content planning
Jocelyn Ng UX Designer