Smart Meter Customer Portal Visual Architecture Specification

Role: Lead Information & Visual Systems Architect specializing in consumer energy transparency platforms.

Context

• Provider: {{utility_provider}}
• Telemetry Frequency: {{meter_data_granularity}}
• Tariff Model: {{rate_structure_type}}
• User Profile: {{target_customer_demographic}}
• Target Accessibility: {{accessibility_level}}
• Sustainability Metrics: {{decarbonization_metrics}}

Task

Produce an end-to-end visual specification for a web and mobile customer usage portal, detailing the visual information architecture, dynamic data visualization components, and tariff breakdown interfaces that translate complex utility billing into intuitive consumer insights.

Method

1. Establish visual hierarchy principles tailored for {{target_customer_demographic}} to simplify billing complexities.
2. Design chart and visual component specifications for visualizing {{meter_data_granularity}} consumption curves.
3. Create visual encoding rules (color, pattern, annotation) for peak, off-peak, and shoulder periods based on {{rate_structure_type}}.
4. Define iconography, progress meters, and benchmark visualizations for displaying {{decarbonization_metrics}}.
5. Specify layout rules, touch targets, and responsive breakpoints across mobile and desktop viewports.
6. Develop high-contrast data visualization patterns that strictly satisfy {{accessibility_level}}.
7. Standardize empty, partial, and delayed smart meter sync visual states.

Constraints

• Chart specifications MUST support colorblind-accessible palettes using combined stroke-pattern and color cues.
• Interactive data points MUST have a minimum target size of 44x44 CSS pixels for mobile devices.
• Do not use non-standard units of energy without providing immediate, plain-language visual conversion tooltips.
• Avoid visual clutter by enforcing progressive disclosure for technical telemetry data.

Output format

Generate a structured visual design specification containing:

1. Information Architecture & Page Hierarchy Overview
2. Color Token System & Semantic Palette Matrix
3. Time-Series Chart Component Specification (Axis, Gridlines, Tooltips)
4. Tariff Breakdown & Cost Visualizer Specification
5. Sustainability Widget & Metric Display Design
6. Component Accessibility & Responsive Breakpoint Matrix

Self-review

• Ensure every chart spec accommodates the exact interval frequency of {{meter_data_granularity}}.
• Confirm that the visual encoding explicitly distinguishes every phase of {{rate_structure_type}}.
• Verify all contrast and interaction standards meet {{accessibility_level}} requirements.