Xcel Energy
Navigation Overhaul: A Transformation Story
Overview
Xcel Energy overhauled its outdated website navigation to create a seamless, intuitive, and scalable experience across platforms.
Through user research, mobile-first design, and iterative testing, the new system improved usability, resolved customer pain points, and set a foundation for future digital growth.
INDUSTRIES
Energy & Utility
Renewable Energy
Electricity
Natural Gas
ROLE
Senior UX/UI Designer
DISCIPLINES
UX / UI
TIMELINE
2021-2022
TOOLS
Sketch
InVision
Mural
Setting the Stage: A Legacy in Energy
Xcel Energy, a Fortune 500 leader headquartered in Minnesota, powers millions of homes and businesses across eight states with electricity and natural gas. As a company that thrives on innovation, it faced a challenge that threatened its digital experience: outdated global navigation.
The existing system was anything but intuitive. Customers struggled with inconsistent designs and functionality across platforms, making simple tasks, like finding critical resources, frustrating. Internal and external partners, vendors, and business users faced similar hurdles.
The mission was clear: Xcel Energy needed a navigation system that was not just functional but seamless, scalable, and future-proof.
A Fresh Approach: The Solution
The new navigation wasn’t just a redesign, it was a reinvention.
Cohesive Design: Subtle color distinctions bridged the gap between utility and global navigation, creating a seamless and on-brand experience.
Mobile-First Thinking: Frequently used tasks like customer service and outage information were elevated to the top for quick access.
Intuitive Navigation: Dropdown menus and sub-navigation streamlined exploration, helping users know where they were and where to go next.
Scalability: The new system allowed residential, business, vendor, and partner websites to adopt the navigation with ease, saving time, effort, and costs for future development.
The design was built not just for today but for tomorrow, ensuring consistent functionality and brand cohesion across all Xcel Energy platforms.
The Design Journey: From Ideas to Execution
Research and Discovery
User surveys and Google Analytics insights provided the foundation, revealing user pain points and business needs. Competitive analysis from top utilities and customer-centric industries inspired the team to push boundaries and reimagine the experience.
Crafting the Vision
The Xcel Energy Design System (XEDS) became the cornerstone, unifying typography, iconography, colors, and interactions into a cohesive framework. Hi-fidelity mockups explored possibilities, sparking critiques, collaboration, and refinement.
Prototypes brought the designs to life, allowing stakeholders to see and feel the navigation’s potential. InVision previews ensured alignment across teams and helped guide decisions.
Testing and Iterating
Usability testing was crucial. From A/B tests to unmoderated sessions, every aspect of the navigation was scrutinized. Feedback informed iterative improvements, ensuring the final design was intuitive, accessible, and user-focused.
The Results: A Seamless Experience
Although the navigation launched after I left Xcel Energy, its impact was undeniable. Former colleagues reported significant improvements:
Customer pain points were resolved, and navigation was consistent across platforms.
Scalable design empowered internal teams to build new sites efficiently.
The overall experience transformed into one that was intuitive, user-friendly, and future-ready.
Lessons Learned: Designing Beyond the Interface
This project reinforced the power of teamwork and focus. In a cross-functional environment, progress requires harnessing diverse strengths while maintaining a clear vision.
And when designing for scale, every decision matters. From a subtle color shift to the placement of a dropdown, each choice builds toward something greater, a navigation system that’s not just functional but empowering for everyone who uses it.
For Xcel Energy, this wasn’t just an update. It was a step into the future.