Sunny Portal
Sunny Portal is a solar monitoring platform that allows users to track and analyze their solar energy production.
The Problem
The existing Sunny Portal had poor navigation and unclear data visualization, making it difficult for users to track their solar energy performance.
My Role
Lead UX researcher, UX designer
The Solution
A redesigned interface with clear navigation, data visualizations, and financial insights, making energy tracking more intuitive and actionable.
Constraints
This project was completed in a single 3 week sprint, focusing on desktop redesign of the dashboard and panel status page, and addition of a resources page.
Research
To ensure our redesign was user-centered, I led our research plan that included qualitative and quantitative methods.
Interviews
We conducted four in-depth interviews with solar panel owners to better understand their motivations, pain points, and habits when it came to monitoring energy usage. Some of our key findings were:​
-
​ Many users initially checked their analytics frequently but stopped over time due to unclear data representation and a lack of meaningful insights.
-
Users were frustrated by the absence of financial transparency, wanting an easy way to understand energy savings and return on investment.
-
Terminology confusion prevented some users from fully utilizing the platform, indicating a need for a solar glossary to clarify key concepts.
-
Users preferred visual data representation such as comparative graphs over raw numerical data, as it made it easier to track performance trends.
-
Some users wanted a way to visualize energy production in real time, such as an aerial view of their home with active panel monitoring.
Survey Research
To gather quantitative insights, I designed a Google survey that was distributed to solar panel owners who had experience using monitoring platforms. The survey included questions about:
-
Frequency of platform usage and reasons for continued or discontinued engagement
-
Preferred ways to interpret energy data (graphs, summaries, raw numbers, etc.)
-
Trust in the data provided and whether they felt it accurately reflected their energy production
-
Biggest challenges in navigation and usability
The survey data showed that of our total respondents:
-
72% rarely checked their solar monitoring platform due to difficulty understanding the data
-
65% wanted a feature that tracked the financial impact of solar energy use over time
-
81% found solar terminology confusing, indicating a need for better education and accessibility in the UI
-
56% expressed a preference for visual trends and comparative data charts over numerical data
Competitive Analysis
​We analyzed three solar dashboards: Solar Edge, Enphase Enlighten, and Sol Ark. We also carried out an analysis of Sunny Portal's current dashboard. Here is what we found:
-
Overly detailed real time data
-
Inefficient navigation structure
-
Poor visibility of system status
-
Competitors had more engaging UI elements, including dynamic visualizations and financial breakdowns
​​​Using Affinity Mapping, we categorized our research insights into key themes that shaped our design solutions:
-
Data Comprehension
-
Users need simpler, more visual ways to interpret solar data
-
-
Financial Transparency
-
Users want clear, easy-to-access insights into cost savings and return on investment
-
-
Navigation Improvements
-
Users need a more intuitive way to find key information without digging through multiple screens
-
-
Education & Support
-
Users benefit from a solar glossary and tooltips to reduce confusion around terminology
-
​​​Synthesizing Research Findings
Next, we created a storyboard to help us step into our users' shoes. Sadie's journey with her solar dashboard helped us identify opportunities from which users like Sadie might benefit.
Problem Statement
Many solar panel owners rarely use monitoring platforms because the data is difficult to interpret and the navigation is unintuitive. Users need a clear, engaging, and actionable way to track their solar energy production and understand their financial and environmental impact.
Design Process
Feature Prioritization
Once we had a fuller picture of what is important to our users, we prioritized features using the MoSCoW Method.
-
Must-Haves:
-
Clear navigation with an improved sidebar structure
-
Visual energy insights using comparative graphs and cost calculations
-
A solar glossary with explanations for complex terms
-
-
Nice-to-Haves:
-
Gamification features to encourage frequent engagement
-
Mobile optimizations for better accessibility
-
Ideation & Wireframing
Now that we had identified our problem and narrowed down the features we wanted to include, we started brainstorming. Based on our research, we knew we wanted to focus on the dashboard, panel monitoring, and a glossary/general information page. Below are the concept sketches of those three pages.
_edited.jpg)
From there, we took what we liked most from each design to create our lo-fi prototype for testing.
Usability Testing
We asked our users to carry out three tasks:
1. Check their panels' status
2. View their financial information
3. Find the definition of the term "PV"
Results
-
Easy to navigate
-
Liked the idea of tools to understand the basics of solar
-
Wanted a clearer idea of what needed to be acted upon
-
Felt as though a "recommended for you" section in Solar 101 would be helpful
High Fidelity
First Iteration
Taking the results of our usability study, we embarked on our high fidelity prototype. We made sure to make clear what was actionable on the homepage, so our user doesn't have to visit each page to determine action is needed. We also added a "Recommended to Know" filter and "Resources" section to the Solar 101 page, as requested by our users, to help them further understand and maximze their solar usage.
Second Iteration
We presented our case study to our fellow bootcampers, where we received further feedback from peers and our professors. Their suggestions included using color more strategically and making the dashboard less crowded by removing the blue headers from the widgets. Although the project was technically complete, to get more practice in Figma I took the feedback and created a second hi-fi iteration.
Minimalized headers
Colors changed to make clear where action from the user is needed
Updated minimalized UI
Full list of panels and status, giving the user more detail at a glance
Of course, the iterative process is cyclical, and in an ideal world I would have the resources to continue testing and refining the portal. Some suggestions from that would be fun to explore and help distinguish our portal further are adding gamification and energy-generation forecasts!
Reflection & Key Learnings
This project reinforced my UX research, problem-solving, and iterative design approach.
-
User Research Drives Design: Conducting usability tests and interviews directly shaped key design decisions.
-
Visual Hierarchy Matters: Using graphs, interactive tools, and clean layouts made data more digestible.
-
Educational Tools Improve Engagement: Adding a solar glossary, dynamic energy charts, and financial insights helped users make informed decisions.
By focusing on user-centered research and iterative design, I successfully applied UX methodologies to a real-world product. This project highlights my ability to translate complex data into actionable insights, improve usability, and enhance user engagement; all key skills for an entry-level UX designer.