Hello and welcome to another Pocket UX post. These mini UX/UI app designs are just for fun and to keep my skills sharp! Solarbee is a mobile app which syncs with your home solar array to give a live data feed of energy production and consumption
Project Info
Duration: 2-3 days +/-
Concept client: Solarbee
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
Before a sketch hits the paper, or a pixel ends up on screen, research is key. Even with the quick turnaround for this product design challenge, following the same overall process structure will maximize time and effort spent in the long run.
Empathize
Define
Ideate
Design / Prototype
Test / Feedback
★ 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.
★ 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.
★ 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.
★ 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.
★ Test / Feedback
I posted this project online for feedback surrounding the UI and usability and specifically love this feedback about a previous iteration using line graphs. It was a bit heavy on cognitive load and later swapped this representation with a simplified pie chart for clarity.
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. ☀️
Disclaimer: The thoughts shared in this blog are solely my own and do not represent the perspectives of my professional relationships or clientele.