Easy PV

Easy PV is a solar installation system design software (SAAS) used by installers when specifying and quoting solar panel installations for customers. It helps them through the entire process, from structural and financial calculations to building kit lists and schematics to quote proposals for their customers.

The brief

When I started as a UX/UI designer working on Easy PV, the team had never had any designer work on it before. The project brief was to build and implement a new, cohesive, professional design system for Easy PV.

I worked on this project with another designer who started shortly after me. Whilst their primary focus was largely on road mapping the future of Easy PV and my primary focus was on building and implementing the design system, we collaborated on both sides of this project.

A reusable design system

Easy PV has a sister software called Heatpunk, which has a similar purpose for heat pump installers. It also has several clients using their own enterprise-styled version of each site.

It was important to build a design system which could be flexible enough to be used for both Easy PV and Heatpunk, whilst also embodying the individual character of each, and working for all existing and future enterprise-styled versions of the site.

Research

First, a focus group was carried out with the primary internal stakeholders to understand their perception of Easy PV, and second, primary research to build personas based on the actual users of Easy PV.

Focus Group

A focus group carried out with the primary internal stakeholders uncovered the following key points:

• Primary software character parameters of ‘Easy’, ‘Friendly’ and ‘Comprehensive’ were defined.
• It was noted that too technical a UI would be unhelpful for a less tech-savvy customer base.
• Of the three proposed design directions, two were preferred for their professional direction, but the bubbly, blockiness of the latter was preferred stylistically.

Personas

Short, in-person interviews were carried out at a trade show to gather data on a large number of individuals, how they work, and how they use Easy PV. This was used to build three personas which could be used to design for when building and implementing a design system. Defining, for example, what device they used, what order they carried out tasks, what tasks they completed, and generally their main goal when using Easy PV.

Although there was a fair amount of variety in how individuals used Easy PV, grouping them into three personas helped us build designs which always worked for a large portion of our users without getting hung up on any specific individuals' needs.

Gigawatt

Having built up a large base of research, I set to work building a comprehensive design system which would ensure the identity of Easy PV whilst also working to make it as usable as possible for our customers.

First, components were built in Figma. Build as 'components', they could be used repeatedly in their different variants to keep all designs consistent and refined.

When building components, their implementation was considered constantly. When a component was required, all future locations within Easy PV (and Heatpunk) where it might be required were considered. It was vital to ensure all designed components were future-proofed and designed around all their potential uses.

Development

To assist the developers in the transition process, I programmed many of the basic components from scratch in HTML, CSS and JS. The developers could then take them and transfer them into Easy PV itself.

Implementation

Over time, I became the primary designer on Easy PV, and all implementation of the Gigawatt system fell to me. Designs were built for each page within Easy PV and implemented by the developers. As the software was updated and changed, designs were built as and when they were needed.

Accessibility

A key element within the implementation of Gigawatt and updating of Easy PV was the accessibility of the software. One section in particular has been a constant struggle for users. The 'Inverter Allocation' where specific solar panels needed to be grouped together, with a possible two levels of subgroups. Previously, this had been done using colours and variants within this, however many users struggled with differentiating these.

A proposal was made to update these to use better contrasting colours and more varied patterns to improve distinction. However, I had reservations about whether this would be a comprehensive and holistic solution, for example, whether we would need a colour blind mode. So several different options for these groups were built, using a variety of colours, numbers, labels and patterns. These were then used in a test study focus group with several users who were colour-blind, and several users who were not.

This gave vital information on which visual cues would be more effective, and a solution was implemented with an optional colour blind mode. Optional because users without colour blindness found the labels slowed down their recognition, whereas for colour-blind users, it increased. As a large number of our users are unlikely to be colour-blind (you cannot be an electrician in the UK if you are colour-blind), it was important to keep these two modes separate.

Heatpunk

Gigawatt was not only implemented within Easy PV but also in its sister software Heatpunk. Heatpunk has a slightly harder, edgier character, so the bright bubbly character of Easy PV would not fit. Because of this, Gigawatt was designed with several variable characteristics, primarily colours and border radii. Allowing Heatpunk to keep its sharper, bolder character using just a CSS stylesheet and a few variables in Figma. But also allowing for quick transfers for pages which are nearly identical on both sites.