Claudia Molina
Product designer / Visual designer

PWRfleet

Web app

PWRfleet

Solar installers have a high cost of operations management. PWRfleet makes it simple for installers to monitor multiple sites. 

Role: UI design, interaction design, prototyping

Team: Product manager, UX designer, and Software development manager

Tools:
Figma, Sketch, InVision

Technology: React

Context

PROBLEM

For solar installers, target revenues are not attainable without the ability to closely monitor a large number of sites and rapidly respond to issues.

GOALS

Design an app for managing a fleet of solar and battery (storage) systems, as well as other home devices such as energy meters and load control panels.

The app should allow installers to rapidly spot problems such as misconfiguration and equipment failures. It should analyze and report on the performance of each site.

TARGET

Medium and large solar installers (50-500+ sites/year) 

These users work in larger organizations and are part of a team dedicated to monitoring the performance of an installed fleet.

Solution overview

Fleet dashboard

Fleet dashboard

Main features

FLEET DASHBOARD

Performance at a glance

Reduce the time spent monitoring the fleet to minutes, with a quick view of the installed fleet, visualized on a map.

All sites view

All sites view

Main features

ALL SITES

Finding sites with critical issues

Installers can sort the site list by alert level, surfacing sites that have critical alerts and allowing them to prioritize their support work. 

Individual site dashboard

Individual site dashboard

Main features

SITE DASHBOARD

Rapid troubleshooting

No more time wasted triaging issues on the phone. PWRfleet gives installers a live view of each site, surfacing the status and recent performance in a simple, digestible manner. 

Same talented team. Same collaborative process.

Same talented team. Same collaborative process.

Process
PWRfleet

PERSONAS

The product manager identified 3 main personas based on interviews with solar installers at the beginning of the project. 

  • After the interviews, our assumptions were confirmed. We were designing for hardware technicians who needed to identify issues in their installed sites quickly.

  • Monitoring needed to be tailored to different installers. We needed to offer deep customization for installers to choose the relevant data.

PWRfleet

PERSONAS

Support / Operations Manager

These users are technicians and are part of a team dedicated to monitoring the performance of an installed fleet.

They work at a desk in an operations room, but might also be working remotely. Their equipment is likely a desktop computer, possibly with multiple screens. Their sites can be located state-wide or nation-wide.

Their main priority is to triage and prioritize support as well as maintenance requests.

USER FLOWS

Here are two of the user flows that we devised before wireframing. The UX designer owned and led the UX sessions. 

Wireframes

Wireframes

WIREFRAMES

  • Wireframes were particularly helpful to get the information that needed to be on each screen. 

  • The UX designer made the low fidelity wires.

  • These were very useful for me to start designing the UI.

Defining the visual design
Snapshot from moodboard

Snapshot from moodboard

MOODBOARD

We built on the visual design I created for PWRview and together we defined the words that would best describe PWRfleet. We needed to appeal to installers and support managers rather than homeowners.

These are the words that informed the visual design and overall design direction.

Practical
Actionable
Approachable
 

We used the same colour palette I designed for PWRview

We used the same colour palette I designed for PWRview

DEVICE + DATA COLOURS

I expanded the colour palette created for PWRview to accommodate more detailed charts with extensive data.

Interactive prototype

UI DESIGN / PROTOTYPING

After the wireframes were approved, I started designing the screens in Sketch. I created the desktop version first. Our users are 99% desktop users.

We tested with high-fidelity mockups. It was my responsibility to create and have the prototypes ready for testing.

  • The visual style followed the visual design I created for PWRview.  

  • We made the design simpler, more practical and more accessible. 

  • The final design reflects the vision we had in mind. Simple and effective monitoring for installers and support managers.

    Desktop prototype

Results

LEARNINGS

We had productive sketching sessions as a team. We could have benefited from more user research and sketching sessions with our users. 

InVision is limited as a prototyping tool. We could have benefited from a more robust prototyping tool. 

We wished we had data to inform the design. This was a brand new app and we could have benefited from a more data driven Lean development approach.

2
Iterations
151
Screens
9
Weeks
"Claudia is a highly talented UI Designer, and I have been very fortunate to work with her over the past year. She joined our company as our only UI Designer and has done a great job of educating us on the design process and best practices. She has plenty of versatility with her design style and can tailor it to the specific persona and customer-base of focus. She does a great job of taking feedback from many stakeholders and synthesizing that into several unique options for a design."
Chris Hennig, Senior Software development manager at Generac Power Systems.