Grid usage
Overview
I led the design of the “Export and import” feature from 0-1, from researching the problems to designing for implementation. Showing solar panel owners their grid usage will help in two ways:
- Showing users that our Zoa USP (Optimisation) is working in their benefit by making them money
- Allowing users to track their break even point throughout the year to ensure them they have made the right financial investment in their energy set up.
- Showing users that our Zoa USP (Optimisation) is working in their benefit by making them money
- Allowing users to track their break even point throughout the year to ensure them they have made the right financial investment in their energy set up.
What roles did I play?
- Feature research
- Usability testing
- Delivery
- Usability testing
- Delivery
Problem
Although our product showed users their all time savings for their hardware, there was no where that a user could see a breakdown of their actual grid usage, both their exports (earnings) and imports (spending) behaviours.
We had a few insights coming in from our users that initiated this feature discovery:
- Our users wanted insights into their spending and earnings before their monthly bill
- Users found monthly bills difficult to read and comprehend, especially in understanding how their behaviours aligned with their tariff rates
- They wanted to understand the difference in break even points throughout the year
- They didn't have an good understanding of the everyday impact of a tariff price
We had a few insights coming in from our users that initiated this feature discovery:
- Our users wanted insights into their spending and earnings before their monthly bill
- Users found monthly bills difficult to read and comprehend, especially in understanding how their behaviours aligned with their tariff rates
- They wanted to understand the difference in break even points throughout the year
- They didn't have an good understanding of the everyday impact of a tariff price
Business goal
As these insights had been coming in, Zoa noticed an opportunity to both address some common user needs while also showing off our point of difference product. Our optimisation engine makes intelligent decisions throughout the day based on the price of the tariff.
User research
I looked existing tools in the market to identify best practices and gaps in current solutions. A recurring theme was the need for clear, real-time visualisations that differentiated between import and export flows while providing actionable insights. Users also expressed a preference for toggles or filters to focus on specific timeframes or grid segments. These insights shaped my approach to designing an intuitive, data-rich interface that prioritised clarity and usability.
During my research, I noticed a clear gap in the market: existing products were overwhelmingly data-heavy, catering primarily to experts and early adopters (the data lovers).
We wanted to break away from this trend by creating simple, accessible data visualisations that anyone could understand. Our goal was to make grid imports and exports intuitive, ensuring that users didn’t need a technical background to grasp what was happening.
Design decisions
Decision 1: Less is more
One of the key design decisions I made was rooted in the principle that "less is more." We chose to be intentional and precise about how much information we displayed on each page, focusing on clarity and direct communication.
Instead of overwhelming users with layers of data, which can dilute understanding, we prioritised simplicity and focus. By presenting only the most critical information at the right moment, we ensured that users could quickly grasp the insights they needed without distraction.
Instead of overwhelming users with layers of data, which can dilute understanding, we prioritised simplicity and focus. By presenting only the most critical information at the right moment, we ensured that users could quickly grasp the insights they needed without distraction.
Decision 2: £ is the most understandable metric
Although we think of battery, solar and grid all in kWh. Thats not how the everyday person considers their usage. The only comparison device they have is their monthly bill in relation to the cost of their energy set up.
During usability testing, it became clear that presenting data in terms of £ was far more relatable and actionable. By framing insights in financial terms, we bridged the gap between technical energy metrics and what truly matters to users, ensuring they could easily understand and connect with their energy data.
During usability testing, it became clear that presenting data in terms of £ was far more relatable and actionable. By framing insights in financial terms, we bridged the gap between technical energy metrics and what truly matters to users, ensuring they could easily understand and connect with their energy data.
Decision 3: Design system consistency
To maintain UX consistency and ensure faster delivery, we leveraged an existing graph library that users were already familiar with. This allowed us to build on a trusted UX foundation while addressing new data needs. To support the introduction of this feature, we made specific adjustments to the design system components:
- Added support for a new metric (£)
- Ensured rounding consistency across all visualisations
- Incorporated handling of negative values within the component
These enhancements ensured the updated graphs remained intuitive, accurate, and seamlessly aligned with the previously made graph components in the app.
- Added support for a new metric (£)
- Ensured rounding consistency across all visualisations
- Incorporated handling of negative values within the component
These enhancements ensured the updated graphs remained intuitive, accurate, and seamlessly aligned with the previously made graph components in the app.
Final solution
An intricate design token library
As a white-label product, every new feature and component needed to seamlessly align with our design token library. This library serves as the foundation for ensuring consistent styling across multiple brands, accounting for elements such as text styles, colour tokens, corner tokens, padding tokens, and more.
By adhering to these tokens, we were able to maintain visual cohesion and flexibility while delivering tailored solutions for different brands.
Below is a demonstration of the updated feature successfully implemented across three distinct brands, showcasing the scalability and adaptability of our design system.
By adhering to these tokens, we were able to maintain visual cohesion and flexibility while delivering tailored solutions for different brands.
Below is a demonstration of the updated feature successfully implemented across three distinct brands, showcasing the scalability and adaptability of our design system.
Feature roadmap
This initial feature release focused on delivering core functionality by providing users with visibility into their data.
However, during usability testing, we identified several additional features that had to be descoped for this phase.
These will form the basis of future updates:
- Empowering users to make more informed decisions about utalising optimisation
- Highlighting high and low £ moments
- Calling out DSR events
However, during usability testing, we identified several additional features that had to be descoped for this phase.
These will form the basis of future updates:
- Empowering users to make more informed decisions about utalising optimisation
- Highlighting high and low £ moments
- Calling out DSR events