Usage Phase
Turning a React conversion into strategic impact
Overview
I led the React conversion of the Usage Phase, a critical step in EverBright's sales platform, where sales representatives input homeowner utility data, including the utility provider, rate schedules, usage, and costs. This information powers system design and savings calculations, making accuracy at this stage critical for reliable proposals and customer confidence.
Skills
Product Design I Stakeholder Management
My Role
Design Lead
Timeline
Q4 2024 – Q3 2025
Team
Lisa Notier (PM) I Alex Maruniak & Alex Court (Dev) I Tracey Morris (Design Review)
Outcome
Reduced utility bill rejection rate from 55% to 34%
Eliminated unnecessary inputs and resolved underlying data accuracy issues. The conversion to React also significantly decreased the time and cost to implement new features, including urgent regulatory changes.
Process
In my role as lead designer on this project, I:
Evaluated existing sales platform research and carried forward relevant insights to inform design decisions
Identified missing design system components and worked with the design system team to fill gaps + converted Usage Phase to React using existing design system components
Layered in strategic UX improvements while maintaining close coordination with PM on scope + engineering on technical feasibility
Adjusted designs to meet evolving business-led requirements
Led comprehensive UI/UX reviews to catch errors and inconsistencies before launch + facilitated post-release retro to gather lessons learned
Want to learn more? Read on below.
Understanding the foundation
Before diving into potential solutions, I evaluated existing sales platform research that I had conducted several months prior. Here's an example of an insight that contributed to improvements to the Usage phase.
Insight:
Sales reps often manipulate usage data to tell the homeowner what they view as a more accurate story. Since savings is a projection, they believe that they need to project the utility data as well.
Component audit & first iteration of designs
I conducted a comprehensive audit of the existing Usage Phase, cataloging each legacy component that needed conversion to our design system. This included identifying gaps where design system components didn't yet exist and coordinating with the design system team to request what we'd need for a complete migration. Based on these findings, I created a V1 version of the designs.
Example: no existing 'Upload' component pre-redesign
Example: 'Upload' component created in redesign
Strategic improvements & final designs (6+ months later)
With the technical foundation in place, I revisited the original designs and identified quick wins that would meaningfully improve the user experience without requiring an extensive redesign. Through close coordination with our PM, I developed lo-fi wireframes that balanced user needs with strict scope boundaries—each improvement had to deliver clear value while staying within our migration timeline. Then, based on feedback from product, I created final designs that reflected key priorities.
Adjusting designs to evolving business requirements
As company priorities shifted, the project scope expanded to address critical business pain points: utility bill rejections were costing the business, and the system couldn't handle installations where partners were adding solar to homes that already had existing systems. I participated in cross-functional stakeholder meetings to understand Usage Phase's role in minimizing rejections, and then designed solutions for the data table and graph to accommodate second system modeling. I also contributed guardrails that actively reduced rejection scenarios while adhering to rapidly changing legal requirements.
Example of Rapidly Iterated Solution to Address Legal Requirements
Cross-functional collaboration & team learnings
Without ongoing design reviews, PRs had been merged across multiple developers, resulting in a compressed timeline for catching UI and interaction gaps before release. I created a detailed bugs/UI fixes tracking table to stay organized across developers, conducted thorough reviews under tight deadlines, and worked collaboratively with product and engineering to prioritize fixes.
Bugs/UI fixes tracking table
Facilitated a retro discussion post-project launch
Key Takeaways
After changes to a team, re-establish how you'll iterate together
Before a mid-project re-org, devs checked in regularly and I ran design reviews along the way. After the re-org, that cadence didn't carry over—reviews got pushed to right before launch. In the crunch, fixes I flagged got dropped as "low impact," even though they'd have been easy to address earlier. Next time a team shifts, I'll re-establish the review cadence up front.
A clean rebuild pays off long after launch
When a California regulatory change was introduced suddenly, our team responded fast. Before the React rebuild this would've been a slow, cumbersome fix—but because the system was in good shape, I designed the flow and worked with engineering and the PM to ship in about two days. Turning a regulatory change around that fast mattered for the business.
