We are creating a new feature in WattPlan that allows users to provide very simple information about their roof, which helps determine their suitability for solar panels. The feature will default to the most common selections for each category but the user will be able to override those if necessary.
Users of this feature will be both residential home owners and commercial business owners in nature, so it is important that the icons are universal regarding the type of building. That is, ideally there would be no images of houses. However, if houses are used, the next best thing would be to make them resemble a generic building instead of a residential house specifically.
The icons will function as buttons and will be stylized in CSS as either not selected, selected, or mouse-over.
We are looking to have 12 icons created:
5 Icons for Direction (west, southwest, south, southeast, east)
We require 5 icons that display a unique direction of the user’s largest roof plane. North facing roof planes do not produce as much solar energy so we exclude those directions as options for simplicity. Users must select one button and the default with be ‘south’.
3 Icons for Pitch (flat, average, steep)
We need 3 icons that depict common roof pitches. This affects how much solar energy is produced so it’s important to gather from the user. Users must select one button and the default will be ‘average’.
3 Icons for Shading (very little, some, a lot)
We need 3 icons that depict the common scenarios of shading from nearby trees and/or other buildings. Shading obviously affects solar energy production and is important to gather from the user. Users must select one button and the default will be ‘some’.
1 Icon of a Directional Compass
We need a compass icon that overlays the map and orients the user, allowing them to more easily determine the direction that their largest roof plane points. This needs to be visually obvious but also needs to be transparent enough as to not cover up the entire map image.
- Format should be SVG.
- The icons will need to scale well and look great on multiple resolutions and screen sizes, including tablets and other devices.
- Icons should look and feel modern, clean and simple, using a flat style.
- All icons should be consistent in terms of size, colors and style.
A screenshot of the feature is attached, which includes placeholder icons for now.