WEBSITE
/SunPower
Self-serve
Proposal
TIME
3 months
ROLE
ux/ui design
Team components
Design
Product designer
Development
Front-end developer
Management
Product manager
SEC.
/OVERVIEW
INTROduction
SunPower partners with California home builders to offer new homes with pre-installed solar and battery systems. The New Home Self-Serve Proposal lets new homeowners explore solar energy options and their cost benefits. It empowers users to manage and finalize solar service agreements independently.
Current problems
Fresh homeowners lack knowledge about our company, services, and pricing, resulting them to call in and clog our customer support lines.
pROJECT goal
Design a responsive self-serve quoting web experience that help enhance user confidence in using SunPower system and reduce support calls
SEC.
/Research
Collecting ESSENTIALS
I talked to both internal marketing team and new homeowners who purchased our solar system recently.
These are the user insights that standing out:
Most customers are price sensitive/driven. Site with transparency price and detailed information on how much they can save by going for solar can boost their confidence
Some customers are tech-savvy, and they want to know the technical details about the system, so that they can compare with other brands to ensure that they made a good choice
Solar installation is a multi-step journey, and customers want to be handled with one single trust-worthy brand that is expert in field
Many customers feel solar is a pretty weighty personal investment. As a result, they care a lot to know their solar system is working properly at any given time.
With all the learnings, my main challenge for this project was:
How might we create an intuitive web experience that makes new homeowners feel confidence with SunPower services?
SEC.
/Ideation
Brainstorming
I collaborated with other designers to brainstorm the overall design strategies, how should we structure our story and what are the possible experiences for the web proposal.
Gathering inspirations and insights internally
We invited marketing team joined us on inspiration gathering. Asking everyone paste the website screen that they like and "wish we could do the same" on the figma board, and letting them explain why .
After rounds of discussion, few key words started to become themes. Considering our customers, we chose some of those as our strategies.
Design strategies
🔍
infomative
🧠
Clarity
✨
engaging
Informative:
Based on our customer demographics, we aim to provide enough information for most users to feel confident in our services while also catering to our tech-savvy audience with in-depth details. We’ll add tooltips and help sections to explain system specifics ensuring that all users can easily access the level of detail they need.
clarity:
Since our goal is to reduce the customer support calls, we aim for focusing on the essentials, and minimalist design. Avoiding jargons, using simple language, clear visual supports, and CTAs ensures customer understand each step.
engaging:
Learning the idea of solar can be frustrating for majority of our customers. We want an intriguing way to introduce the concept, for example, using more videos , animations and interactive visual contents to let them have an easy "Aha!" moment.
web proposal structure
The structure of our story should be compelling and intuitive, starting from who is SunPower, why SunPower, and following by the benefits of going solar is a good way to intrigue our customers and boost their purchase confidence.
Webpage
Customer
who is and Why sunpower and what is covered
🙂
"ah! This what I get from the package, and sunpower is a trust-worhty brand"
Compel with saving and benefits
🤩
"I can save so much by going solar, and there are other benefits too"
onboard the purchase decision
😃
"i KNOW WHAT i am paying for and the options makes so much sense"
DECIDE ON FINANCIAL plan
📝
"I feel confident about the financial decision i made"
explore the potential web proposal experience
With the outline of our structure, we went to explore the potential experience in lo-fi, and these two are the final winners. The book style is more like a traditional "paper proposal" style. It is good for locking customers' attention on the information without distracting from other contents. However, it request too much clicks and it is hard to tack informations when needed. On the other hand, One-page aligned more with clarity.
book style
One-page
SEC.
/Design
CRAFTING
With enough information, I start to fill in contents that guided by our strategy:
Hero section
I added video for customers who are curious about learning SunPower. And for those who likes skip the video, we have three main highlights about why they should trust SunPower.
System details
List the basic information about the system that customer will get, adding tooltips for those who are technical, and want to dig deep on the system details.
monitor app
Customers mentioned that the biggest concern is they don't know if the system working properly after installation. Highlighting our monitor app benefits, customers can quickly scan through, and help reduce concerns.
Potential Savings & env. Impacts
To make a compelling point to those who are saving driven. We want to highlight how much they can save by going solar not only with the big number, but also an interactive chart, so customer can see the savings of each year.
STORAGE
We make adding battery accessible for those who are in need. Customers also have the freedom to choose which capacity and how many unit they need. For those who are not sure what it is, and if they need one, I also include link to video content for explanation.
Purchase Option
Providing side by side buying choices user can see the difference clearly, I also include tooltips on the details for them to read more if they don't know what the option means.
*Low-fi was created to mapped out the key sections, and in the middle is the mid-fi was created for team reviews
SEC.
/interation
Internal' Feedbacks
After the discussion with the team, I made some major changes to the proposal to improve the experience, following by transferring the web experience to mobile.
System Details
I added card to organized the information, make it easier to read, and only include the tooltips to the part where it needed. I also consolidated the system details and app into one section to reduce clutter and make the space more efficient.
Potential Savings & env. Impacts
I removed the specific saving number due to the uncertainty, and add graph to visually show the bill difference between traditional energy and solar. Also, we added the environmental impact under the savings for those who cares about environment.
financial option
To make it clear on the chosen final option, I added highlight, and also make the most valuable choice as default to help customer make better choice.
SEC.
/user testing
customer Feedback
We tested with 5 customers with the refined proposal. We documented on what they think for each sections.
*Each color represents a customer. As we show the whole site prototype, user are sharing their thoughts on each section, what is clear, what is not, and what more information they want to know. We will take the note and leave under each section
Here are some of the users comments:
🤔
Some customers did not know what to expect with the toggle switch here
🤔
Some users didn’t notice the video button right away, and they were confused with the ev charger and storage. and they are not sure how the storage work, and how it benefit properly
🤔
A lot of customers were not sure how to interpret "W" or "KW"
SEC.
/Iterations
Iteration
After weeks of development, here are the updates made to the initial release of Self-Serve Proposal Website :
System Details section
Visualizing "kW" for Better Understanding
During our research, we discovered that many users struggled to interpret "kW" in the context of energy production. They found it difficult to grasp what the unit actually meant in terms of practical application. To address this, we introduced an estimated annual energy production metric based on the system's capacity, translating "kW" into a more relatable measure.
*Before
*After
STORAGE promotion section
Keeping Visuals Relevant to the Context
User testing revealed significant confusion around an image depicting an electric vehicle (EV). Many users mistakenly believed this section was related to EV charging, which was not the intended focus. To resolve this issue, we replaced the static EV image with an interactive GIF animation. The new visual walks users through different backup power scenarios, allowing them to engage with the content and better understand how the backup system works in various real-world situations.
*Before
*After
*Clickable prototype for desktop
/learnings
Lessons learned
Conducting external user testing can be costly in terms of time, effort, and money. Sometimes, we don’t have the luxury of direct user insights. As a product designer, I’ve learned to leverage what’s available, asking internal stakeholders like team members or colleagues who may know more about the user or current solutions. In this project, after my initial meeting with the marketing team and PM, I jumped into problem-solving without asking if similar tools had been used before. Later, I found out this was a new business, but if I had asked upfront, I could have uncovered insights from past experiences that might have informed my approach. Next time, I’ll make sure to explore existing resources before moving forward.
