Energy Solar

Solar Installation — Lead Generation Page

A lead generation page for a residential solar panel installer. Built around a savings calculator, federal tax credit information, and a streamlined quote request flow. Most traffic comes from mobile, so the page was designed mobile-first.

+58% Quote Requests
-36% Bounce Rate
2.4x Phone Calls
+31% Organic Traffic

Page Preview

This page was designed mobile-first. Here's the mobile experience.

Project Overview

Solar is a complicated sell. You're asking homeowners to make a decision that involves their roof, their electric bill, their tax situation, and a timeline measured in decades. The client — a residential solar installer serving three counties — had a landing page that tried to explain everything at once. It read more like a Wikipedia article about photovoltaic technology than a page that should be convincing someone to request a quote.

The page was packed with information but had almost no conversion elements. No calculator to show potential savings, no clear explanation of the federal tax credit, and no simple way to request a quote without scrolling through walls of text first. To make things worse, the mobile experience was essentially broken — text too small, buttons too close together, and the form was nearly impossible to fill out on a phone. This was a problem because 68% of their traffic was on mobile devices.

I rebuilt the page from scratch with a mobile-first approach, putting an interactive savings calculator front and center, making the tax credit and rebate information impossible to miss, and creating a streamlined quote flow that gets visitors from "I'm curious" to "here's my info" in as few taps as possible.

Quick Facts
Industry Energy / Solar Installation
Page Type Lead Generation
Font Inter (400-700)
Design Approach Mobile-First
Key Feature Savings Calculator
SEO Schema.org Local Markup
The Challenge

Too Much Information, Not Enough Conversion

The existing page was an information dump. It answered every possible question about solar energy but never actually asked for the sale. Visitors would read for a while and then leave without taking any action.

Solar panels are one of those products where the customer has a lot of questions, and most of them boil down to "how much will this actually save me?" and "what's it going to cost?" The old page talked about wattage, panel efficiency, inverter types, and grid interconnection — all important stuff, but not what someone needs to see first. People were getting lost in the technical details before they ever understood the value proposition.

The mobile situation was especially bad. Buttons were too small to tap accurately, the form fields were tiny, and some sections didn't even fit on the screen properly. For a company where more than two-thirds of visitors come from phones, this was leaving a huge amount of money on the table.

My Approach

Lead with Savings, Answer Questions, Make It Easy

The savings calculator was the centerpiece of the redesign. It sits near the top of the page and lets visitors plug in their monthly electric bill to see estimated savings over 25 years. This isn't just an engagement tool — it fundamentally changes the conversation. Instead of thinking "solar panels cost $25,000," the visitor is now thinking "solar panels will save me $47,000." That reframing is everything.

Right below the calculator, I placed the federal tax credit and local rebate information with clear dollar amounts. Most people have heard that there's some kind of solar tax credit but don't know the details. Making this prominent and specific — "30% federal tax credit" with an example calculation — removes a major source of uncertainty.

The 3-step installation timeline was added to address anxiety about the process itself. "How long does this take? Will my roof be torn up for weeks? Do I need to do anything?" A simple visual showing consultation, installation, and activation with realistic timeframes calms those concerns without requiring the visitor to read paragraphs of text.

Testimonials came from actual local homeowners, with first names and neighborhoods. Generic testimonials don't work for solar — people want to know that their neighbor did it and it worked out. The FAQ section at the bottom addresses the concerns that still come up most often: Will it damage my roof? What about maintenance? How long until I break even? I also added Schema.org local business markup throughout the page, which helped the organic search rankings and contributed to that 31% organic traffic boost.

Design

Green Energy, Clean Design

The palette is built around greens and a supporting blue — an obvious choice for solar, but executed with restraint. The green isn't neon or cartoonish; it's earthy and trustworthy. Blue accents add variety without competing. Everything is designed to feel clean and optimistic, which is exactly the emotional tone you want for a product that's about saving money and helping the environment.

Color Palette

#2ECC71 Green Primary
#27AE60 Green Dark
#2980B9 Blue Accent
#2C3E50 Dark Text
#ECF0F1 Light Gray
#FFFFFF White

Typography

Inter at weights 400 through 700. One of the best screen fonts out there — designed specifically for digital interfaces, which made it a natural choice for a page with interactive calculator elements.

Headings — Weight 700
Inter Bold
Section headings, calculator output values, and the hero headline. Strong presence without being heavy.
Body — Weight 400
Regular body text for reading
All body copy, FAQ answers, and form labels. Inter was literally built for screen readability, and it shows.
Results

What Changed After Launch

The new page went live and the numbers started moving in the right direction almost immediately.

+58% Quote Requests
-36% Bounce Rate
2.4x Phone Calls
+31% Organic Traffic
Key Takeaways

Lessons from This Build

Calculators Change the Conversation

The savings calculator was the highest-engaged element on the entire page. Average time on page went from 1:40 to over 4 minutes, and the majority of that increase was people playing with the calculator. An interactive tool that shows personalized results beats any amount of static content. It turns passive readers into active participants, and active participants are far more likely to convert.

Savings First, Cost Second

Showing potential savings upfront completely changes how people frame the decision. When the first number they see is "$47,000 in savings over 25 years," the $25,000 installation cost feels different. It's not an expense anymore — it's an investment with a clear return. This simple reframing improved conversion across every traffic source.

Local Testimonials Hit Different

We tested generic testimonials versus testimonials from named homeowners in specific neighborhoods. The local ones won by a wide margin. When someone sees "Sarah from Oakwood Park" talking about her solar panels, it feels real and relevant in a way that "John D. from California" just doesn't. For local service businesses, specificity is credibility.

Mobile-First Wasn't Optional

With 68% of traffic on mobile, designing for desktop first and then shrinking it down would have been backwards. The mobile-first approach meant every element was designed for a thumb first and a mouse second. The calculator, the form, the FAQ accordions — all of them work perfectly on a phone because that's where they were designed to live. Desktop just got more breathing room.

Thinking About a Landing Page for Your Business?

Whether you're in solar, home services, or any other industry where education drives conversion, I can help. Let's build something that actually works on every device.

bohdan@example.com