enerview
For my capstone project at Northeastern University, I designed enerview— a smart energy monitor designed to help home and business owners learn about their energy usage and make more informed decisions based on their consumption. By connecting to supplier accounts and smart appliances, enerview provides real time data and usage trends on both a mobile app and a wall panel.
Process
As the sole designer on this project, I defined the product myself and controlled every design decision. My process for enerview was unique, as the quick time constraint of one semester required me to complete both user interfaces, the app and the panel, simultaneously. In order to accomplish this, I stuck to an organized statement of work and followed best UI design practices such as component usage, prioritizing functions, ensuring WCAG AA compliance, creating color and type styles, and utilizing Auto layout.
Problem Discovery
Homeowners are growing increasingly concerned with their energy efficiency, but with such a large disconnect between the homeowner and their usage data, it's difficult for them to discover how they can improve. enerview's mission is to bridge the gap between the homeowner and their energy usage data.
Target User
The target user is a home or business owner between the ages of 24 and 60 who is curious about their energy usage and/ or environmental sustainability. They may be very knowledgable about energy usage, or just beginning to learn.
Interview Takeaways
Frustration with Energy Suppliers
It frustrates homeowners how energy companies don't provide much data on their usage. They would like to be able to see their trends overtime.
Comparative Data
The majority of participants mentioned that it would be helpful to compare their data to those around them. This would allow users to understand usage norms in their area in order to maximize efficiency.
Price v. kWh
Multiple participants mentioned that price of energy is something they would like to see emphasized throughout the product and one participant mentioned that they would rather see price as a unit for energy rather than kWh.
Information Architecture
I created two site maps, one for the mobile app and one for the panel. This step allowed me to understand the relationships between the two products, their differences in functionality, and how I wanted users to interact with them.
Mobile App
Panel
Hand-Drawn Wireframes
Lofi Wireframes
Mobile App
Panel
Final UI
Mobile Light Mode
Mobile Dark Mode
Panel Light Mode
Panel Dark Mode
Prototype Links
CAD Design
I created the CAD design for the panel in Fusion 360. Featuring shiny acrylic sides and an anti-glare display, it is 5.3 by 7.7 in. and extends 0.7 in. from the wall.
Brand Identity
Typography
enerview's typography features my self-designed typeface, Montero. I designed Montero to be the ideal typeface for user interface design body text. You can learn more about my design process for Montero here!
Logo
enerview's logo was designed to reflect the clean feel of the product. The logomark mimics the shape of the panel to make the product recognizable to potential customers.
Color Palette
Light + Dark Mode
The color palettes were selected with simplicity and versatility in mind to fit within any home and provide feelings of peace and clarity while using the product.
App Button
The app button was designed to be simple yet recognizable.
Component Library
Future Explorations
Later on in this project, I had the idea to add ambient light modes for the panel. The background shifts with the status of the sun throughout the day and transitions seamlessly into dark mode. This is an aspect of the project that I will continue to work on in the future.
Process Book
For more details including my SOW and key product features, please view my process book here!
