Case Study: Design Systems

Retrofitting and rebranding at scale

The Problem

Xcel Energy’s digital ecosystem was running on a legacy design system that had grown fragmented across multiple products. Different teams were still using outdated tooling like Craft + InVision, while others had moved on to Sketch. There was no single source of truth, no consistent governance, and both design and tech debt were accumulating rapidly.

At the same time, the company needed to retrofit its existing brand identity into these products—balancing legacy brand elements with the requirements of modern accessibility, scalability, and consistency. This made every new feature harder to deliver, and every product experience slightly out of sync with the rest of the ecosystem.

Some Challenges

This work did not have a solid brief or validated problem statement risk endless revisions.


To solve this, I recommend focusing on fonts revisions first, and completing ongoing iterative sprints/discovery.

The Results

The outcome was a unified design system that worked across Xcel Energy’s web and mobile products. While not perfect, the system enabled consistent iteration and delivery through the full product development lifecycle (PDLC).

Key results included:

  • Adoption of Salesforce Lightning for web applications, ensuring alignment with enterprise standards.

  • Use of Flutter for mobile, extending system consistency into native app experiences.

  • Faster iteration cycles: the team could test, learn, and refine components as products evolved.

  • A living system: instead of a static library, the design system became part of the end-to-end PDLC and beyond, with governance practices in place to adapt as business and user needs changed.

Ultimately, this work reduced fragmentation, improved accessibility, and laid the groundwork for long-term scalability of digital experiences at Xcel Energy.