Palmetto Solar Project Pricing Calculator

tl;dr

Project Highlights & Key Learnings

What I Did

The biggest hurdles to get over with this project were the lack of clear navigation and user pathways to get to key areas and find information. I addressed this by creating opportunities throughout for important information to shine: defined calls-to-action in the form of strategically-placed buttons, specially-designed responsive boxes for rates and comparisons, and extra navigation tools throughout (e.g. breadcrumbs and sidebars). With visual design that invokes patriotic themes, the overall result is a clean, friendly banking experience for all users.

What I Learned

Less is more. No, even less than that!
While I thought my initial design solved the problem of too much noise at the top of the homepage, it turns out...it didn’t! I had to find a way to both de-emphasize the CTAs, and keep them easy to spot.

Accessible doesn’t have to be ugly.
This is one of the first projects where I was required to consider accessibility and WCAG compliance when making design decisions. At first I was overwhelmed by the thought of having more constraints on what was possible, but in the process I learned that it made it easier to cut unnecessary visual noise (and thus the drive to learn more about accessibility and eventually pursue certification was born!)

Challenges

The original method of adjusting prices on Palmetto proposals was exceedingly complicated. When considering improvements, it became clear that four major challenges needed to be addressed:

The base price per watt (PPW) needed to account for multiple factors, including sales rep commissions, anticipated fees from loan providers, and the cost of additional products and services.
Sales reps were relying on external spreadsheet calculators and then transferring data into Alchemy, leading to potential pricing errors and dissatisfaction.
The proposal could be viewed by unauthenticated users, making it challenging to display lender fee details and obscuring how certain numbers were calculated.
“Under the hood” calculations for lender fees gave the impression that add-on product prices were inflated, straying from market norms.

Our goal was to create a straightforward calculator product that:

Required minimal training and documentation
Empowered sales reps to rely on Alchemy for pricing without the need for external calculators, and
Transparently displayed lender fees, reducing the chance of errors

Old Pricing Process

In the old process, all pricing happened within the proposal document. This made it difficult to track price changes.

The base price per watt was set in a modal upon first access by an authenticated Alchemy user.
Adding different purchase methods involved another modal, with limited editable fields and mostly read-only text from the other inputs.
Inputs for add-on products and services were scattered across separate sections within the proposal.

Screenshots of areas on the proposal where pricing changes occurred in the old process.

New Pricing Process

Requirements & Scope

The new calculator had to meet the following requirements:

Display the solar system size for reference (pulled from the system design generated prior to pricing).
Include an input for the base price per watt, the foundation of the solar system price.
Offer the flexibility to add/remove up to two alternative purchase methods for price comparison.
Enable selection between various warranty product options.
Allow for addition/removal of add-on products and services.
Present a clear price summary, including lender fees.

Solutions

In the revamped pricing experience, all adjustments now take place on a separate screen accessible only to sales reps and Palmetto internal users. This allows transparent display of lender fees, enhancing understanding of the system price and loan principal calculation.

Using existing components from the Palmetto Design System and common design patterns from across the Alchemy platform, I built a UI designed to feel like a natural extension of Alchemy and the proposal.

Screenshot of the MVP calculator UI with a pulled out view of the Purchase Options modal.

MVP Calculator Product

Users set their base price per watt, which applies to selected purchase methods.
Financing products can be added via the "Purchase Method" dropdown for quick price comparisons. Down payment, warranty plan, and additional products/services can be added through other inputs.
The summary updates in real time as inputs change, and a "Save & Review" option navigates to the proposal with all adjustments applied.

Small Screens

While not ideal for the pricing calculator, I considered that about 20% of Alchemy usage occurred on small screens, which was clear from reviewing FullStory sessions. To accommodate this, key summary information is presented in a fixed bar at the bottom of the screen, with the full summary accessible through a toggle button or a "Continue" button.

Animated GIF of the two-step calculator experience in a smartphone viewport

Results

“Pricing a proposal no longer requires a PhD in solar!”

The new pricing experience received enthusiastic feedback from sales partners, who appreciated the ability to create and price proposals within minutes. FullStory sessions showed that sales reps navigated the flow with ease and few errors. Proprietary internal data supported this perspective.

Fast Follows and Ongoing Improvements

General Layout Updates

The new pricing calculator marked the beginning of a series of enhancements aimed at streamlining the proposal creation process. As I got further into developing the UX for other steps of the process, I introduced a new visual style for the header and footer areas. The calculator UI was updated to be consistent with the rest of the proposal creation process, where homeowner information was relocated to the header, and calls-to-action were placed in a footer bar.

A side-by-side comparison of the MVP calculator layout with the updated layout.

Different price per watt values between purchase methods

Initially, the calculator allowed only one base price per watt value, applied to all purchase methods. To accommodate forthcoming features and offerings, we updated the UI to allow individual base PPW values for each purchase method.

A before and after comparison of the old price per watt and purchase method inputs with the updated versions

Animated GIF of the commission deduction interaction.

Allowing sales reps to deduct add-ons from their commission

To streamline the process when mandatory add-ons (such as an electrical panel upgrade) arise after a project undergoes quality control, the option for reps to deduct add-on costs from their commission was added. This can be done within the calculator interface by checking a box under the relevant add-on.

Solar Project Pricing Calculator