Multi-tenant energy dashboards

Facility and operations teams tracked energy across many sites through spreadsheets and separate vendor portals. Spotting a consumption spike, comparing sites or preparing a sustainability report meant stitching data together by hand.

Design one dashboard system that serves every level of a multi-tenant hierarchy — from a region lead scanning trends to a store team chasing an anomaly — without building a different product for each.

UX research and dashboard design: interviews with facility managers about daily monitoring routines, the KPI hierarchy, scoping by tenant, region and site, a reusable chart system, threshold-based alerts, reporting with configurable ranges and exports, and build-ready specs for large monitors and tablets.

1. 01

   Decision

   KPIs first, drill-down second.

   Why it mattered

   At-a-glance cards for consumption, cost and carbon each open into the trend behind them — so the first screen answers “is anything wrong?”

2. 02

   Decision

   One hierarchy, every tenant.

   Why it mattered

   A scoped breadcrumb — organisation to region to store — gives each role its own slice with the same components and the same mental model.

3. 03

   Decision

   A chart system, not chart pages.

   Why it mattered

   Shared rules for trends, source breakdowns and site comparisons kept dense data readable and consistent across modules.

• Data density

  ⇄

  At-a-glance clarity

  Trade-off

  Summary first with progressive drill-down; detail tables kept one level below the KPIs.

• Tenant configuration

  ⇄

  One product

  Trade-off

  Configurable scope, thresholds and alerts on a shared component set — tenants differ in data, not in interface.

1. KPIs
2. Charts
3. Alerts

I interviewed facility managers, defined alert thresholds and anomaly indicators with stakeholders, and gave Engineering build-ready specs covering edge cases and states across monitor and tablet layouts.

Multi-tenant dashboards multiply states — scopes, thresholds, missing data. AI helped me explore and check more of them, faster; the judgement stayed mine.

• ChatGPT

  Used for

  Synthesised facility-manager interview notes into monitoring routines and pain points; structured colour, type and spacing scales into JSON and CSS variables.

  What it got us

  A shared picture of users sooner; consistent tokens across every widget.

• Figma AI

  Used for

  First Draft for dashboard structures and widget layouts; realistic sample readings to test charts at real data ranges.

  What it got us

  More dashboard structures compared before committing.

• Figma Make

  Used for

  Clickable drill-down from KPI to trend to site, simulating alerts and missing edge cases.

  What it got us

  Drill-down behaviour validated before build.

• Claude

  Used for

  Reviewed chart and table markup against WCAG 2.1 AA and drafted component usage guidelines.

  What it got us

  Accessibility caught earlier; a cleaner, documented handoff.

Stays human — what each role needs to see first, threshold logic with stakeholders, and every design decision.

In a dashboard, hierarchy is the feature. Deciding what a region lead never needs to see mattered as much as any chart.