01 - Background and problem
In 2014, Sunrun acquired SnapNrack (SNR) to enhance solar installation capabilities with the goal of making solar electricity the primary energy source for a cleaner, safer, and more sustainable world.
SnapNrack’s main feature, its solar array design tool, had grown to include four distinct tools, each with varying user experiences that impacted usability. To address this, the team approved a redesign project to consolidate these tools into a single, innovative experience. My focus was to develop an industry-first tool that would streamline and transform how installers plan their project arrays.
02 - Innovation requires retrospection (and research!)
SNR had the most design tools to offer but that wasn’t a standout benefit for the users. Because the experiences were so disjointed, there were many questions on an usability standpoint:
Why do you offer 4 different tools? What are their unique differences to the user?
Can some functionality carryover across tools? If so, can these be consolidated?
Here’s an example of 2 of the 4 tools that were part of SNR’s offerings:
Ultra Rail' Configurator and Array Design Tool
TopSpeed Configurator and Array Design Tool
To further understand the current landscape of array tools, I collaborated with the SNR team to analyze competitors’ offerings. We created a list and identified opportunities to improve our experience by addressing existing gaps.
Comparing array design tools between top competitors
The team focused on K2’s array design tool because it was the most unique and different from the rest. Its standout feature was the dynamic inputs, which gave users more control over rail types, attachments, and building code compliance.
Main competitor, K2’s array design experience.
03 - Understanding our users
“What would your ideal array design tool look like?”. To understand this, I conducted zoom interviews with both internal and external users. The interviews revealed 4 key insights:
“Array designing needs to be “broken out of the box”. The current state of tools all feature a limited selection area and doesn’t allow for mixing and match orientations (portrait and landscape orientations and vice versa).”
“Could a tool have all the essential data taken care of? A lot of projects need building code specifications and while a user can look up their local ordinances for data, it’d be great if we could have that on hand already.”
“Need a comprehensive Build of Materials list. At the tail end of all experiences, the tool should calculate exactly how much product I need for my project and what the cost is.”
“Kind of how K2 does it but better. Can we do all inputs and designing in one UI?”
04 - Ideating a New and Improved Design Tool
To kick off brainstorming, I created a product feature roadmap to detail specifics and organize design and development efforts. Prioritizing elements helped me scope out requirements, set timelines, and address key user concerns. Getting stakeholder buy-in was crucial to align expectations for the new tool. Sometimes, stakeholders have strong opinions that don’t match user needs, so I can include those ideas on the roadmap but not as top priorities (sorry, Andrew).
The user experience revolves around the primary task flow of creating a solar array and finalizing a bill of materials (BOM) for the project. When creating the user flow, I ensured that each step was streamlined whether a user is starting from scratch or returning to a work in progress.
One of the biggest challenges was combining all four design tools into a single, cohesive experience. Each tool had its own quirks and unique features. I set up a few working sessions with the team to figure out how to merge them. After working through it together, we mapped out the must-have features for our vision and decided which functions could wait until after the MVP. We’ve also identified a few functions that could be sunsetted entirely based on existing usage data to further streamline the experience.
Information architecture sessions resulted in the final list that would make it into v2.0.
05 - Wireframing
I put together a wireframe based on what I’d learned from our research. My aim was to leverage the best features from competitors and fix their weaknesses, all while keeping our target users in mind. This inspired me to create a clean, user-friendly interface with a focus on:
Open interface to allow for maximum real estate to create arrays in all configurations on one screen
Inputs and tools to fine tune details of railing, attachments, and measurements
Building data that laid the foundation of the project
Ability to toggle between all 4 tools within SNR’s system
This version of lo-fi wireframes allowed me to consult with users and the team to discover the priority revisions that need to be implemented before I iterate in more detail. When considering the needs and requirements after review, Figma came to mind right away. Its free-flowing canvas, multi-user support, and informative toolbars seemed perfect for a solar array tool. I also looked into other interfaces with similar designs for inspiration.
I referenced Framer, Pitch, Rive, and Jitter for UI inspiration.
Updated wireframes capturing all the essential functions in an open canvas setting.
06 - Hi-fidelity exploration
The first hi-fidelity prototype was designed to include a few preliminary steps to optimize the project. More specifically, I designed it in a way that the tool asks a user to select a racking system, a solar module, and a panel model to start the project. The reasoning behind this was to add a few steps ahead of time to get a jump start on designing the arrays. Project details, project address, and company name were also included to pull building code information and prefill many of the inputs automatically.
Users first select the racking system, solar module, and array model to start.
Users are then dropped into the main UI to start designing their arrays.
07 - Essential revisions BEFORE BETA TESTING
Building it natively in the Blueprint environment so it can live as a truly standalone product vs. iFrame
Moving the toolbar out of main canvas and into its own section at the head to free up the canvas
Better grouping of input categories to decrease mental load
BOM calculations showing up live while arrays are being designed
Autosaving feature at time intervals
Final hi-fidelity design that went on to beta testing.
To test the design, our engineer created a working beta version that had all essential functions available. We had a unique opportunity to do guerilla user testing at the RE+ 2024 expo in Anaheim. The team set up a few computers at the booth and had users interact with it and give live feedback.
One of the universal highlights was the evolved click-and-drag designing functionality. Many users loved how it was freeform and not constrained to the typical box grid set up found in current tools. They also raved how you could now design arrays in portrait or landscape in the same project.
Another big hit was our appcue-like tutorials built into the hover states of the toolbar icons. Users said that because this was a completely new experience, they appreciated the walkthroughs each tooltip highlighted.
08 - Consolidating feedback and getting closer to launch
After the show we consolidated user feedback with the greater team and included them in the final design. Here is a list of the top 3 updates:
Added more categorization in the specs column (right side). Users appreciated the specifications but there was a level of detail that was missing that would’ve been vital to their projects.
The hover state tooltips were a big hit so they were scoped into the MVP. It was originally intended just for the beta testing sessions but users gave positive feedback to the helpful tips.
Smoother UI updates when you swap between the 3 racking systems. Even though it was in a beta state, users noted the delay when you swapped between the different systems. The 4th tool was de-scoped and dropped from the project due to lacking popularity and to divert resources to refine the other 3.
Final design of the design tool 2.0.
Final design of the calculated bill of materials.
09 - MVP!
We are now in the final QA and UAT phase of development and are looking forward to launching the new design tool to our subscribed user base. We’ve gathered valuable feedback from both internal and external testers, which has ultimately led to a better UI, an improved user experience, and a more focused approach to building this product.