The Solar Design Optimizer (SDO) Redesign
Background
Sungevity, a leading residential solar company, relied on its desktop application, the Solar Design Optimizer (SDO), for designing solar systems and generating permit-ready plans.
The app was feature-rich, but it had significant usability challenges for its users, the Solar Design & Engineering team. The cluttered interface and difficult navigation hampered their efficiency and productivity. Despite plans for a redesign, Sungevity's closure in 2020 left these issues unresolved.
Personal Initiative
Even though Sungevity ceased operations, I saw an opportunity to reimagine the SDO interface. My goal was to highlight the transformative power of user-centric design and how it could have revolutionized the SDO experience. I utilized pre-closure user feedback to ensure the redesign addressed real pain points and needs.
“Line Diagram” screen: original state
The Challenge
Business Opportunity
North Star Goal
User Feedback
While at Sungevity, I actively gathered user feedback through continuous communication, using channels like chat, email, and in-person discussions. Archives of this qualitative data I saved were analyzed and organized using affinity mapping to pinpoint key pain points and prioritize areas for improvement.
Visual Usability Audit
I conducted a thorough audit of the SDO interface, evaluating elements like color, typography, layout, and accessibility against a design checklist. This helped identify visual inconsistencies and usability barriers hindering the user experience.
Analysis
Users consistently reported difficulties with readability and eye strain, highlighting deficiencies in the color palette and typography.
The cluttered layout made it difficult for users to locate tools and understand the app's organizational structure.
Lack of visual hierarchy and button differentiation slowed task completion and increased cognitive load for users.
Addressing these key issues emerged as clear target areas needed to enhance usability and user satisfaction.
Strategic Starting Point
I chose the Structural screen as the starting point for the redesign due to its high concentration of user pain points and design challenges, including:
Ineffective top menu navigation: lacked clear hierarchy and distinction from the main content.
Poor readability: ineffective color scheme and uniform text styles.
Densely packed layout: tightly clustered components.
This screen also featured a high number of reusable components, such as input fields and buttons.
By crafting effective solutions on the Structural screen, I could establish a scalable blueprint to be applied across the entire app.
Structural screen: original
Initial concept for side bar nav
Initial main content layout
Arranging input fields
After pinpointing color and typography as key factors in boosting readability and usability, I dove into refining these elements. I tapped into Sungevity’s existing style guide. This strategy had dual benefits:
Brand Alignment: Ensuring the SDO user experience matches the company’s upbeat vibe.
Enhanced readability: Sungevity’s color palette is ideal for enhanced readability, as well as meeting WCAG color contrast accessibility standards.
Typestyles for tablet and mobile were created for future-proofing, should the SDO ever expand to mobile devices.
Input fields and buttons underwent extensive iterations to enhance readability and visual distinction, reducing cognitive load and minimizing user error.
Input fields focused on allowing the user’s eye to easily find and read the labels and field text. Buttons were categorized and visually differentiated to improve clarity and eliminate confusion.
I leveraged Figma's component variants to rapidly iterate and fine-tune, always testing and tweaking based on how they performed on the full screen layout.
I tackled the usability issues of the Structural screen head-on through iterative design. The initial cluttered layout and unclear input fields presented a challenge.
By strategically streamlining navigation, refining input styles, and merging the Roof Plane and Array sections into a cohesive, tabbed layout, the screen transformed into a more efficient and user-friendly workspace.
Roof 1 Screen
Roof 2 Screen
Before/After Highlights
Sidebar Navigation: Unused space was transformed into a functional sidebar with expandable menus. The crucial 'Update Drawing' button is now visually prominent, ensuring it's readily available for synchronizing updates.
Enhanced Tab Management: Add and delete buttons in the tabs with interactive states reduce frustrating accidental deletions. Removed the rarely used ‘Copy’ button to streamline workflows.
Streamlined Layout: The Roof Plane and Array sections are now combined into one clear container, simplifying the navigation.
Upgraded Input Fields: Input fields now have more breathing room and aligned columns for faster, more accurate data entry - essential for keeping projects on track.
Key Features Logically Relocated: The 'Solar Access Measurements' table (previously in the modal) and 'Build Mount Detail' button (now in the modal), are located according to their related workflow.
Array Builder Modal
Racking Calculator Modal
Before/After Highlights
Array Layout Modal
Intuitive Layout: Fields and buttons are now grouped into distinct, labeled sections ("Modules" and "Rafters") for a more focused and streamlined workflow.
Intuitive Slider Control: A new slider control replaces the old left/right buttons, giving the user smooth, precise control over rafter positioning.
Racking Calculator Modal
Logical Task Flow: The "Select Array Row" button - the first step in entering table data - is now front and center, making the task flow more logical and efficient.
Interactive Table: Drag and drop rows to reorder them, or delete them with a single click. This allows for easy customization of the table to fit individual workflows.
Logical Button Relocation: The “Generate Mount Detail” button, previously on the main screen, now lives in the modal, keeping related tasks together and reducing clicks.
Before/After Highlights
Vertical Layout Reorganization: Information now flows from top to bottom, mirroring the natural task progression for a smoother workflow.
Logical Button Grouping: The 'Pre-Configure' button and related options are now conveniently located together, making a more intuitive workflow.
Visible Calculation Tools: Prominent buttons for Raceway Fill and Voltage Drop calculators enhance discoverability and streamline the setup process.
In-line Editing in Equipment Table: Introduced in-line edit and delete buttons within each table row, increasing workflow speeds and reducing accidental deletions.
Drag Handles for Flexible Reordering: Added drag handles with drag-and-drop functionality for quick and flexible adjustments, eliminating the previous cumbersome process.
Distinct Buttons: Updated the "Add Equipment" and "Draw ELD" buttons with distinct styles for clear functionality, speeding up task execution.
Before/After Highlights
Uniform Field Lengths: Standardized field sizes simplify the interface, making it easier and quicker to compare systems.
Intuitive Section Titles: Updated the section titles (“Sold System” and “Installation-Ready System”) to more accurately reflect their content, improving user understanding of the screen layout.
Corresponding Aerial Images: Added aerial image fields to both system sections for direct visual comparison, allowing users to quickly assess and verify changes, enhancing accuracy.
Streamlined User Interface and Workflow: Removed the redundant “Calculate” button and grouped related sections, decluttering the interface and improving workflow efficiency.
Redesign Results
The redesign of the SDO is projected to significantly boost productivity. Based on mock task completions I conducted within the redesigned interface, compared against historical data, we can project:
15% increase in the number of plan sets completed per month.
5% increase in the first submission approval rate.
In a real-world environment, similar to my work at Sungevity, the redesign would be refined further through usability tests, iterating based on user feedback to drive maximum user satisfaction.
These improvements are expected to greatly enhance the user experience, offering a streamlined task flow and an easier-to-navigate interface, complemented by visually appealing design.
