Pulse Energy Dashboard

Ground-up redesign of a powerful real-time energy monitoring and engagement tool for university campuses

Role
Lead Designer
Client
Pulse Energy (Yardi Systems)
OED screen zoom
OED on laptop
OED in campus building lobby

History

Monitoring energy at Olympic venues

The Pulse Occupant Engagement Dashboard (OED) was originally created as one of many sustainability initiatives for the 2010 Winter Olympics in Vancouver.

Vancouver view
The 2010 Winter Olympics in Vancouver offered an opportunity to show energy consumption patterns at different venues throughout the Lower Mainland

The dashboards, located at various Olympic venues, displayed real-time energy use and provided insights into consumption patterns.

Commercial and institutional applications

The dashboards drew the attention of energy managers and, following the Olympics, many dashboards were deployed in commercial buildings throughout North America. They were also popular among educational institutions, and were installed on dozens of university campuses, including McGill and UC Berkeley.

OED old screenshotOED old screenshotOED old screenshotOED old screenshot
The legacy dashboard, although feature-rich, was text-heavy, lacked interactivity, and displayed dated aesthetics.

What needed improvement

Several key areas of the existing dashboard were identified as priorities for the rebuild:

  • Lack of interactivity
  • Use of deprecated technologies (e.g. Flash)
  • Stale aesthetics and text-heavy content
  • Non-responsive/adaptive layouts
  • Lack of customization options
  • Reliance on external support resources to manage dashboards

Definition of success

The redesigned OED aimed to:

  • Refresh and modernize the aesthetic
  • Increase scan-ability and legibility
  • Introduce more interactive features and explorable content
  • Use a modular approach that allowed users to add/remove content
  • Permit dashboard branding using custom colours and typefaces
  • Use adaptive layouts to ensure consistent usability on a wide array of devices
  • Empower educational users to configure real-time energy competitions as part of their course curriculum
  • Facilitate student participation in competitions by no longer requiring that they create accounts
  • Integrate with social media platforms

Discovery

On-site visits to multiple universities allowed a multi-disciplinary team to talk with energy managers, facilities managers, sustainability champions, professors, and student representatives about how the OED could be best used.

These in-person visits were of tremendous value and would be instrumental in informing how we framed our view of the dashboard and its potential uses on multiple fronts.

These workshops, along with feedback gathered from dozens of other customers and users, also laid the foundation for ongoing collaborative relationships that helped us stay on the tracks as we moved forward.

UCB workshop scratch pads
In-person workshops at UC Berkeley provided valuable usage insights

Information architecture

Based on learnings from feedback sessions and on-site workshops with our users, we created a series of Entity Relationship Diagrams (ERDs) to represent the users' mental model of the objects at play.

Recognizing that our underlying data architecture did not always map directly to users' conceptions was critical in building the core objects that undergirded OED's full feature set.

UCB workshop scratch pads
ERDs helped define and visualize our users' mental models

Wireframing

As the new dashboard was essentially a CMS, layouts needed to accommodate virtually infinite layout configurations.

Additionally, as content on kiosk-style displays could not be scrolled, each module needed to grow and shrink to fill available space without expanding beyond the visible viewport.

A word about fidelity

A conscious decision was made to avoid creating refined, pixel-perfect layouts too early in the redesign process.  Using a monochrome colour palette and monospace fonts allowed us to conduct usability sessions that elicited more "focused" feedback.

UCB workshop scratch pads
Early wireframes of a modular, adaptive layout

Results

The redesigned dashboard was deployed on the campuses of several sustainability-focused universities, including UC Berkeley and UC Santa Barbara. Customer and user feedback was overwhelmingly positive.

Energy competitions were incorporated into selected course curricula at each university. Professors were able to create and run energy competitions, and students were able to record their progress and monitor the effects of their sustainability efforts.

What I learned

Talk to as many users as you can

Meeting with users in person and witnessing, first-hand, how your product is used and how it fits into their job, schedule, lifestyle, etc. can often provide critical context.

The more deeply we understand the problems we'll actually trying to solve, the more effectively we can provide effective solutions.

Static style guides usually do more harm than good

A product will never look and work exactly like it does in a static style guide. And if the specifications in the guide do not accurately reflect what's been built, why have a guide at all?

At Pulse Energy, we maintained a synchronous style guide, a sort of bespoke Storybook-like application that got deployed with the core product. Single source of truth meant that: a) changes/additions were reflected across the entire suite, and b) divergence from the style guide was not possible.

No Master_Style_Guide_Final_09b.pdf collecting dust in a shared drive. No copying and pasting of crudely-generated CSS from design tools. Everything evolved together.

Back to top