InstaHub Energy Waste Analytics
InstaHub Energy Waste Analytics
InstaHub Energy Waste Analytics
Improving filter experience for building operators and owners to easily identify areas of energy waste in building rooms
InstaHub is a B2B electronics company with a multi-sensor datalogger that provide building analytics web application to help building managers stay informed on potential building inefficiencies.
This application addresses crucial aspects of energy conservation by displaying building/room vacancy, lighting waste, and heating/cooling waste.
InstaHub is a B2B electronics company with a multi-sensor datalogger that provide building analytics web application to help building managers stay informed on potential building inefficiencies.
This application addresses crucial aspects of energy conservation by displaying building/room vacancy, lighting waste, and heating/cooling waste.
Role
Lead Product Designer
Lead Product Designer
Timeline
2023 Q4 - Present
2023 Q4 - Present
Contributions
User Research
Task Analysis
Wireframes
High Fidelity Mockups
Dev Notes
User Research
Task Analysis
Wireframes
High Fidelity Mockups
Dev Notes
Tools
Goodnotes
Figma
Slack
Zoom
Goodnotes
Figma
Slack
Zoom
Context
Context
Context
💼 Overview
Working on InstaHub's Energy Waste Analytics web application is one of the hardest but most rewarding experiences. I have learned a lot, and I continue to learn numerous new things about the building management industry. Despite being a small team and only being part-time, I collaborated closely with the CEO and developer to deliver visual designs in a start-up environment. The task was to create a filtering system to allow building managers to easily narrow down a selection of room analytics results.
Working on InstaHub's Energy Waste Analytics web application is one of the hardest but most rewarding experiences. I have learned a lot, and I continue to learn numerous new things about the building management industry. Despite being a small team and only being part-time, I collaborated closely with the CEO and developer to deliver visual designs in a start-up environment. The task was to create a filtering system to allow building managers to easily narrow down a selection of room analytics results.
👩💻 Stakeholders
Throughout this project, maintaining open lines of communication with stakeholders was paramount. I ensured continuous updates on my progress, actively seeking feedback to enhance the project's trajectory. Regular check-ins with software engineer Felipe Sanchez facilitated valuable web development insights, addressing any limitations or roadblocks by proposing effective solutions. Engaging in weekly design critiques with the newly onboarded designer Aishwarya Thite provided a rich source of creative feedback. Additionally, insights from CEO Michael Wong, who holds the final approval authority for designs, further shaped and refined the project's direction.
Throughout this project, maintaining open lines of communication with stakeholders was paramount. I ensured continuous updates on my progress, actively seeking feedback to enhance the project's trajectory. Regular check-ins with software engineer Felipe Sanchez facilitated valuable web development insights, addressing any limitations or roadblocks by proposing effective solutions. Engaging in weekly design critiques with the newly onboarded designer Aishwarya Thite provided a rich source of creative feedback. Additionally, insights from CEO Michael Wong, who holds the final approval authority for designs, further shaped and refined the project's direction.
Problem
Problem
Problem
⚡️ The Challenge: How can we help users easily learn and use filters to work identify time periods of energy waste efficiently?
⚡️ The Challenge: How can we help users easily learn and use filters to work identify time periods of energy waste efficiently?
InstaHub's energy waste analytics page is designed to show building managers at a glance where and when energy waste is occuring. The application currently focuses on waste relating to vacancy, light, heating, and cooling. Filters can provide a better use experience by allowing users to focus on locations, dates, and times of interest. In addition, filters remove unecessary information, helping users work faster and more accurately.
InstaHub's energy waste analytics page is designed to show building managers at a glance where and when energy waste is occuring. The application currently focuses on waste relating to vacancy, light, heating, and cooling. Filters can provide a better use experience by allowing users to focus on locations, dates, and times of interest. In addition, filters remove unecessary information, helping users work faster and more accurately.
Energy Waste Analytics Page without a robust filter
Design Process
Design Process
Design Process
🔬 Research
My first step was to understand what the energy waste analytics page was used for and why building managers needed filters. Then, I can dive into what type of filters do building managers need and want to use in their work flow.
I research some existing filter libraries such as Best Buy and Ikea. I also interviewed some building managers to learn more about how they filter the energy waste with existing resources. They revealed that filtering analytics was a manual task.
My first step was to understand what the energy waste analytics page was used for and why building managers needed filters. Then, I can dive into what type of filters do building managers need and want to use in their work flow.
I research some existing filter libraries such as Best Buy and Ikea. I also interviewed some building managers to learn more about how they filter the energy waste with existing resources. They revealed that filtering analytics was a manual task.
"I have to manually conduct analytics. I want to easily create reports where there is vacancy and waste." - Building Manager
"I have to manually conduct analytics. I want to easily create reports where there is vacancy and waste." - Building Manager
"I just want to see the times where energy waste occurs." - Energy Manager
"I just want to see the times where energy waste occurs." - Energy Manager
👷 Persona
An energy manager for various company buildings using InstaHub's web application tool.
An energy manager for various company buildings using InstaHub's web application tool.
DESIGN
Filter Format
Filter Format
Filter Format
I delved into the formatting and placement of the filter section, incorporating feedback from critiques on hierarchy and space allocation. In the ultimate design, I chose a more minimalistic approach to emphasize focus on energy waste analytical visualization.
I delved into the formatting and placement of the filter section, incorporating feedback from critiques on hierarchy and space allocation. In the ultimate design, I chose a more minimalistic approach to emphasize focus on energy waste analytical visualization.
DESIGN
Date Range
There are many common date ranges that building managers typically look at. I had to think about how to make it easier to choose common ranges while still allowing for custom date ranges. My final solution was a clean date selection with preset options.
There are many common date ranges that building managers typically look at. I had to think about how to make it easier to choose common ranges while still allowing for custom date ranges. My final solution was a clean date selection with preset options.
DESIGN
Day/Time Selection
I included the day filter along side time filter since it was common to filter it together. It was challenging finding the right combination of action components that were not too overwhelming but made it clear what a user may edit/filter.
I included the day filter along side time filter since it was common to filter it together. It was challenging finding the right combination of action components that were not too overwhelming but made it clear what a user may edit/filter.
DESIGN
Confidence Level
Similarly, a slider was used for confidence. However, I explored a different visual design to signify that it is a slider that only moves on one side and not both like the above.
Similarly, a slider was used for confidence. However, I explored a different visual design to signify that it is a slider that only moves on one side and not both like the above.
Final Solution
Final Solution
Final Solution
Key Learnings
Key Learnings
Key Learnings
🤝 Executing Design-to-Development Handoff
Engaging in this project provided me with invaluable experience in delivering assets for consumer-facing development. Maintaining continuous communication with the developer, I meticulously documented component types and their usage. Ensuring pixel perfection within well-organized layers in my final Figma file, I also leveraged the new Figma Dev Mode. This meticulous documentation significantly minimized complications in the development process.
Engaging in this project provided me with invaluable experience in delivering assets for consumer-facing development. Maintaining continuous communication with the developer, I meticulously documented component types and their usage. Ensuring pixel perfection within well-organized layers in my final Figma file, I also leveraged the new Figma Dev Mode. This meticulous documentation significantly minimized complications in the development process.
🛣️ Embrace the Adventure
During my tenure at InstaHub, I have worked on many projects and developed my craft with limited resources. Priorities are always changing and user needs are constanting growing. I've learned to consume a lot of complex industry knowledge swiftly and accurately in order to craft optimal features. And as the team member that has spent the most time at the company, I seized opportunities to refine soft skills like confidence, communication, and leadership. Taking the lead in discussions, keeping stakeholders informed, and asserting a clear point of view became second nature. Proactively addressing potential roadblocks through thoughtful questioning enhanced user efficiency.
I extend a heartfelt acknowledgment to CEO Michael Wong, who believed in me during my first internship, consistently supported my professional growth, and imparted invaluable lessons that will resonate in my future endeavors.
During my tenure at InstaHub, I have worked on many projects and developed my craft with limited resources. Priorities are always changing and user needs are constanting growing. I've learned to consume a lot of complex industry knowledge swiftly and accurately in order to craft optimal features. And as the team member that has spent the most time at the company, I seized opportunities to refine soft skills like confidence, communication, and leadership. Taking the lead in discussions, keeping stakeholders informed, and asserting a clear point of view became second nature. Proactively addressing potential roadblocks through thoughtful questioning enhanced user efficiency.
I extend a heartfelt acknowledgment to CEO Michael Wong, who believed in me during my first internship, consistently supported my professional growth, and imparted invaluable lessons that will resonate in my future endeavors.
