Direct Energy

Mobile App · B2C · App Design · Rebrand

Direct Energy, a leading electricity and natural gas provider across North America, underwent a comprehensive rebranding initiative that began with marketing and expanded across all product touchpoints. Over two years, we reimagined the entire digital experience, transforming a fragmented legacy app into a cohesive, modern platform that empowers customers to take control of their energy consumption.

Client

Direct Energy NRG Energy brand

Services

Visual Design UI & UX Design Design System User Research & Testing Prototyping

Industries

Energy, Oil, and Gas

Date

2024 → 2026

app screen

The ask

Unifying Direct Energy's fragmented customer experience by building a scalable design system and reimagining every touchpoint of their mobile app.

Understanding customers

Direct Energy's mobile app served millions across deregulated markets in Texas, the Northeast, and Midwest—but the experience was fragmented. Inconsistent visual language, complex navigation, and outdated UI created confusion and frustrated customers, resulting in poor ratings, increased support calls, and low engagement. When Direct Energy's marketing team initiated a comprehensive rebrand, we chose transformation over surface-level updates. Rebuilding the app with a cohesive design system, streamlined flows, and a scalable foundation aligned with the company's evolving brand identity.

The approach

Translating brand vision into product reality through design system creation, user testing, and iterative implementation across iOS and Android. Changes were rolled out gradually, prioritizing high-impact features while maintaining app stability.

Login View | Redesign

Updated components, systematic 8pt spacing, and WCAG-compliant colors. Same layout architecture—maximum visual impact with minimal development time.

Legacy

Outdated components, inconsistent spacing, and low contrast. Original layout structure maintained for development efficiency.

Login View | Redesign

Updated components, systematic 8pt spacing, and WCAG-compliant colors. Same layout architecture—maximum visual impact with minimal development time.

Legacy

Outdated components, inconsistent spacing, and low contrast. Original layout structure maintained for development efficiency.

Home View | Redesign

Elevated payment CTA with high-contrast button, improved spacing and hierarchy. Added promotional card zone for personalized product offers—addressing key business and user needs.

Legacy

Grid-based layout with low visual hierarchy. Primary action (payment) competes with secondary features. No promotional space for personalized offers.

Home View | Redesign

Elevated payment CTA with high-contrast button, improved spacing and hierarchy. Added promotional card zone for personalized product offers—addressing key business and user needs.

Legacy

Grid-based layout with low visual hierarchy. Primary action (payment) competes with secondary features. No promotional space for personalized offers.

Usage page redesign | Onboarding.

Usage View | Redesign

Improved information hierarchy and streamlined data visualization for quicker comprehension. Tab navigation refined based on user research feedback. Added bill period filter for direct access to historical usage data and consumption indicator callout providing at-a-glance comparison feedback (higher, lower, or equal usage).

Legacy

Outdated visual design inconsistent with new brand guidelines. Required modernization to align with rebrand and improve data comprehension. Lacked period filtering and comparative consumption indicators.

Usage View | Redesign

Improved information hierarchy and streamlined data visualization for quicker comprehension. Tab navigation refined based on user research feedback. Added bill period filter for direct access to historical usage data and consumption indicator callout providing at-a-glance comparison feedback (higher, lower, or equal usage).

Legacy

Outdated visual design inconsistent with new brand guidelines. Required modernization to align with rebrand and improve data comprehension. Lacked period filtering and comparative consumption indicators.

Bill View | Redesign

Amount due prioritized with clear visual hierarchy. Primary actions (pay bill, bill details) elevated for prominence. Status chips (enrolled, sign up) added and menu labeling refined to improve discoverability. Projected cost card (MVP) introduced—dynamic component displaying consumption-based estimates—for billing transparency and proactive energy management.

Legacy

Dense information layout with poor scannability. Amount due lacks prominence, buried navigation list, and unclear action hierarchy. No status indicators for enrolled programs.

Bill View | Redesign

Amount due prioritized with clear visual hierarchy. Primary actions (pay bill, bill details) elevated for prominence. Status chips (enrolled, sign up) added and menu labeling refined to improve discoverability. Projected cost card (MVP) introduced—dynamic component displaying consumption-based estimates—for billing transparency and proactive energy management.

Legacy

Dense information layout with poor scannability. Amount due lacks prominence, buried navigation list, and unclear action hierarchy. No status indicators for enrolled programs.

Transfer of Energy Service View | Redesign

Hero image with relatable scenario establishes context. Strategic white space and progressive disclosure guide user through form. Pre-populated origin address, clear destination input, and inline educational content reduce cognitive load while building trust in the process.

Legacy

Icon-centered layout with minimal context. Generic messaging fails to address user concerns about service transfer complexity. Limited actionable information before committing to flow.

Transfer of Energy Service View | Redesign

Hero image with relatable scenario establishes context. Strategic white space and progressive disclosure guide user through form. Pre-populated origin address, clear destination input, and inline educational content reduce cognitive load while building trust in the process.

Legacy

Icon-centered layout with minimal context. Generic messaging fails to address user concerns about service transfer complexity. Limited actionable information before committing to flow.

The impact

Improved ratings. Reduced support calls. Increased engagement. A transformation that delivered measurable customer value while building a scalable foundation for Direct Energy's digital future.

2.3 → 4.7

2.3 → 4.7

App store rating

App store rating

App store rating

3m+

3m+

Active users

Active users

Active users

-45%

-45%

Support calls reduction

Support calls reduction

Support calls reduction

Powering what matters

Energy is more than kilowatts and billing cycles—it's what keeps homes comfortable, families connected, and daily life running smoothly. Through this transformation, we didn't just redesign an app; we reimagined how millions of people interact with an essential service. By translating Direct Energy's brand vision into intuitive experiences, building a foundation that scales with user needs, and placing transparency at the center of every interaction, we created a digital platform that empowers customers to take control. The result is an experience that, like energy itself, works quietly in the background—reliable, accessible, and always there when needed.