Original experience
Summary firstUtility customer experience · Production work
Making utility usage easier to understand at a glance.
I helped redesign the usage experience of a mature utility platform, bringing consumption into the first fold and making the surrounding insights respond to the period customers were actually exploring.
Northline Utility
Home energy · Main residence
Fictional example
15-minuteHourlyOctoberYear
Total usage426 kWh
Peak day19.8 kWhOct 17
Daily average13.7 kWh
October 2026
Household electricity
01Context
A mature platform needed more than another visual refresh.
The usage experience had evolved across several product generations. Navigation, styling and functionality had already become more modern, but the page still inherited an earlier information hierarchy: broad summary metrics came first and the consumption view followed later.
A new base-platform initiative created an opportunity to reconsider Usage from first principles—not simply how it looked, but what the interface should treat as primary.
System modernization
Updated shellConcept exploration
Richer contextSelected direction
Analysis first02Problem
The chart was important, but the page did not treat it that way.
Customers came to Usage to understand consumption, yet general summary KPIs occupied the top of the page and could push the visualization below the first fold. Those metrics also remained conceptually separate from the period being explored.
How might we make the consumption view the primary workspace while keeping the surrounding context relevant to what the customer is actually exploring?
Earlier hierarchy
General summaries
Controls
Consumption view
Supporting content
Illustrative first foldSelected hierarchy
Consumption +
period context
Illustrative first foldperiod context
03Evidence
The signal came from several directions.
This was not framed as a single research study. The direction emerged from complementary signals: feedback received through implemented utility experiences, base-product requirements, competitive review, critique within the UX team and technical discussions about what could work across implementations.
Utility feedback
Recurring needs surfaced through business teams working with implemented experiences.
Business requirements
Base-product stakeholders asked for clearer first-fold priority and contextual insight.
Competitive landscape
Comparable utility and energy-software patterns were reviewed.
Platform reality
The direction had to adapt to different data and implementation contexts.
04Reframe
I stopped treating the KPIs and chart as separate sections.
One turning point was questioning why the metrics and visualization were stacked as separate layers when both described the same period. I explored giving the chart dominant width, integrating period KPIs into the analytical workspace and moving supporting information into a contextual field.
This changed the job of the surrounding content: primary analysis stayed together, while alerts, billing progress, comparisons and advanced context supported it without competing for the same attention.
Before
Summary tokens sat above analysis.
After
Same period, one analytical composition.
05Decision 01
The period became the context for the entire analysis.
Selecting a period changed more than the chart’s date range. It changed the analytical question—and therefore the total, peak and average that belonged beside it.
Question / answer / pattern
Which day shaped the month?
Total this month426 kWh
Peak day19.8 kWh · Oct 17
Daily average13.7 kWh / day
Representative reconstruction · fictional data
The interface changed with the customer’s question, not just with the date range.
06Decision 02
Keep the primary workspace simple; reveal complexity when it becomes useful.
Utility analysis can include environmental context, returned energy, demand, rate periods and detailed point information. Instead of presenting every capability as a permanent dashboard block, the selected structure kept the chart readable and exposed advanced detail when it answered a specific question.
Temperature range
Context, not causation.Advanced analysis remained available without turning every capability into a permanent dashboard block.
07Decision 03
One structure had to work across very different utility contexts.
The challenge was not designing one ideal dashboard. The platform needed a shared structure that could absorb different utilities, customer types and data capabilities without becoming a different experience every time.
The model kept the same analytical hierarchy while adapting units, chart treatments, available periods and contextual summaries.
| Context | Typical unit | Available grain | Optional context | Supporting summary | Pattern |
|---|---|---|---|---|---|
| Home electricity | kWh | Interval → annual | Temperature / returned energy | Current cycle | |
| Home water | Volume | Daily → annual | Comparison | Recent period | |
| Solar generation | kWh | Interval → annual | Import / return | Generation balance | |
| Business electricity | kWh + kW | Interval → annual | Demand reference | Peak demand |
08Responsive
Preserve the hierarchy, not the desktop layout.
On wider screens, the chart, period metrics and supporting context work as one horizontal composition. On smaller screens, the chart remains early, metrics become a vertical list, context stacks below and secondary settings move into a compact sheet.
Responsive design was treated as a reprioritization problem rather than a shrink-the-desktop exercise.
09Iteration
The first exploration expanded the experience. The later redesign clarified the hierarchy.
Early concepts explored how gauges, comparisons, efficiency guidance, weather, demand and appliance-level context could make the page more informative. They expanded what the experience could communicate, but the first fold still carried too many competing modules.
The selected direction simplified the primary workspace. Rather than adding another layer, it made the chart central and gave each surrounding element a clearer relationship to the selected period.
Stage 1
Established hierarchy
Summary precedes the task
Stage 2
Expanded exploration
More explanations compete for attention
Stage 3
Clarified hierarchy
Context organizes around analysis
10Collaboration
Design decisions were shaped with the people who would build and implement them.
I led key interaction and information-hierarchy explorations with my design manager, including the period-aware KPI model and chart/context composition. I worked with the broader UX team, business stakeholders, engineering and technical leadership through critique, feasibility review and implementation.
01
Signals through business/product
→02
Design exploration
→03
UX critique
→04
Engineering and technical review
→05
Refinement
→06
Team-approved direction
→07
Base-platform implementation
II led key interaction and hierarchy explorations.
WeWe evaluated and refined the direction.
11Platform constraint
Better insight still had to remain viable as a base-platform capability.
A reusable utility platform cannot assume that every implementation has the same data, account capabilities or customization needs. We evaluated ideas for customer value while also considering data availability, platform reuse and implementation effort.
That encouraged a stable analytical core with optional layers, rather than a single dashboard dependent on every possible service.
Customer valueAvailable dataReusable structureImplementation effortViable
platform insightStable analytical coreOptional contextual layers
platform insightStable analytical coreOptional contextual layers
12Component thinking
The redesign had to survive more than one ideal screen.
The selected direction was defined as a set of related behaviors: period-aware summaries, adaptable data views, contextual detail, settings and optional layers. Designing these as a system made it possible to preserve hierarchy while changing the data and controls available in each implementation.
Accessibility behavior of this reconstruction.
426Total kWh19.8Peak day13.7Daily avg.
Context changes with the active period.
Square-ended marks keep the plot distinct.
Oct 1719.8 kWhIllustrative peak
Detail sits beside, not over, the plot.
Cycle positionDay 19 of 31
Supporting information stays compact.
Data sourceHousehold electricityUnitkWhPeriodOctober
Secondary choices move into a drawer.
Context band
Selection uses label, check and line style.
13Outcome
From concept exploration to an implemented base-platform direction.
The direction was approved and implemented into the base platform, creating a new foundation for Usage across future utility implementations.
Analytical core
Period changes42619.813.7
the questionContext supports
the taskLayout reprioritizes
by viewportCapabilities adapt
by implementation
Approved and implemented in the base platform.
Representative reconstruction; broader utility implementation can occur in phases.
- Chart-first hierarchy
- Period-aware analytical KPIs
- Contextual supporting information
- Responsive recomposition
- Adaptable structural model
14Reflection
The biggest change was not the chart. It was what the interface treated as context.
The project started as a request to bring Usage higher in the page, but the more important shift was making the surrounding information respond to what the customer was actually exploring. A chart, KPI and insight only become useful together when they share the same context.
It also reinforced something I now look for in mature platforms: the strongest redesign is not always the one that adds the most capability. Sometimes it is the one that decides more clearly what deserves to be primary, what should adapt, and what can wait until the user asks for it.