Solar & heat design software

Providing clarity, structure and UX consistency through a user-centred design system

Project type: Design system construction
My role: Lead designer
Status: Live
Outcomes:
Streamlined workflow | Provided visual clarity | Improved user retention | Built UX consistency | Facilitated long term maintenance
left arrow

Context

I led the creation of a full design system for Easy PV and Heatpunk, two SaaS platforms, one for solar-design and one for heat-design, used across the UK and Ireland by sales teams, engineers, and installers to plan, cost, and document PV adn heat systems - from small domestic systems to industrial commercial installations.

When I joined, the UI had grown organically, built by engineers with no formal design input. The products were powerful but increasingly hard to use and maintain. Inconsistent components confused users and slowed onboarding, developers were rebuilding patterns from scratch, and there was no shared source of truth for layout, spacing, colours, or interaction.

Because both softwares were widely used in a critical infrastructure domain, this wasn’t just a visual refresh - it was a structural fix for scalability and reliability. The new design system brought clarity, consistency, and long-term maintainability to a platform relied on daily by thousands of installers and engineers.

“the UI had grown organically, built by engineers with no formal design input. The products were powerful but increasingly hard to use and maintain.

Before the update
left arrow
After the update
left arrow

Research

I ran a focus group with internal stakeholders to define key design principles - Easy, Friendly, and Comprehensive - and understand product goals. To ground the system in real usage, I conducted interviews with installers at a solar trade event and developed three core personas. These captured user environments, workflows, and pain points. 

gigawatt screenshot

Goals

  • Introduce a unified visual and interaction system across the platforms
  • Streamline development through reusable components and tokens
  • Improve UX consistency, especially in complex, technical workflows
  • Reduce design ambiguity and UI-related bugs
  • Lay the foundation for future design hires and documentation
  • Ensure the system reflected the brand’s core brand values of being approachable, professional, and comprehensive — supporting both technical and non-technical users
  • Allow the system to adapt to fit each product’s brand and tone differences; Easy PV focused on a friendly tone, whereas Heatpunk had a more technical aesthetic

Process

1. UI Audit & Pattern Inventory

I reviewed every screen in the product, cataloguing all visual inconsistencies and repeated components. This included dozens of near-identical button styles, an inconsistent use of system components, and a complete lack of any spacing or structural systems.

2. Foundation Design

I defined a new visual language:

  • Set a consistent type scale and modular spacing system
  • Created iconography rules and updated key status indicators
  • Defined consistent breakpoints for responsive design
  • Created flexible tokens — such as variable colour palettes and border radii — to allow each product to maintain a distinct visual voice while sharing the same structural foundations

3. Component Library

Working closely with engineers, I designed and documented a comprehensive set of components in Figma: buttons, inputs, dropdowns, tables, tooltips, etc. Each was built with accessibility and real-world edge cases in mind. Components were versioned and synced with development via a shared token system. I wrote detailed usage guidelines to reduce ambiguity and ensure alignment across design and code. To accelerate adoption, I also developed basic HTML/CSS prototypes for key components. This helped bridge the gap between design and engineering, especially given the team’s lack of prior design collaboration experience.

4. Gradual Rollout

We integrated the system incrementally into the live product. I prioritized high-traffic pages and new features first, then worked backwards to refactor legacy sections without delaying the general development roadmap.

Easy PV
left arrow
Heatpunk
left arrow

Challenges

  • Getting early buy-in from developers who had never worked with a design system
  • Balancing ideal UX designs with the technical limitations of the existing codebase
  • Avoiding perfectionism – shipping a useful v1 quickly and improving over time
  • Ensuring accessibility and clarity for a wide range of users, from tech-savvy engineers to admin staff

Impact

  • Reduced developer time spent on UI work
  • Cut visual and interaction inconsistencies
  • Enabled faster onboarding of new developers through shared design documentation
  • Improved visual clarity and usability for core workflows, including roof mapping, documentation management, and solar mapping/inverter allocation.

Reflection

This project deepened my belief that good design isn’t surface-level – it’s a structural investment. I learned how to deliver design value in a highly technical product space, balancing clean visuals with functional depth. It also reinforced the value I place in field research. Talking directly to users helped me shape a system that worked for both engineers and admin staff. If I were to do it again, I’d integrate more regular user validation early on.

Tools

Figma, HTML, CSS