Xcel Energy
Navigation That Powers Millions: Redesigning the Xcel Energy Digital Experience
Setting the Stage: A Fortune 500, A Digital Bottleneck
As a leading energy provider serving over 3.7 million electric customers and 2.1 million natural gas customers across eight states, Xcel Energy had a growing need to modernize its digital infrastructure. Their online navigation system, a cornerstone of the user experience, was failing to support the diversity of their customer base, from residential users and small business owners to contractors and utility partners.
The problem was bigger than aesthetics. It was about clarity, access, and trust. When people searched for outage updates or billing tools, friction meant lost time, and often, lost confidence.
I joined Xcel Energy with a mission: lead the experience design efforts to overhaul their global and utility navigation systems into a scalable, intuitive, and responsive framework that would support users during both routine and high-stress interactions.
INDUSTRIES
Energy & Utility
Renewable Energy
Electricity
Natural Gas
ROLE
Senior UX/UI Designer
DISCIPLINES
UX / UI
TIMELINE
2021-2022
TOOLS
Sketch
InVision
Mural
Problem Framing: The Fragmented Landscape
Customer data, analytics, and direct feedback highlighted a core truth: the existing navigation system was failing across platforms.
Key pain points included:
Utility links blended visually with browser chrome and were often overlooked.
On mobile, critical functions like outage tracking and customer service were hidden below the fold, a major issue during emergencies.
No dropdown menus on desktop, and no sub-navigation on mobile.
Inconsistent architecture across residential, business, and vendor microsites led to disjointed journeys.
Even fundamental expectations like clicking the logo to return home weren’t met.
The navigation wasn’t just inefficient, it was eroding user trust. This project was not just about optimization, it was about restoring clarity and reinforcing credibility.
Design Philosophy: Empathy, Clarity, and Future-Readiness
I design with one core belief: great digital experiences feel invisible because they work so intuitively. My approach emphasizes:
Empathy for urgency: Designing for customers in stressful scenarios like outages or billing issues
Consistency at scale: Creating systems that support diverse users without sacrificing cohesion
Intentional clarity: Every design element should have a purpose and lead users forward
Accessibility by default: Inclusive access is a baseline, not a feature
At its best, design becomes a quiet partner in people’s lives, useful, respectful, and adaptable.
My Design Process: Strategic, Inclusive, Iterative
This was a cross-functional initiative with high visibility and long-term implications. I approached it through a structured yet adaptive process:
1. Discovery and Alignment
I partnered closely with UX researchers, analysts, and product teams to dig deep into user feedback and usage data.
Tools used: Google Analytics, stakeholder interviews, user surveys
Mapped out workflows across customer types and site sections
Audited inconsistencies across microsites and platforms
2. Competitive Benchmarking
We looked beyond the energy sector. I drew insights from best-in-class navigation systems in finance, healthcare, and telecom, industries where clarity is paramount.
3. Systems Thinking and Framework Design
I aligned every component to the Xcel Energy Design System (XEDS), ensuring consistency across color, type, interaction, and spacing.
Created a reusable, white-labeled architecture to scale across microsites
Designed global and utility nav with visual hierarchy, contextual dropdowns, and mobile-first patterns
4. Stakeholder Collaboration and Prototyping
Created hi-fidelity mockups in Sketch and interactive prototypes in InVision for key use cases.
Presented to cross-functional stakeholders including developers, product owners, and business leads
Gathered early feedback to iterate quickly and avoid misalignment
5. Usability Testing and Iteration
We conducted moderated and unmoderated usability testing, including:
A/B testing for navigation placement and interaction models
Scenario-based testing for time-to-task completion
Insights from testing were directly incorporated into final designs to improve clarity and reduce friction across devices.
The Solution: Designed for Scale, Built for Urgency
The new navigation system delivered a future-proof framework that met users where they were, whether at home on desktop, on the go with mobile, or in crisis during a service outage.
Key outcomes of the redesign:
Mobile-first utility navigation surfaced urgent tools immediately
Clear dropdowns and sub-navs improved content findability across the platform
Cohesive visual treatment between global and utility navigation enhanced brand trust and wayfinding
Scalable templates enabled new business units and microsites to onboard navigation quickly with minimal dev lift
By the time I transitioned out of the organization, the new system was ready for rollout, and early stakeholder feedback was overwhelmingly positive.
Results: A Stronger Digital Foundation
While I concluded my time with Xcel Energy before the navigation officially launched, post-rollout feedback from internal stakeholders highlighted:
Significant decrease in navigation-related customer complaints
Increased time-on-page and reduced bounce rates on key microsite landing pages
Faster implementation time for new business and partner sites due to reusable navigation system
A stronger, more unified brand presence across digital properties
Even more importantly, the system was built to evolve, with accessibility baked in and responsive patterns that could grow alongside user needs and business goals.
What This Project Proved
Designing navigation at this scale requires more than UX expertise, it demands strategic alignment, systems thinking, and a deep respect for users' time and intent. I walked away with deeper experience in:
Leading cross-functional UX initiatives with business impact
Building scalable, modular design solutions
Advocating for the invisible design decisions that make systems work
Turning user frustration into actionable insights
Designing for moments of urgency, not just ease
This wasn’t just a navigation overhaul, it was a platform shift. A transformation from complexity to clarity, delivered with care and built for the long-term.