UI Design for Energy Simulation

UI/UX Design | Product Strategy | Branding & Identity | Prototyping

The Challenge

As part of HOMER Energy's brand redesign, I collaborated with the product team to prototype Powering Health, a health clinic power design system. This tools allows users to simulate power systems for rural health clinics. By inputting data about diesel generators, utility power grids, batteries, and photovoltaic arrays, users can discover the solution with the lowest lifecycle cost.

The Powering Health tool needed a refresh to align with HOMER Energy's updated branding system. Additionally, we wanted to create an engaging form and helpful data visualizations in order to provide the best experience for the users.


Low-fidelity designs

I started exploring different ways to create appropriate and engaging input patterns. I always start my projects by sketching components to think through the usage, error states and edge cases. For this project, I needed to unpack how users can simulate timeframes and how total energy costs adjust based on this usage.


Data Visualization

Design Problem: Simulation of Timeframe

I went through several rounds of iterations on how to simulate timeframe for multiple increments. The user needed to be able to select energy usage for specific parts of the day. The increments were for Daytime, Evening and Night hours. By sliding the number of hours along the x-axis, the data visualization increased to show kWh/hour.

Design Problem: Color in Data Visualization

HOMER Energy had a brand color palette with blue as the central action color. It became apparent that we would need to expand the palette for data visualization accessibility. Using a high-contrast palette, we were able to extend the color options without distracting from the main brand palette.

Design Problem: Total Energy Simulator

A standard bar chart was the best option for showing the total energy for a user's daily profile. Bar charts allow for quick comparison of values.

Design Problem: Electric grid simulation

A slider seemed to be an engaging option to select time within a 24-hour period. Additional selections for total hours also uses a slider pattern.

sketches powering data

Users can see a high-level view of the lowest lifecycle cost. Users can also expand the results page to see the breakdown of each metric. We've highlighted the recommendation by ranking the results in ascending order with lowest lifecycle cost at the top. Users can click on any of the configurations to see the simulation results for that system.

powering data

Visual Design

I developed a style guide as part of the process while creating the Powering Health mocks. The guide focused on how color could be used for data visualization and forms.


Modal Design

A previous iteration of the design used a modal design pattern. The modal pattern was intended as a way to keep the user within the same view. However, after consideration of how users were likely to use this web app, it became apparent that the ability to view complex information required a more mobile-friendly approach.