Role: UX|UI Designer
Team: EnergyCAP Design and User Experience
Tools: Figma, Confluence, Miro, Maze, Adobe Suite
Rebuilding a legacy product from the ground up, the product and UX design team was assigned to align SmartAnalytics with the design system and architecture of the EnergyCAP suite of products.
User Interviews and Feedback Gathering: Engaging directly with customers to gather insights about user needs, pain points, and feature priorities. Using Maze as a key tool, I created detailed correspondence and interview scripts, developed research analytics documents, and organized insights into Miro through affinity maps and other user research boards to visually structure feedback and key themes. I also managed follow-ups to deepen customer relationships and gain further insights. This resulted in a comprehensive understanding of user priorities, which directly shaped product direction and ensured that design decisions aligned with both user expectations and business goals.
.jpg)
Enhance platform scalability and compatibility within the ENC ecosystem by leveraging our custom EnergyCAP design system, Solaris, and focusing on depth over breadth to ensure seamless feature integration. Prioritize a user-centered approach by simplifying data input, reusing Solaris design components, and offering intuitive self-service options for customers and staff. Emphasize comprehensive documentation and improved visibility to support a streamlined, scalable experience that aligns with user needs and product goals.
.jpg)
.jpg)
.jpg)
Energy Analysis: EnergyCAP SmartAnalytics enables detailed energy analysis by allowing users to compare interval data against historical patterns and industry benchmarks. This process helps identify trends, measure efficiency, and uncover opportunities for improvement, empowering users to make data-driven decisions for energy efficiency and sustainability.
Automation and Artificial Intelligence: The platform leverages the advanced Highcharts library and visualization tools, providing a modern, intuitive interface for analyzing complex energy data. These tools offer actionable insights, helping users understand and optimize energy performance across different facilities and time frames.
Data Selection and Filtering: SmartAnalytics prioritizes ease of use in data handling, making data selection and filtering simple and intuitive. Users can seamlessly choose relevant data points and quickly display them in customizable charts and tables, enabling faster interpretation and informed decision-making for sustainability and operational efficiency.
.jpg)
.png)
User interviews found that 63 percent of participants highlighted the need for enhanced analytics and visualization capabilities, citing limited dashboard granularity and non-intuitive layouts. Users desire more advanced visualization options, like interactive and spider graphs, and AI-driven insights to better analyze performance metrics. Real-time data insights and flexible, automated reporting were also requested to streamline decision-making and improve usability.
.png)
Users praised SmartAnalytics for its efficient performance, ease of use, and intuitive interface, particularly within the analytics, charts, and dashboard features. They found the Portfolio and Raw Data modules valuable for monitoring demand and conducting tax analysis, while interactive visualizations and customizable dashboards simplified data analysis. The familiar layouts, like Map View’s Google Maps-style interface, and proactive alerts were also appreciated for enhancing usability and supporting real-time insights.
User research, conducted in collaboration with Product Manager Alberto Guerrero, uncovered key use cases around data combination and granularity controls. Users emphasized the need for EUI normalization (kWh per square foot) to compare buildings of different sizes and assess efficiency across multiple sites and utilities. They also expressed a desire for flexible data views and overlays, such as demand per area, along with clearer notifications when combining datasets with varying granularities (e.g., hourly vs. monthly data). Additionally, users highlighted the importance of streamlined unit conversions to analyze energy per unit of production or occupancy, enabling more effective comparisons and deeper insights.
User research, conducted in collaboration with Product Manager Alberto Guerrero, uncovered key use cases around data combination and granularity controls. Users emphasized the need for EUI normalization (kWh per square foot) to compare buildings of different sizes and assess efficiency across multiple sites and utilities. They also expressed a desire for flexible data views and overlays, such as demand per area, along with clearer notifications when combining datasets with varying granularities (e.g., hourly vs. monthly data). Additionally, users highlighted the importance of streamlined unit conversions to analyze energy per unit of production or occupancy, enabling more effective comparisons and deeper insights.
I took the identified use cases and developed them into curated user flows, mapping each one to specific user scenarios, objectives, needs, and desired outcomes. This approach involved thoroughly analyzing user challenges, anticipated questions, and emotional experiences to ensure a user-centered design process. From there, I created initial wireframes tailored to these user flows. These wireframes were then tested to validate how well the design aligned with user needs and to refine the functionality based on initial product team and user feedback.
.png)
.jpg)
I collaborated closely with the UX design team and product managers to translate use cases into detailed wireframes and iterative panel designs, prioritizing intuitive data normalization and comparative analysis. For Energy Data Normalization, I developed EUI normalization workflows that allowed users to compare energy usage per square foot, ensuring consistent and meaningful metrics regardless of building size. This process involved configuring default charting units and implementing dual-axis charting for comparisons across multiple commodities, such as electricity and water, using dynamic axis adjustments for clarity.
The iterative design process spanned several sprints, during which we refined panel functionality and user interactions to improve usability. We worked together to optimize the configuration panel, enabling users to select data points, activate EUI normalization, and adjust time ranges and chart types. Each iteration underwent testing to validate user scenarios and interactions, allowing us to adjust granularities, toggles, and comparative settings to better meet user needs. Additionally, we integrated features such as data export and custom chart saving to facilitate efficient, real-time analysis and reporting. This iterative approach ensured that every user interaction was carefully designed to enhance comparative insights and flexibility in energy data visualization.
.jpg)
.jpg)
I ran Maze tests focused on the node hierarchy selection feature to assess discoverability and intuitiveness within our energy management application. The test aimed to determine how easily users could select and navigate through one or two nodes in the hierarchy, especially when choosing specific data points or sites within the system.
The report was broken down into several key sections: task completion rates, click paths, and time-on-task metrics, which provided insight into user ease and any friction points within the hierarchy selection flow.
This data was then analyzed to identify patterns in user behavior, allowing us to refine the interface based on common interaction paths and points of confusion. The findings drove design adjustments that improved node selection clarity and streamlined the navigation experience, ensuring users could seamlessly access the data points they needed.
.jpg)
In the following prototype, a facility manager compares energy usage per square foot (EUI) across park sites to determine efficiency relative to size. By charting EUI, the analyst can identify trends and discrepancies. Starting in the Analyze module’s “New Data View,” with the last 7 days preselected, the user filters for electricity data and narrows results by specific data types or search terms like “Denver.” This setup enables a focused, apples-to-apples comparison of energy performance between sites.
A sustainability director at a public park system is conducting an audit, comparing the Denver Park Pavilion’s energy performance from this year to the same period last year. To streamline the experience and tackle the UX challenge of managing multiple date ranges for multiple data points, we limited comparisons to a single data point. This approach ensures clarity in year-over-year analysis, displaying data in a comprehensive table format that reveals trends in energy consumption. Additionally, we addressed the challenge of creating a user-friendly color array distinct from the default palette, enhancing data visibility and selection. This focused comparison allows the director to assess the impact of energy-saving measures or increased usage from visitor growth, supporting ongoing adjustments to sustainability efforts, such as optimizing operational schedules or adding energy-efficient installations to meet the park’s sustainability goals.
.png)
To address the complexity of overlaying schedule and temperature data over primary energy data, we established distinct, independent color arrays for each type, avoiding visual confusion with existing datasets. Limiting the interface to show only one schedule at a time, we used headers, naming conventions in dropdowns, and tooltips in the chart to clearly indicate which schedule corresponds to which park site, allowing the facilities manager to analyze energy use relative to each park’s operational hours. For temperature data, each park’s mean daily temperature is charted as a single line in the top 20-30% of the display, with separate lines for unique weather stations, enabling the manager to examine energy usage trends against climate conditions. This setup provides an intuitive view of energy efficiency, helping the manager ensure that energy isn’t wasted outside scheduled park hours or during times of reduced visitor activity.
.png)
