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.
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.
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.
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.
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.
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.
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.
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.
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.