Duke Energy

Digital Experience Transformation | UX Case Study

Overview

Duke Energy, one of America's largest energy holding companies serving 8.2 million customers across six states, undertook a comprehensive digital transformation initiative to modernize its customer-facing platforms. This case study documents the UX design process, strategic decisions, and outcomes that shaped the redesign of Duke Energy's digital ecosystem.

The project focused on creating a unified, accessible, and intuitive experience across web and mobile platforms, enabling customers to manage their energy accounts, understand usage patterns, and access self-service features with minimal friction.

Project At a Glance

My Role

As the Lead UX Designer on this initiative, I was responsible for driving the end-to-end design process while collaborating with cross-functional teams including product management, engineering, and customer research.

Key Responsibilities

Led design strategy and vision for the customer portal redesign

Conducted and synthesized user research to inform design decisions

Created wireframes, prototypes, and high-fidelity design specifications

Developed and maintained the design system documentation

Facilitated stakeholder workshops and design reviews

Ensured WCAG 2.1 AA accessibility compliance across all touchpoints

Collaborated with developers to ensure design fidelity in implementation

Team Structure

I worked within a cross-functional agile team consisting of product owners, business analysts, frontend and backend developers, QA engineers, and accessibility specialists. I also partnered with Duke Energy's brand team to ensure alignment with corporate identity standards.

Software Tools

A carefully selected toolkit enabled efficient collaboration, rapid iteration, and seamless handoff between design and development teams.

Process

The design process followed a human-centered, iterative approach that balanced rigorous research with rapid prototyping and continuous validation.

Design Thinking Framework

1. Discover

Immersive research phase to understand customer needs, pain points, and behaviors through stakeholder interviews, user research, competitive analysis, and analytics review.

2. Define

Synthesis of research findings into actionable insights, persona development, journey mapping, and problem statement articulation.

3. Ideate

Collaborative brainstorming sessions, design studios, and concept exploration to generate innovative solutions addressing identified problems.

4. Prototype

Rapid creation of low and high-fidelity prototypes to visualize concepts and enable early testing and stakeholder feedback.

5. Test & Iterate

Continuous usability testing, A/B testing, and refinement based on user feedback and performance metrics.

Research

A comprehensive research strategy combined qualitative and quantitative methods to build deep understanding of customer needs and behaviors.

Research Methods

Key Insights

Billing Confusion: 68% of customers found the existing bill format difficult to understand, leading to increased support calls.

Mobile Gap: 55% of customers preferred managing their account on mobile, yet the existing mobile experience was rated 2.3/5 stars.

Outage Anxiety: During outages, customers felt uninformed and frustrated by the lack of real-time communication and estimated restoration times.

Energy Awareness: Customers wanted actionable insights into their energy usage but found existing tools too complex or buried within the interface.

Key Objectives

Based on research insights and business requirements, we established clear objectives to guide the design process and measure success.

Primary Objectives

Simplify billing experience: Redesign bill presentation to improve comprehension and reduce billing-related support calls by 30%

Enhance mobile experience: Create a mobile-first responsive design achieving a minimum 4.0 app store rating

Improve outage communication: Deliver real-time, transparent outage information with accurate restoration estimates

Empower energy management: Provide accessible, actionable energy usage insights to help customers reduce consumption

Success Metrics

Challenges

Throughout the project, we navigated significant challenges that required creative problem-solving and stakeholder collaboration.

1. Legacy System Integration

The new design needed to integrate with multiple legacy backend systems that had varying data formats and API capabilities. This constraint limited some real-time functionality and required careful UX patterns to mask system latency.

Solution: Implemented optimistic UI patterns, skeleton loading states, and strategic data caching to maintain perceived performance.

2. Diverse Customer Demographics

Duke Energy serves customers ranging from tech-savvy millennials to elderly residents with limited digital literacy. Creating an experience that worked for all required balancing simplicity with functionality.

Solution: Developed a progressive disclosure approach with essential tasks surfaced prominently and advanced features accessible through contextual pathways.

3. Regulatory Compliance

Energy utilities operate under strict regulatory requirements affecting billing presentation, data privacy, and communication standards across different states.

Solution: Collaborated with legal and compliance teams early, building regulatory requirements into design documentation and creating flexible templates for state-specific variations.

4. Accessibility at Scale

Ensuring WCAG 2.1 AA compliance across a complex application with dynamic data visualizations, interactive maps, and real-time updates presented significant technical and design challenges.

Solution: Established accessibility as a core design principle from the start, conducted regular audits with assistive technology users, and created accessible component patterns in the design system.

Design

The design solution centered on a comprehensive design system that ensured consistency, scalability, and accessibility across all customer touchpoints.

Design System Foundation

Color Palette

The color system builds on Duke Energy's brand identity while ensuring WCAG AAA contrast ratios for critical interface elements.

Typography

A type scale optimized for readability across devices, with clear hierarchy and sufficient size for accessibility.

Spacing Scale

Key Design Decisions

Dashboard-First Approach: Consolidated critical information into a personalized dashboard view reducing navigation complexity

Visual Bill Redesign: Transformed the bill view with clear visual hierarchy, contextual explanations, and comparison data

Proactive Outage Experience: Integrated real-time outage maps with push notifications and accurate ETR (Estimated Time of Restoration)

Energy Insights Module: Created digestible usage visualizations with personalized recommendations for reducing consumption

Responsive Component Library: Built a comprehensive design system with 120+ components ensuring consistency and rapid development

Component Library Highlights

Conclusion

Impact & Results

The redesigned Duke Energy digital experience delivered measurable improvements across key performance indicators:

Key Learnings

Early Accessibility Integration: Building accessibility into the design system from the start proved far more efficient than retrofitting. This approach should be standard practice for all future projects.

Stakeholder Alignment: Regular design reviews with cross-functional stakeholders prevented late-stage conflicts and ensured business requirements were addressed throughout the design process.

Design System ROI: Investment in a comprehensive design system paid dividends in development velocity, consistency, and reduced design debt.

Future Considerations

The design system and patterns established provide a foundation for future enhancements including smart home integration, electric vehicle charging management, and renewable energy dashboards. Continuous user research and iterative improvement remain essential to evolving the experience as customer needs and technology capabilities advance.

Case study prepared for portfolio presentation