Nowcasting

Hack4Impact

Role
UX Designer

Tools & Skills
UX Research, User Interviews, Figma, Wireframing

Timeline
Jan 2023 - May 2023

Team
Leads: Eric, Andrew

Designer: Kalyn

Devs: Anya, Neha, Rohan, Ashay, Jacky

Based in the UK, OCF is a non-profit dedicated to bridging the gap between the energy industry and researchers working on climate change. Nowcasting, a product from OCF, aims to deliver real-time insights for solar panel homeowners.

Overview

Unreliable and inaccurate solar data causes solar panel users to tap into gas reserves if their energy is not utilized properly. This is both cost ineffective and bad for the environment!

Problem

Solution

Real-time and actionable insights via a personalized dashboard.

HOW MIGHT WE…

…help users better understand and be interested in their solar data?

…effectively translate their data into actionable insights?

IDEATION (SKETCHES)

After meeting with our client, we discussed and highlighted priority features to design:

  • Process for inputting their solar site’s details

  • Dashboard that delivers actionable metrics

  • Adding a site and editing existing sites

Due to time constraints and this being a dev-heavy project, we had to sacrifice initial user research. Instead, I dove into ideation and designing that I later assessed during usability testing.

DASHBOARD

I ideated some possible modules such as key performance indicators, a visual graph, and a detailed graph to empower actionability.

WIREFRAMING

DASHBOARD

When designing this dashboard, I drew inspiration from existing weather, productivity, and finance applications.

The ‘Solar Activity’ portion contained information about sun patterns throughout the day, and the ‘Metrics’ portion informed the user about their panel’s output.

INPUTTING SITE DETAILS

Here users will be able to input the details of their solar site such as where it is located and the direction, tilt, and capacity of their solar panel.

ADDING AND EDITING SITE DETAILS

At a glance, users can view all of their sites at once.

Designing in dark mode was not only a part of OCF’s design system, but we realized it was also critical for readability and contrast.

INPUTTING SITE DETAILS

Inputting details is a simple, segmented process.

Tooltips and help functions are available for users who are unfamiliar with their site’s details.

ADDING AND EDITING SITES

Users are able to view a list of their sites and its key details at a glance. The buttons in the top right allow them to add additional sites or edit existing site details.

USER TESTING RESEARCH

We interviewed four users across various levels of understanding of their solar data. We did this to gauge the effectiveness of our design for users who are unfamiliar with their data and users who are already well-versed in it.

Along with asking some preliminary assessment questions…

  • What’s the extent of the data you have access to about your sites/panels? How do you use this data?

  • Is there a reason you aren’t able to determine some of your solar site’s solar-related attributes, like direction and tilt?

  • What decisions do you have to make about the function of your solar sites?

…we also utilized A/B testing to assess whether or not the modules presented are accurate and intuitively laid out.

Here were some insights from our interviews…

✅ What they liked:

  • The module that tells the user what appliance can be ran right now

  • A visualization of sun movement and energy output

  • Both generality and granularity in the metrics for those who need at-a-glance details and those who want to dig deeper

🤔 What we could improve on:

  • Phrases like ‘Solar Activity’ and ‘Metrics’ are unclear

  • The site detail input process doesn’t account for certain nuances and is missing key details about users’ inverters

  • The dashboard had unnecessary information (e.g. percent yield) and was missing key metrics about future forecasts and outputs

ITERATION

After our interviews, I went back and iterated on the current design. A big focus was clearing up that lack of clarity for both the detail input process and the dashboard. I also darkened the input fields and modules to boost contrast.

INPUTTING SITE DETAILS

Because there was overall confusion during this process, I included additional tooltips and help links to guide users who are unsure of their site’s information. We were made aware that users need to also link their solar inverters. The team integrated a third-party service (Enode) to link those. To account for this, I designed an inverter selection process once the user had linked their inverter(s).

DASHBOARD

Users expressed wanting to see more details on future output/forecasts. I changed the gradient graph so that a user can swipe it to view tomorrow’s forecast. Along with this, users wanted to see solar output across the next few days, so drawing inspiration from weather apps, they can view that under “Expected daily output.” Lastly, I aimed to clear up vague labels by replacing “Metrics” with “Forecasted output.”

ADDING AND EDITING SITES

Here, users are able to see a glanceable graph of their solar output on the “Sites” page. The “Edit” and “Add a site” functions were adjusted to make it more standard and intuitive to users.

TAKEAWAYS

This was my first time working with a team of developers, and it was such an insightful experience. I learned a lot about design through the developers such as the difference in standards for mobile versus web design, design kits like Chakra UI, etc. I felt the challenge of having to ditch certain design ideas due to time constraints and project scope, but this challenge helped me think creatively despite limitations.

In addition to collaboration, I learned that my passion for design is truly driven by how impactful what I am designing is. This product is out there being used by real people and mitigating the effects of climate change! Through this, I realized how important it is for me to be working towards a greater cause and to find social value in the work that I do.