WEBSITE
/SunPower
New Home Proposal
ROLE
UX/UI Design
TIME
8.5 Weeks
TEAM COMPONENTS
product design
1 product designer
Development
1 front-end
management
1 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.
design goal
Design a responsive self-serve quoting web experience that can help users finds the information they need with minimized cognitive friction.
SEC.
/Research
Collecting ESSENTIALS
Meeting with the marketing team, I learned about our customers with different needs:
users
who will see this
• People who might has no idea about solar and SunPower
• People who will not into too much details, will straight go for the system costs
• People who are experts about numbers, want to read into technical details
To further understand how can we appeal to our customer, and what serves that we provide stand out the most to them. We conduct a series of user interviews with our new customers who just bought their homes with the solar system.
These are the user insights that I learned:
Users switch to solar because they got EV cars, or thinking about getting one
They liked idea of seamless services
They wants to reduce the utility costs, and it was great to know their potential savings with the sales team
They found our pairing app that shows the live power production is very helpful
SEC.
/Ideation
CRAFTING
Utilizing insights gathered from user interviews, 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.
/Iterations
Testing
After conducting the feedback from the marketing 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.
/DISCOVER
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
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.
Keeping Visuals Relevant to the Context
*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.
