UX/UI DESIGN · NEXTERA ENERGY · FLORIDA POWER & LIGHT

Energy Usage Dashboard

Designed the end-to-end UX/UI for NextEra Energy usage dashboards, translating complex utility analytics into intuitive mobile and desktop experiences. Led discovery through sitemaps, journey maps, and wireframes, partnering with Agile engineering teams to deliver responsive, high-fidelity analytics platforms.

ROLE
Senior UX/UI Designer

CLIENT
Nextera Energy · Florida Power & Light

TOOLS
Figma · Adobe Creative Suite · Visual Studio Code

Project Summary

The NextEra Energy Usage Dashboard directly tackles the frustration of opaque energy bills and the inability to pinpoint high-consumption periods. By offering granular, real-time energy usage data visualized through customizable charts and interactive dashboards, users can easily identify trends and anomalies. The intuitive, dashboard interface allows for personalized views, enabling users to focus on the metrics most relevant to them. Through rigorous user testing and iterative design, including A/B testing of visualization styles and user feedback sessions on navigation, the dashboard achieves a balance of visual clarity and functional depth. This empowers users to proactively manage their energy consumption, leading to potential cost savings and a greater understanding of their energy footprint. This solution positions NextEra as a leader in customer-centric energy management tools, demonstrating a commitment to transparency and user empowerment.

  • Led the user experience design for the NextEra Energy Usage Dashboard, driving the project from concept to launch.
  • Developed comprehensive sitemaps, user journey maps, user flows, wireframes, interactive prototypes, and high-fidelity visual designs.
  • Collaborated on persona development and conducted in-depth customer journey mapping to ensure user needs were central to the design process.
  • Employed Scrum and Agile methodologies to optimize time utilization and ensure efficient project execution.
  • Designed compelling visual treatments for new products and features, enhancing user engagement and brand consistency.
  • Implemented a user-centric design approach, incorporating user testing and iterative feedback loops to refine and validate proposed designs.
  • Partnered closely with product owners and Scrum Masters to gather requirements, articulate user needs, and translate them into intuitive and elegant user interface designs.
  • Created detailed UX/UI case studies and conducted user research to validate design decisions and inform future iterations.

Desktop & Mobile Interface Explorations

Overview

Project Title

NextEra Energy Usage Dashboard

Problem Statement

Residential energy customers often struggle to understand their energy consumption patterns and how they translate into billing costs. Existing tools lack intuitive breakdowns, real-time insights, and actionable feedback, leaving users confused about how to manage usage effectively and reduce costs.

Solution

A user-friendly dashboard that provides real-time and historical energy usage data, bill projections, and detailed category breakdowns. Features include toggles for dollar/kilowatt views, visual comparisons, and a flexible dashboard/table interface to empower users to monitor and optimize their energy consumption.

Target Users

  • Primary: NextEra Energy residential customers (homeowners and renters) aged 25–65, with varying levels of tech-savviness.
  • Secondary: Small business owners on residential plans, energy-conscious individuals seeking sustainability.

Goals

  1. Increase user understanding of energy usage and billing factors.
  2. Reduce customer support inquiries by providing self-service insights.
  3. Encourage energy-saving behaviors through actionable data.
  4. Improve user satisfaction with a seamless, accessible interface.

Methods

  • Interviews: Conducted 1:1 sessions with 15 NextEra customers to explore their current experiences with energy tracking and billing.
  • Surveys: Distributed an online survey to 200 customers, focusing on pain points, feature preferences, and device usage (mobile vs. desktop).
  • Competitive Analysis: Reviewed dashboards from competitors like Duke Energy, PG&E, and smart thermostat apps (e.g., Nest) to identify strengths and gaps.

Key Findings

  1. Pain Points:
    • Users find bills unpredictable due to unclear factors like temperature or rate changes.
    • Lack of real-time data leads to surprises at billing time.
    • Category breakdowns are either absent or too technical.
  2. Needs:
    • Simple visuals to track usage trends over time.
    • Ability to see cost and usage in preferred units ($ or kW).
    • Explanations for bill changes and projections.
  3. Preferences:
    • Preference for both graphical dashboards and detailed tables.
    • Desire for mobile access to check usage on the go.
    • Interest in actionable tips tied to usage data.

Personas

  1. Sarah, The Budget-Conscious Mom
    • Age: 38 | Occupation: Teacher | Tech Level: Moderate
    • Goals: Save money, understand bill spikes.
    • Frustrations: Confusing bills, no real-time insights.
  2. Mike, The Eco-Advocate
    • Age: 29 | Occupation: Graphic Designer | Tech Level: High
    • Goals: Reduce carbon footprint, track usage by appliance.
    • Frustrations: Lack of category details, no kW option.

Ideation

  • Brainstormed features like real-time usage, bill comparison, and category breakdowns.
  • Sketched initial concepts for a card-based dashboard vs. tabular layout.
  • Explored toggle mechanisms and graph styles (line, pie, bar) for data visualization.

Wireframes

  • Low-Fidelity: Created sketches for:
    • Dashboard view: Cards for Current Usage, Projected Bill, and Usage Graph.
    • Table view: Rows with sortable columns.
    • Energy Analyzer: Pie chart with dropdown.
  • Feedback from team led to consolidating Current Usage and Projected Bill into a unified header.

High-Fidelity Mockups

  • Designed in Figma with a clean, modern aesthetic:
    • Color Palette: Green (#34C759) for low usage, red (#FF3B30) for high, neutral grays (#E5E5EA) for backgrounds.
    • Typography: Sans-serif (e.g., Roboto) for readability.
    • Components: Interactive toggles, hover states for graphs, collapsible sections.

User Flow

  1. Login → Dashboard loads with Monthly view.
  2. Check Current Usage → Toggle to kW if preferred.
  3. Explore Trends → Switch to Daily/Hourly via tabs.
  4. Analyze Bill → Open Bill Comparison, filter factors.
  5. Deep Dive → Select billing cycle in Energy Analyzer, view categories.
  6. Switch Views → Toggle to Table for details.

Usability Testing

Methodology

  • Tested high-fidelity prototype with 10 users (mix of personas).
  • Tasks: Check current usage, compare bills, find highest usage category.
  • Conducted remotely via Zoom with screen sharing; used a 5-point Likert scale for satisfaction.

Results

  • 90% completed tasks without assistance.
  • Positive feedback on toggle functionality and graph clarity.
  • Confusion around “Billing Cycle Temperature” placement—users expected it in Bill Comparison.

Iterations

  • Moved Billing Cycle Temperature to Bill Comparison section with a toggle overlay on the graph.
  • Added tooltips to explain Projected Bill calculations.
  • Simplified Energy Analyzer dropdown with fewer options (e.g., last 3 cycles).

Final Design

Key Screens

  1. Dashboard View:
    • Header: Current Usage (live), $ vs. kW toggle, Dashboard/Table toggle.
    • Left: Projected Bill card, Bill Comparison (with temp overlay).
    • Right: Usage Graph (Monthly/Daily/Hourly), Energy Analyzer pie chart.
  2. Table View:
    • Columns: Date, Usage (kW), Cost ($), Category.
    • Filters: Sort by column, search bar for dates.
  3. Mobile View:
    • Stacked cards, hamburger menu for view toggle.

Impact

Expected Outcomes

  • User Engagement: 20% increase in app logins due to real-time insights.
  • Cost Savings: 10–15% reduction in average bills as users act on category insights.
  • Support Reduction: 25% fewer billing-related inquiries.

Future Enhancements

  • Integration with smart home devices for real-time appliance data.
  • Personalized energy-saving tips based on usage patterns.
  • Gamification (e.g., badges for reducing usage).

The NextEra Energy Usage Dashboard addresses key user pain points by providing an intuitive, flexible interface for tracking and understanding energy consumption. Through iterative design and testing, it balances visual appeal with functional depth, empowering users to take control of their energy usage and costs. This solution positions NextEra as a leader in customer-centric energy management tools.

Landing Page | Low & High Fidelity Wireframe

Low Fidelity Design WireframeHigh Fidelity Design Wireframe
Low Fidelity Design WireframeHigh Fidelity Design Wireframe
Low Fidelity Design WireframeHigh Fidelity Design Wireframe
Low Fidelity Design WireframeHigh Fidelity Design Wireframe