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

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

/WAGAO.DESIGN

©2024