WEBSITE
/SunPower
New Home Proposal
TIME
8.5 weeks
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
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.
How might we create an intuitive web experience that helps new homeowners understand the benefits of choosing SunPower, a trusted solar brand, and help them onboard with a better financial option?
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
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 think some of those can be 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 what is solar, and 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
WHAT IS SOLAR AND WHY SunPower
🙂
"ah! this is how solar works and sunpower has been in this in dustry for decades"
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 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
I want to highlight the savings by comparing against with utility bill over the years, illustrating the life with our solar and EV cars. To evaluate the narrative and gather team responses, I populated certain sections with pre-existing marketing content to enhance readability:

Potential Savings & env. Impacts
Emphasize the money conserved by opting for solar energy, and contrast the expense of using a utility company in the long run to underscore the cost savings
STORAGE
Displaying the storage with EV to gather the notice of EV owners or prospective EV owners
Purchase Option
Providing side by side buying choices to allow customers to distinctly see the variations
*Low-fi was created to mapped out the key sections, and in the middle is the mid-fi was created for team reviews
SEC.
/user testing
customers' Feedbacks
After conducting the feedback from the internal team, I made adjustment, and we tested with 5 customers with the refined website.

*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
SEC.
/Iterations
RESULTS
After weeks of development, here are the updates made to the initial release of Self-serve Quoting 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
FINANCING OPTIONS section
Simplifying Choices for Users
We initially presented multiple options equally, but during testing, users found it challenging to identify the best choice. To streamline the decision-making process, we implemented a "default" or "recommended" option, similar to what many apps use to guide user selection. By visually emphasizing this recommended choice, we reduced cognitive load and made it easier for users to quickly understand which option would likely suit them best. The highlighted design ensures that users can clearly see and select the optimal option without confusion.


*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.