Utility Widgets

GridX has long offered APIs to help utilities support customer understanding around billing and rate options. When I joined GridX we set out to bring those insights to life, by designing a flexible system of embeddable widgets that could make the API data more accessible, actionable, and reusable.

The Rate Model Copilot project is in its initial phase of building an automated digital process for rate model scaffolding. I have worked with my good coworker Roland, who is the designer behind our current Tariff Modeling software, to explore the best way to adjust the Tariff Modeling interface and add generative AI functionality.

Lowering call volume from billing confusion

Could widgets reduce call volume for utilities by helping customers better understand what drives their energy costs, and what they can do about it?

Understanding costs, usage, rates, and savings

We wanted each widget to help answer these key questions: What’s driving my energy costs, and how can I lower them? To guide the design I laid out a few core principles; simple visuals, minimal interaction, and clear entry points into deeper insights. Each widget would provide a clear snapshot of usage, costs, or savings opportunities, without overwhelming data or technical barriers. Especially for residential utility customers. We would later focus on non-residential use cases, which led me to dive into more complex data visualizations.

Reducing implementation delays

I designed the widgets as modular building blocks that could be embedded, branded, or adapted. Utilities can use them in logged-in portals, email campaigns, or dedicated portals. They are built specifically for GridX APIs, ensuring a consistent backend connection in our control.


A business goal for GridX was to make it easier for utilities to plug in and publish quickly, without the overhead of building custom front ends. Allowing us to recognize revenue quicker than when we'd only contract our APIs.

Restructuring our token system for accessible, scalable branding

To enable easy rebranding without rewriting, hard coding hex values, or duplicating components, I restructured our design system CSS color token system. I updated legacy tokens, introduced new ones, and applied the full set across our component library and widgets. With just six values, we can apply each utility’s brand colors instantly, preserving visual consistency, accessibility and reducing engineering effort.

Designing for Utility-adoption

style="position: relative; padding-bottom: 56.25%; height: 0;">

For me, designing these widgets started as a speculative endeavor. Many utilities already have established frontend partners and internal platforms, and being able to insert additional functionality into this landscape required Sales, Customer Success, and Solutions coworkers showcasing my designs in various conversations with utility stakeholders. While that meant adoption can take time, the widgets helped us shift the conversation.


Instead of positioning GridX solely as a backend data provider, these designs have helped us show up as a UX partner.


For me, it was a chance to lead strategically, build reusable experiences, and understand how to design for a future our clients are still catching up to. Through that process we went from no contracted customers to three, in one year.