What is Project Sunroof?
Project Sunroof is a solar savings calculator.
Project Sunroof calculates how much a homeowner could save with solar panels on their roof via Google Earth and 3D satellite imagery, weather patterns, sunshine angle, and local electric utility rates.
Project Sunroof educates curious homeowners with guidance on the installation process, local and federal solar rebates, and utility rates in their area. It can then connect homeowners with multiple national and local solar providers in their area.
"If all the suitable rooftops in the U.S. had solar panels, they could supply 39% of the nation’s energy needs."
- Google article on Project Sunroof
President Obama praised its simple design during the 2015 National Clean Energy Summit.
White House transcript
My Role
I was the only designer, responsible for UX, interaction, visual design. Within 3 short months, I was responsible for:
- Brand: Solidified branding guidelines, spec, logo lockups, illustrations.
- UX workflows: Identify and outline customer intent and map the flow of the website.
- Wireframes: Mocks and wireframes to illustrate main use cases. Identify edge cases.
- Redlines: Provide redlines and specs. Work with front-end engineer.
- Usability testing: I ran usability tests and experiments and documented insights and iterated the design.
The Challenge
When I arrived, there were 3 main issues:
1. Trust: People using the website didn't want to enter their address. They didn't trust what Google would do with it. They needed to know what value they will get.
2. Personal: They didn't know the results page was for their house. Most people don't recognize their roof from a birds' eye view.
3. Financial details: They didn't know the financial breakdown. Where did the estimate come from? How was it generated? Is it accurate?
Insights
Google's brand is that it gives people information and facts. Users trust Google to be honest and transparent about solar facts compared to solar companies. Our solution tackles each of the 3 issues:
1. Educate: On the main landing page, educate users why we need their address and what they will get from it.
2. Data-driven: On the results page, make it clear that the estimate is for their address. Follow similar map-based interactions, like Google Maps.
3. Cost breakdown: Show that we considered all financial calculations including federal incentive programs, local state programs, and loan interest rates.
First Iteration
I tried an initial landing page redesign following:
- Google's very strict branding guidelines
- Our new Project Sunroof brand using warm tones, not purple
- Cleaner contrast and simplifying content
However, our research found that users:
- Didn't trust us with their address
- Didn't understand what "Project Sunroof's" value proposition was
- Most didn't make it past the landing page
So we iterated...
Experiments
The Sunroof team of engineers, product, and design, and sales, came up with a list of hypotheses and ran sprints on a bi-weekly cadence. We stackranked hypotheses in order of importance and impact.
I would then go and create 4-6 divergent designs for each hypothesis. I gave redlines to our frontend engineer who then built them quickly and we A/B tested them. We monitored Analytics for upticks.
User concern 1: Address privacy
- Option 1: Put privacy disclaimer text
- Option 2: Show a sample house - WINNER!
- Option 3: Search general zipcode, not an address
User concern 2: What's Project Sunroof's value prop?
- Option 1: Step-by-step walkthrough - WINNER!
- Option 3: Information video autoplays on landing page
User concern 3: What should I know about solar panels?
- Option 1: Solar 101 page - WINNER!
- Option 2: FAQ
These are now the pages that are currently launched on the site.
Launch!
Our official launch to 3 states included:
- Scrollable landing page with "How Project Sunroof works"
- Solar 101 page with "How Solar works"
- Coverage map
- Google Onebox (Type in "Solar panels" in Google search to see a "Solar Savings Estimator")
Since then, Project Sunroof has rolled out to all 50 states!
Note: One cool idea was to have city-specific landing pages showing how many homes went solar in that area. Not launched.
Unicorn designs
There were plenty of ideas for further improvements. I mocked them up, even though they weren't implemented.
Highlight just my house
Many users found it distracting to have every house highlighted. Due to technical constraints, we weren't able to implement this idea.
Financing table, not tabs
Currently, users need to click between 3 tabs to view different financing options. However, most homeowners may not know which option is cheaper. Comparing them is more useful. Not launched.
No landing page
Why even have an initial landing page? Why not load a sample house estimate with a searchbar, and a user can update the address? This way users can immediately see the value through example.