Skip to main content
UI Coach Logo
Advanced

Explain a Home Energy Spike

Design an energy dashboard that helps a household investigate an unusual usage increase without pretending to identify an appliance with certainty.

Responsive web, Mobile2 to 4 hours

The brief

Understand the problem

Background

Energy totals are hard to act on without weather, tariff, occupancy, and data-quality context. Device-level estimates can be useful, but they are often inferred and should not be presented as measured fact.

User context

Anika notices that her weekly electricity cost is 38 percent higher than usual. A heat wave, a new portable air conditioner, and two missing smart-meter intervals may all affect the comparison.

Product problem

A resident needs to understand what is known, compare relevant periods, and choose a practical next check without being pushed toward an unsupported diagnosis.

Objective

Create an overview, spike investigation, comparison, and action-plan flow for one household energy anomaly.

What to design

Define the experience

Required experience

  • Recognize an unusual cost or usage period and its data completeness
  • Compare the period with weather-adjusted and user-selected baselines
  • Review measured events separately from estimated appliance categories
  • Save an observation or alert for a specific follow-up

Screens and states

  • Energy overview
  • Spike investigation
  • Period comparison
  • Follow-up plan

Core user flow

Follow the critical path

  1. 01

    Anika opens the weekly overview and sees the cost increase plus a missing-data notice

  2. 02

    She compares usage with a similar-temperature week rather than the previous calendar week

  3. 03

    The investigation shows sustained afternoon load and labels appliance categories as estimates

  4. 04

    She records the date the portable air conditioner was added

  5. 05

    She sets a high-usage alert and a reminder to compare again after seven days

Product rules

Requirements and constraints

Requirements

  • Separate energy use, estimated cost, tariff effects, and data completeness
  • Let people compare calendar, weather-adjusted, and custom periods
  • Label measured device data, household annotations, and inferred categories distinctly
  • Provide accessible chart summaries and a tabular alternative
  • Turn observations into a specific alert or follow-up rather than generic efficiency advice

Constraints

  • Smart-meter readings can arrive late or be revised
  • Tariffs may vary by time, tier, and billing period
  • The service cannot confirm that a particular appliance caused the spike without direct measurement

Reality check

States worth considering

Several meter intervals are missing
A solar system exports energy during the comparison
The household moves between tariff plans
A resident annotation conflicts with device telemetry

Ready-to-use content

Mock data

Use this content to test hierarchy and realistic data states. You can expand it when the concept needs more depth.

Current week

  • 94.6 kWh measured
  • $31.80 estimated cost
  • 38% above baseline
  • 96% interval coverage

Context

  • Average high: 34 C
  • Portable AC added Tuesday
  • Peak tariff: 4:00 PM to 9:00 PM

Finish line

What to deliver

  • Four responsive screens explaining an energy spike, incomplete data, and a concrete follow-up

Optional direction

Visual resources

Use these as a starting constraint if you want one. They are not part of the required solution.

Font pairing
Roboto SlabOpen Sans

Roboto Slab & Open Sans

Clear interface writing gives people the confidence to understand what changed and decide what to do next.

Icons
Illustrations

Keep practicing

Advanced
Analytics

Cloud Cost Anomaly Investigation

Design an investigation workspace that connects an unexpected cloud spend increase with services, owners, and reversible actions.

Desktop web4 hours plus
Data VisualizationDashboard Design
Advanced
Analytics

Explain a Marketing Performance Change

Design an analytics investigation flow that helps a marketer move from an unusual metric change to a defensible explanation.

Desktop web4 hours plus
Data VisualizationDashboard Design
Advanced
Healthcare

Plain-Language Lab Result Review

Design a patient result view that explains one lab panel without turning reference ranges into a diagnosis.

Responsive web2 to 4 hours
Content DesignData Visualization
Advanced
Public services

Accessible Public Service Application

Design a plain-language rental assistance application that supports eligibility checks, documents, save-and-return, and human help.

Responsive web4 hours plus
AccessibilityForms
Advanced
Education

Adaptive Learning Progress Review

Design a progress review that explains why a learning path changed and lets a student and teacher adjust the next goal.

Responsive web2 to 4 hours
Data VisualizationContent Design
Advanced
Messaging

Bilingual Live Conversation

Design a real-time text chat that translates messages while preserving access to the original wording.

Mobile2 to 4 hours
Interaction DesignContent Design