Claudia Molina
Product designer / Visual designer

PWRview

Mobile app

Image alt tag
PWRview

Getting off the grid: When homeowners purchase a solar battery system, the companion PWRview app allows them to monitor their solar power generation, energy consumption, and battery storage.

Role: UI design, interaction design, animations, prototyping

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

Tools: Figma, Sketch, InVision, After Effects

Technology: React native

Context

PROBLEM

Keeping a pulse on your home energy

For optimal performance, energy storage device needs to be monitored and managed. Users want to have visibility into their consumption and they want to be prepared for power outages.

GOALS

Design an app that allows homeowners to monitor and manage solar and battery (storage) systems. The app should allow homeowners to spot problems and confirm that their system is working as expected.

PWRview is a new entrant in a market where the competitors had been around for 10 years. Instead of building quantitative analytics for our advanced KPIs, we focused on fundamental functionality that homeowners needed to monitor their systems and decided on a qualitative approach to evaluating our metrics.

METRICS:

  • How long does it take for a homeowner to identify and fix a problem with their system?

  • How many homeowners have optimally configured their system for their energy usage and energy prices?

  • How many homeowners make it through an outage without losing power?

TARGET USERS

Homeowners who require uninterrupted power. They either want to be independent or live in remote locations where the grid is not reliable. They might also live in areas prone to weather storms.

Solutions overview

Home energy flows

Home energy flows

Main features

HOME ENERGY FLOWS

Energy activity at a glance

The home consumption screen visualization displays energy flows between their solar power, battery storage, grid, and home.

Gives users an at-a-glance understanding of their home’s energy usage. It provides the necessary data required to take action and also save on energy costs.

History screen

History screen

Main features

HISTORICAL DATA

Usage trends

Users can view their average consumption over time. Charts display historical and current data for their solar power stores, battery storage, grid, and home. 

Disaggregated view

Disaggregated view

Main features

DISAGGREGATED VIEWS

Consumption behaviour

Users are able to add appliances or vehicles and view disaggregated data for each item. This overview allows users to identify where energy is being used in their home, while observing cost trends.

Process
Our collaborative sketching sessions created common understanding from the start.

Our collaborative sketching sessions created common understanding from the start.

USER FLOWS

We worked collaboratively in sketching sessions to explore how users experienced the features. We sought efficiency by bringing well-defined user stories and requirements to sessions. Through this process, we found common understanding.

WIREFRAMES

Creating wireframes helped us to:

  • Align with the product manager and understand their vision.

  • Validate ideas and get feedback early from stakeholders.

Early explorations

PERSONAS

We identified two primary personas based on interviews with the installers of the systems. We also knew that we were designing for both types of users, novice and experts.

Storm-riders

Storm-riders

PERSONAS

Storm-riders

(Florida, South East, CA, Hawaii, Caribbean, Middle East)

Interested in comfort and want a worry-free power source, no matter the situation.

They find peace of mind in not having to worry about whether they can ride out an outage.

Their goal is to supplement short-to-mid duration outages with their own energy supply, and maintain most household operations.

Doomsday-preppers

Doomsday-preppers

PERSONAS

Doomsday-preppers

(Outside the city, rural and remote locations)

They want to be prepared for civil unrest and grid instability.

Their goal is security, self-reliance, survival, and independence.

They find satisfaction in not being dependent on utilities for energy. They permanently run households independently from the grid.

Defining the visual design
PWRview

MOOD BOARD

We started from the ground up: we first created an overall brand. We had a workshop to agree on what words best describe the desired visual design direction.

These words informed the mood board and subsequent direction of the design:

Approachable 
Instinctual 
Actionable 

Created colour palette

Created colour palette

DEVICE + DATA COLOURS

Colour was used to ease navigation throughout the app, to help users identify their devices and data. This visual approach helped organize data and emphasize the functionality.

We kept the UI (global menu, sub-navigation, tabs, and headings) neutral to ensure that colour was only used for devices and their data.

I created the icons

I created the icons

Grid icon explorations

UI DESIGN / PROTOTYPING

Once wireframes were approved, I designed the screens. The initial focus was on creating UI patterns, which was the foundation of the PWR design system.

User testing was completed with high-fidelity mockups. It was my responsibility to have the prototypes ready for testing.

Visual design:

  • The visual style was light, modern, and approachable. It embraces simplicity and focuses on what's meaningful.

  • We followed iOS design guidelines. The app was released on the Apple App Store and Google Play.

Initial version

Product findings
Home screen

Home screen

LEARNINGS

When we released the first iteration of the app, customer support received a lot of questions regarding the energy flows on the home screen. Homeowners didn’t understand how to interpret the information and what it all mean for their home.

We gathered the questions that came through customer support and looked for patterns on the feedback.

Through user interviews, we discovered that homeowners wanted to know:

  1. Their current home status.

  2. Was there enough power to get them through an outage?

  3. If not, what type of action could they take.
    The app should tell you if there is a risk or an improvement you can make.

New solutions

New features

1. DISPLAY HOME STATUS

Performance at a glance

In response to homeowners' need for visibility of their overall home well-being, we created a new feature, which summarizes their home status.

The different states were:

  • On track

  • Poor performance

  • Warning error

  • Unknown state (edge case for API failures, or not enough data available)

Approved designs

Home status initial design explorations

New features

2. STORM PREP

Ready for outages

In response to homeowners feedback and to meet their needs, weather forecast warning was integrated. Homeowners are now notified about potential outages relating to weather events. Storm prep is an automated feature. It ensures that the batteries are charged up before a storm.

New features

3. LOAD CONTROL

Safety and security

Homeowners are able to see how much battery power is available during an outage and manage their circuits.

We provided a control panel that allowed homeowners to override the hardwire priorities of the circuits. Low priority circuits could be shut-off automatically by the system when needed or manually by the homeowner.

Approved designs

Load control design explorations

(approved version separated the state from the control)

Results

PWRview is a new entrant in a market where the competitors had been around for 10 years. The team prioritized supporting the new hardware releases and addressing urgent homeowners’ feedback.

Instead of building quantitative analytics for our advanced KPIs, on the new version of the app, we focused on adding fundamental functionality that homeowners needed to control their systems and took a qualitative approach to evaluating our metrics.

How long does it take for a homeowner to identify and fix a problem with their system?

  • Initial version: Homeowners had to explore the data.

  • New version: Problems and insights are surfaced on the home screen.

  • Future version: Homeowners would receive a notification when there's an issue.


How many homeowners have optimally configured their system for their energy usage and energy prices?

  • Initial version: Homeowners were reluctant to use their battery for energy savings because it might not be ready in an outage.

  • New version: Homeowners could use their battery for energy savings and be confident their system is ready for an outage (Storm prep).

  • Future version: We would automatically configure their system for them.


How many homeowners make it through an outage without losing power?

  • Initial version: Homeowners could see how much energy was left, but not how long it would last.

  • New version: Homeowners can see how long their battery will last and can turn loads on/off from the app to extend their range.

  • Future version: We can automatically manage loads in the house to make it through the outage.