WEB APP
/Sunpower
ADVANCED DESIGN TOOL
TIME
1.5 YEARS
ROLE
PRODUCT DESIGN
Team components
Design
Product designer
Development
Front-end developers
Back-end developers
Machine learning engineers
Management
Product manager
SEC.
/OVERVIEW
Introduction
SunPower provides solar energy services. This includes helping homeowners design solar panel layouts for their homes. The Advanced Design Tool is a specialized software used by internal specialists in this process.
Advanced design tool in the process
submit Address
(Customers)
generate Lead
(Salesforce)
receive request
(Salesforce)
Review Design
(Customers)
Receive design
(Sales team)
Design layout
(Designers)
*When a customer submits their address, it generates a lead that is passed on to SunPower's internal MAXFIT team. Using the Advanced Design Tool, the team creates a tailored panel layout for the customer's rooftop, accounting for obstructions on the roofs like chimneys, pipes, as well as local regulations.
the users' goal
The primary users of this tool is our internal team, called MAXFIT. They are the specialists who have been trained to use tools like Advanced Design, AutoCad, Aurora to design Panel Layouts, and generate shading report for the customer team to use in solar installation.
the challenge
MAXFIT handles hundreds of design requests every day, but we were stuck using a pricey third-party tool that didn’t really fit our needs. Everything had to be done manually—like building 3D roofs, checking regulations across multiple programs, and figuring out panel placements—which slowed us down. On top of that, the tool didn’t work well with related sales systems, leading to mistakes and delays for our sales team when creating designs and quotes.
SEC.
/Solution
overall SOLUTION
To address the problems above, our team aimed for a tool that
Leverages automations (heuristic or ML) to improve speed and accuracy throughout designer workflows.
Unifies different parts of the product ecosystem relevant to panel design into one software (e.g. CAD, government regulations, pricing).
SEC.
/implementation
FEATURE: roof generation
Looking at designing the solar panel layout, there are multiple design tasks involved. One of the most critical tasks is to generate roofs in 3D. In this case study, I walk through this feature — roof generation.
IMPORTANCE Of ROOF generation
We timed the different tasks throughout the layout design process for internal specialists. From this, we observed that, typically, more than half of the time in their process is actually on defining the roof in 3D. This time can increase significantly depending on the complexity of the roofs.
DEVELOPING THE FEATURE
Developing the roof generation feature required significant iteration and different approaches in where automation fits in.
At first the independent ML team attempted to generate the panels automatically without any human assistance.
designers input Address
ML-GEN
PROJECT COMPLETE
Result
We took the ML model generations to the users, where I conducted targeted user interviews, and discovered that
99% of the auto-generated models were unusable as is.
*Example of 3D site model generated by our initial automation system. Yellow highlights are the walk-ways, gray rectangles are solar panels. In the image, it is obvious that the 3D roof planes are mismatched
Conclusion
Since the model generated roofs were unusable as is, they clearly needed correction. We then built a tool to allow users to fix the "broken roof".
SEC.
/iteration
FIXING AUTO-GENERATED ROOFS
Fixing the ML generated roofs followed this flow:
designers input Address
ML-GEN
manual fix
PROJECT COMPLETE
Our team wanted to quickly determine if fixing the ML generated roofs was a good path to take. I recommended to that we use standard methods found within 3D modeling software (like Aurora). In them, to modify a 3D shape, you move nodes within the shape. With this interaction pattern, I devised the following UX flow to correct model generation errors.
*Flow chart I created for fixing the 3D roofs.
*Figma wireframe of fixing automated 3D roofs; S1 - User click on the node; S2 - User hover arrow that indicate the desire direction; S3 - User hold the click and drag along the desiring axis.
Result
The engineering team built model correction and then I tested it with the users to measure how long it took to complete the roof generation task. We discovered that fixing broken roofs took users longer than starting from scratch with the third-party tool, showing that our system clearly did not meet efficiency goals.
90% of the models taking users 3-5 times longer than expected to fix the roof outlines.
*3D site model generated with auto-gen and edit tool, the image shows user edit the roof in 3D environment
Conclusion
Although users can now fix generations, some parts of the roofs are still occasionally missing, and the roof planes often aren’t cleanly shaped. This makes the correction process time-consuming and a significant effort.
SEC.
/iteration
ALTERNATIVE: GENERATE ROOFS WITh USER INPUTS
Based on our findings, we reimagined our approach. Instead of using ML from the start, we could feed user inputs (user creates roof anchors or outlines) into the model, which would then guide it, enhancing roof generation performance.
I designed and optimized the user experience for this, enabling users to seamlessly create roof outlines which are then used by ML.
Address
manual Define
ML-GEN
manual fix
result
Considerations
The MLE team determined that it was crucial for users to provide roof traces that were precise. The ML model uses the roof traces as its starting point, so large errors in the traces could result in bad roof generations. Further, there were multiple kinds of roof shapes, from simple to complex, that we had to address. For me, that meant creating a roof tracing experience that would lead to good traces across different shapes easily.
I proposed three paths that the team could do:
User arranges pre-defined shapes on 2D maps.
User traces the outline freeform on 2D maps.
Hybrid - User can use both 1 and 2 together based on their needs.
First Approach: Pre-defined shapes
Users define the roof outline using a specialized shapes tool designed to pre-structure key roof elements such as gables, hips, valleys, and ridges. Once defined, users can generate the 3D model with a single action, like clicking a button.
*Selected screen shot of Pre-defined shapes approach flow
Pros:
Efficiency: Pre-structured tools speed up the process by reducing the manual effort needed to define complex roof elements.
Accuracy: The specialized tool ensures roof outlines are precise and aligned with architectural standards.
Cons:
Limited Flexibility: If the tool doesn’t accommodate enough roof shapes, the users might feel constrained or frustrated.
Learning Curve: The tool would require a lot of clicks to navigate properly, increasing the effort to learn / use efficiently.
Second Approach: freeform drawing
Users employ a freeform pen tool to trace the roof outlines manually. In this approach, the users can address different roof shapes most directly and only have to learn one tool.
*Selected screen shot of freeform drawing flow
Pros:
Flexibility: Allows users to trace roofs of any shape, accommodating even highly irregular designs.
Ease of Use: Intuitive for users familiar with drawing tools, requiring little to no training.
Cons:
Time-Consuming: Manual tracing may take longer than working with predefined shapes, especially for simple designs.
Risk of Error: Accuracy depends entirely on the user's tracing skills, potentially leading to inconsistencies in the final generation.
Higher Cognitive Load: Users must be precise and focused while tracing, which could increase fatigue over time.
Third Approach: Hybrid
Users have options. They can outline the roof using the freeform pen tool, which allows them to trace any shape with full flexibility. For simpler or standard roof designs, users can switch to the specialized shapes tool that pre-structures key roof elements like gables, hips, valleys, and ridges.
*Pre-defined shapes approach
Pros:
Flexibility: Having both freeform pen and predefined shapes allow handling of both simple and complex in the right situations.
User Choice: Users can choose the tool that best fits their needs, instead of having to choose one workflow or the other.
High accuracy: The accuracy of tracing is expected to increase with both options available, since users can choose what is most appropriate.
Cons:
Learning Curve: Offering two tools might be confusing for new users without clear onboarding or guidance.
Development Complexity: Supporting and maintaining multiple tools with intelligent features increases technical overhead.
Our choice - hybrid
Based on pros / cons, the hybrid approach was a winner for the user workflow. It empowers users by giving them the flexibility of freeform tracing and the efficiency of pre-structured tools.
Maybe surprisingly, the engineering team determined that implementation was more manageable than the approach using purely pre-determined shapes. As the product was used, the users would provide high quality shapes data using the freeform tool. That would then help engineers build for more and more shapes as our software matured.
Shown below is the flow for the feature.
* The image is the overall 3D roof generation flow
I designed the feature, which the engineers then implemented, and we took it to users.
The feature included several important sub-features which enhanced the user experience, such as:
Snapping tool: Implementing a snapping mechanism where traced lines automatically align with detected roof edges or angles.
Guidance tool: Introducing intelligent guidance, such as visual cues or auto-suggestions, that highlight probable roof planes based on initial user input.
SEC.
/deliver
Developing AND iterating the hybrid approach
Our development process looked like this:
First, I created a clickable demo. I used this demo to facilitate a series of end-user + engineering workshops, where I collected feedback on the experience and feasibility of the feature. Both users and engineers were satisfied with the feature, clearing it for development.
Second, the engineers implemented the feature. I took the implemented feature and conducted testing with 50 internal users who used the end-to-end feature to design and generate roofs.
🙂 You can click into the feature below 👇
Draw Roof Prototype
Generate site model Prototype
SEC.
/Impact
Results
Upon user testing with our 50 internal users, we found success! The new approach significantly improved the usability of roof generation, hitting our defined target for completion time.
increased
95%
usable rate
95% more accurate rooftop models, resulting in higher precision for detecting roof planes and obstructions.
reduced
2-3x
completion time
2-3x faster 3D site model completion compared to previous approaches
site model with ml only
site model with human input
*Both images show a generated 3D site model with obstruction(chimneys)on the roof tops. As you can see, the outline of the roofs on the right hand side is more clean than the one on the left hand side of which roofs are in irregular shapes, and not in line with the actual roof on the map.
Allowing users to manually define the roof edges improved the ML model's generations. With better roof generations, there was far less time required for manual correction, greatly improving overall speed.
/learnings
Lessons Learned
This project offered valuable insights for both successes and areas for improvement. Here’s a sample of what I learned.
01.
Prioritize User Experience in Automation
Even with advanced technology like ML, the user's workflow should always be a top priority. Automating a process is valuable only if it genuinely improves user efficiency and doesn’t introduce more complexity or frustration. In this project, integrating manual tools alongside automation ensured a smoother, more reliable experience.
02.
Iterate Early and Often
In ML-driven projects, frequent iteration and testing are critical. Early testing helped us identify key issues, such as the limitations of the auto-generated roof models, which informed our decision to introduce manual adjustments.
03.
Don’t Fully Rely on Technology
While machine learning offers powerful automation, I learned that it's essential to build flexibility into the product. Over-reliance on ML without manual control can lead to inefficiencies when the model fails. Having a backup plan—such as manual adjustment tools—is crucial for maintaining a functional and adaptable user experience.
