I've been working on this product for two years now. Initially, I was hired to redesign the WattPlan Advisor solar & EV calculator. The goal was to enhance the user experience to show the customer their personalized energy assessment in a compelling and cohesive manner. The need was a flexible interface for customers considering more than solar and allow the total cost of ownership (regardless of which DER module(s) are included) to be intuitively depicted. The new design introduces the concept of “steps,” or actionable tasks for the customer to take to achieve the results of their personalized assessment. For example, the possible steps displayed on PG&E’s site will be “Install solar”, “Switch electric rate plan” and “Make efficiency improvements”. The Steps section walks the customer through each step of their new plan and how it compares to a traditional plan (i.e., “Traditional plan” vs. “My new plan”).

TLDR; They needed it to be more modular, flexible, and attractive.

Throughout the year(s), I added more features including: A complete design system, complete with theming for all 20+ utilities that WattPlan serves.

A new onboarding experience, data visualazation, and a complete re-design of the user flow for all sites. WattPlan presented complex UX challenges because of the seemingly unlimited scenarios due to multiple instances that each has it's own unique content. The designs that I created had to fit all of these scenarios in a modular way. I had to work extremely close with the engineering team to ensure that everything would work from a UX & code perspective.

Last year, a new product was launched, WattPlan Grid. Grid helps utilities with DER planning. I got the opportunity to be involved from the beginning. It was exciting to help build a product from the ground up.

I was and still am the only designer on this product (as well as two more). It was my job to lead everything from the discovery of features, building early lo-fi prototypes, usability tests and customer interviews, hi fi prototypes, design specs and .css file creation.

During this project, I created a design process that focused on short, iterative cycles. I started by defining the problems and gathering as much information and requirements as I could from the technical product managers. I would then organize the information.

After the definition phase, I would move on to building the architecture and delivered wireflows and lo-fi prototypes.

After the structure was approved, I would then switch to higher fidelty models and eventually hand-off the design specs to the engineers.