Design Process

01. DISCOVERY PHASE

RESEARCH

I spent two weeks doing an audit of the entire application and conducting 1-on-1 in person interviews (pre-pandemic) with the primary users of Manage and the energy dashboard, Building Engineers and Facility Managers. The outcome of the research was an inventory of user pain points, motivations, goals, needs, and feature requests for the dashboard.

Finding patterns in the research through affinity mapping

I transcribed all the audio recordings of the interviews and used affinity mapping to distill the research findings so I could find patterns in the research that would generate the design initiatives and drive design decisions.

RESEARCH FINDINGS

People aren’t using the dashboard.

• They don’t understand the savings categories

• They distrust the savings data

• The savings data and chart are hard to interpret

Building engineers want to use the dashboard as a diagnostic tool to help them maintain their building systems but facility managers want to use it to show ROI of the Enlighted system to show they are using the system successfully and are saving the company money.

Building Engineers want to be able to use the dashboard as a diagnostic tool by being able to:

• See trends in their data 

• Knowing what events cause changes in their energy consumption and savings so they have more control over their systems. 

• Need to know what their occupancy level is against their savings and consumptions trends

02. DEFINE PHASE

The Problem

The dashboard is rarely used because the data structure is difficult to interpret and the data itself is not giving users enough relevant and actionable insight to use in their day to day jobs.

Goal

Leverage Enlighted’s smart sensor data to provide more value to users in the Manage (formerly Energy Manager) dashboard by creating easier pathways to the information that’s most important and relevant to users.

Design initiatives for the new dashboard

1. Educate Users - Add easily accessible opportunities for users to educate themselves in the dashboard.

2. Build Trust in the Data - Make our savings calculations transparent.

3. Improve Data Readability - Simplify data visualizations, remove unnecessary information, and make information more straightforward.

4. Support Energy Forensics - Showing occupancy levels and trend data to answer the why, when, and hows of energy spikes (i.e. savings, consumption, loads) in the system. 

03. DESIGN, VALIDATE, ITERATION PHASE

Approach to the redesign

I spent three months working through wireframes and conducting usability testing using mid-fidelity wireframes with a handful of Enlighted users. The project was put on hold at the end of three months and started up again 14 months later with more limited resources and a shorter timeline to implement. I spent six weeks revising the previous designs by balancing user needs against limited resources and a short development timeline defined by product management and engineering.

Round 01 designs

Users want to…

• Track trends in their energy consumption and savings data and know what energy events caused shifts in trends

• Compare what they consumed vs saved and understand why they saved, or didn’t save

• Compare their building occupancy level against the savings and consumption values to make sure the occupancy lighting settings in Manage are setup for maximum savings

• Glance at the dashboard and immediately understand what they saved so they can track their ROI

The goal is to make the energy chart and KPIs easy to read and navigate so users don’t have to work hard to digest the data.

Changes made to legacy dashboard that are reflected in the new dashboard:

1. Reconfigured KPIs and added trend data.

2. Replaced a stacked bar chart with a line chart so it’s easier for users to track trends over time.

3. Decoupled consumption from savings so it’s easier for users to compare what they are saving against what they consumed over time.

4. Added a secondary y-axis to the energy chart to show occupancy level.

5. Added energy events in the energy chart.

Round 02 design update

1. Added more granular savings data in the energy chart

   I want to show users more granular savings data than just total savings so I added a stacked area chart under the total savings line in the energy chart to show the breakout of total savings across the savings categories.

2. Added energy event details

   I added an energy event popover message since the majority of users in the interviews want to see when the energy events occur so they can correlate it to spikes in the chart.

3. Made a first rough pass for a visual design system

4. Refined dashboard navigation

Round 03 design update

1. Iterated on KPIs to make data as relevant, scannable, and clear as possible

   I added a total since retrofit data point because a large segment of the users I interviewed want to be able to see total savings and consumption values since they adopted the Enlighted system to be able to reference.

2. Added a popover widget showing chart values for any time increment to make the data in the chart easily accessible

User Testing - Round 03 Designs

I created a user testing plan and tested round 03 designs with the majority of users I originally interviewed. During the testing sessions I gave users tasks to complete and observed what their difficulty level was with each task and asked why questions to gain as much insight as possible.

User Testing Results for Round 03 Designs

Users have to work too hard to understand what they’re looking at

1- People aren’t using it because the data is hard to interpret.

• During testing sessions there was consistent feedback that there was too much deciphering of data required overall, for both the KPIs and interactive energy chart. Users had difficulty extrapolating the individual energy values (i.e. total savings, consumption) over time in the chart, the chart is too information dense. 

2 - People distrust the savings data.

3 - People have to work too hard to understand what and how they’re saving.

Round 04 design update

Updated the designs based on usability testing results from round 03 designs

1. Separated major data points into individual KPIs to facilitate easier scanning of information.

2. Made savings categories in chart a layer that can be toggled on and off to give users control over how much data they have to digest in a single view.

3. Created second chart showing a description of each savings category to educate users and the total savings in each savings category over the selected time period to give users a clear view of how each savings category performed over the time period.

Pause, long intermission of 14 months due to a shift in company priorities and resources

Luckily, I was able to pick-up the project after 14 months once resources were shifted back to work on Energy Manager. Energy Manager was renamed Manage, all proceeding designs will feature the new ‘Manage’ logo.

…continuing "03. DESIGN, VALIDATE, ITERATION PHASE

Fewer engineering resources and less time were available to implement the re-design so the design had to be scaled back

• I restarted this project by meeting with engineering and product management to figure out what we had time to build and to learn about any new requirements since time and resources were in short supply.

• I had to remove some of the new research validated functionality that I had added to the re-design.

• The energy dashboard would now have to reside inside the frame of the old Manage application and not as an external web app accessible via a link.

• The original plan to redesign the entire Manage application incrementally was also being questioned at this time.

Round 05 design update

Simplified designs based on the new constraints

05. RESULTS & IMPLEMENTATION

final designs & engineering handoff

I completed this project by creating high fidelity redlined wireframes and supporting spec documents for engineering to implement. The result was a responsive energy dashboard web experience (across tablet and desktop) with careful consideration of user needs and pain points balanced against limited engineering resources and a short challenging timeline. A substantial portion of the research informed new functionality and improvements I had added to earlier designs was removed in the final design and bookmarked for a future release. Since this project was implemented during the pandemic and we were all working from home, the engineers and I had many ad hoc video and screen sharing meetings to discuss any questions and concerns that came up during the build.

Original Legacy Design

Final Designs

Stacked area chart showing energy savings categories can be toggled on and off

Information popover message (every info. icon has a popover)

Outcomes

• Successfully redesigned and launched a decade old legacy energy dashboard that makes is easier for users to view and engage with their energy savings and consumption data across their real estate properties.

• A new design system and starting point for possible future redesign and upgrade projects in the Manage application.

• A dashboard that is responsive on smaller screen sizes (tablet).

Retrospective

The dashboard redesign was well received by internal and external stakeholders. I think we missed some important insight at the beginning from not including internal sales executives in the user research. It was unclear to me at the time how heavily this persona relies on the energy dashboard in their sales cycle, this was a blind spot. I would have preferred to do more rounds of rapid iteration and testing but I think we did the best we could given the overall challenging timeline. Thankfully, I grew a lot as a designer during the 14 month time gap thanks to the asset tracking project I was put on during the 14 months project hold. When this project started up again, I was able to hit the ground running with the speed and engineering handoff and implementation experience I needed to deliver and oversee the completion of this project in a short timeline. What we were able to build in a short time was done well thanks to a great team of super hard working talented engineers. Hopefully some of the features that had to be taken out can be implemented in the future.

Go to next case study >>