Case study: Solar energy consumption app
Welcome to another Pocket UX case study . These mini UX/UI app designs help keep my skills sharp. Solarbee is a smart-home device added to your solar array to give live data about solar energy production and home consumption.
Duration: 8hrs +/-
Client: Solarbee — *Special thanks to Crowwwn for this product design challenge.
Role: UX / UI Designer
Mediums: Figma, Procreate
Problem Statement
“When I install solar on my home, I want to be able to see how much energy I am producing as well as how that energy is being used, so I can be informed when reducing my consumption.”
Overview
Solarbee is a smart-home device added to your solar array to give live data about solar energy production and home consumption. It’s no secret solar is the most abundant energy source on Earth, but there are on-going challenges home owners must overcome to harness it. One of the greatest hurdles is to simply know how much solar energy is coming in, and how much is going out.
Design Process
1. Empathize
2. Define
3. Ideate
4. Design / Prototype
5. Test / Feedback
1. Empathize
Competitive Analysis
The sun is the largest entity in our solar system but, it’s still important to pay attention to the competition.
I began by studying competitors to learn how they might handle the influx of data. There were quite a few solutions to learn from and I created a list of features users might appreciate. Further analysis of the user base would be helpful here for a later iteration.
User Research and Pain Points
I analyzed reviews for various apps which gave me a good foundation to identify must-have features. Most importantly, I was able to see users preferred to see both production and consumption in real time. There were many complaints about the lack of date for incoming vs. outgoing energy.
2. Define
Project Goals
After gaining some clarity into user needs and how existing apps had flaws to address, I gathered my research and created a pocket-sized list of project goals.
I wanted to:
• Create a clear option to see energy production and consumption
• Build a multi-view option of data visualizations
• Show tips / savings / recommendations for consumption
Task Flow
Due to the quick-paced nature of this product design challenge, I chose to create a high-level flow for the specific task of viewing consumption details around appliances.
3. Ideate
Sketches / Wireframing
I had a few ideas for data visualization in the form of line graphs, pie charts, etc. as well as screens outside of the established task flow, but ultimately chose to move forward with the sketches necessary to convey the original goal of the task completely.
4. Design / Prototype
UI Kit / Mini Style Guide
In my research for comparable visuals, I noticed many glamorized UIs designed exclusively for dark mode. While dark mode leads to some sultry visual eye candy, I chose to go the lighter and brighter route — like a summer day.
I drew my inspiration from bumblebees and honeybees — on the hunt for energy to bring back to the hive during the bright and sunny daylight hours. The logo is a blend of the sun and a bee, which lent itself well to the components throughout the UI.
Hi-fi screens
The following screens were built in Figma for iOS language.
5. Test / Feedback
I submitted this project to the Crowwwn weekly challenge website where I was given feedback and advice for the UI — specifically how the line graph screens were a bit heavy on cognitive load. In later iterations, I removed the line graphs representation for the dashboard as the pie chart was able to convey the same information in a much clearer manner.
Results & Lessons Learned
This pocket-sized product design exercise came with its own set of challenges which I’d love to revisit in the future sometime. I’d like to explore data visualization in more depth and to gather more feedback, on how they are received on the user end. Forever learning.
Thank you for reading and making it this far!
—
Jen specializes in visual design and brand empowerment as it pertains to product development and UX/UI.
She currently designs full time supporting multiple brands and teams. In her free-time, she works on passion projects and freelances. She also volunteers her skills to help non-profits.
She started her portfolio site to inspire designers. If her work has helped or inspired you in any way, you can show your support by donating a coffee. ❤️☕️
