Client
U.S. Energy Information Administration – the federal agency responsible for energy data transparency
Context
Winter weather in New England can trigger major disruptions in the region’s energy supply and infrastructure. EIA needed a tool to consolidate electricity, natural gas, and petroleum indicators into one accessible, real-time dashboard—supporting decision-making for market analysts, policymakers, and the public.
Objectives
• Deliver a comprehensive regional dashboard before the winter heating season
• Visualize over 40 energy metrics through responsive, interactive components
• Create a dynamic infographic to highlight key capacity and demand indicators
• Ensure accessibility, mobile usability, and API integration
• Visualize over 40 energy metrics through responsive, interactive components
• Create a dynamic infographic to highlight key capacity and demand indicators
• Ensure accessibility, mobile usability, and API integration
Strategic Value
With no time for formal user research or wireframes, I leaned on prior dashboards, our design system, and strategic reuse to fast-track delivery. The result was a polished, responsive dashboard that simplified complex data for a wide audience—setting a new standard for regional transparency and enabling rapid situational awareness across stakeholders.
Results
• Launched in just 3 months with 40+ interactive visualizations
• 13.5K views in 2024, supporting daily decision-making during critical periods
• Praised as “spectacular,” “fantastic,” and “very useful” by ISO New England, FERC, and other energy professionals
• Demonstrated the power of strategic UX, fast iteration, and hands-on design leadership under pressure
• 13.5K views in 2024, supporting daily decision-making during critical periods
• Praised as “spectacular,” “fantastic,” and “very useful” by ISO New England, FERC, and other energy professionals
• Demonstrated the power of strategic UX, fast iteration, and hands-on design leadership under pressure
Another dashboard, another tight deadline. And brand new features to invent.
I'd show you the user research, but I didn't have a chance to do any. I'd show you interactive wireframes, but I didn't have time for those either. We were under a tight deadline to launch the dashboard at the beginning of the winter heating season, which we did. I had a lot to do and made some strategic decisions that made it possible to deliver on time and on budget:
• Skip the overall wireframes and mockups. This was my third EIA dashboard over the course of 12 months. Each dashboard got better and better as I learned what worked and what didn't. I now had the design system in place which allowed me to point developers to existing products and say, "we're using the layout and navigation from the Natural Gas Dashboard, and the chart menu from the State Energy Portal. I'll handle the details and make it look good."
• Create mockups for a new infographic. Stakeholders had numerous key metrics they wanted to highlight in the dashboard. I decided to make a new, engaging infographic that would both highlight the metrics and make them easier to understand. I wasn't able to show my mockups to end users but I was able to show them to our subject matter experts to make sure they made sense (to be fair, many of our subject matter experts end up as some of our end users).
• Envision how to make the new infographic dynamic (and then do it). I designed part of the new infographic as a bar gauge but this required some custom code to make it work. Having already made custom, dynamic SVG's for Energy Explained, I knew I could make a simple set of SVG rectangles and lines, add in some variables to pull in the data, and do some simple math to adjust the size of the "fill" rectangle and move the line showing forecasted peak demand.
• Facilitate cross-office collaboration to add dynamic labels to a static map. Stakeholders wanted a map showing natural gas infrastructure and some data associated with some of the points in the map. I collaborated with our Geographic Information System (GIS) specialist and asked him to create the map and export it in a format I could open in Adobe Illustrator. I then cleaned up the file, added placeholders for labels, and exported it as an SVG so developers could add dynamic data to the placeholders.
• Optimize for desktop and mobile throughout development. As the front-end developer and UX designer responsible for the look and feel of the dashboard, I ensured that our code would pick up our existing design system—which would make the layout responsive—and I added styles and code to new components as we created them. This allowed the other developers on the project to focus on the back end and on creating the interactive charts.
• Be available and respond promptly. Whenever developers had a question that I could address or a problem that I could help with, I was there (even when I was busy with my own work on this project). This ensured continuous development and on-time delivery.
A new, dynamic infographic
I only went through a couple iterations of the new infographic on the dashboard overview page. I drew inspiration from the infographic I designed for the State Energy Portal, which has a lot of data points with icons. I mostly spent my time determining how to visualize electric generating capacity and grid status (represented by the filled bar in the mockups below). I wanted to capture the relationship between the total capacity, the forecasted peak and the current demand so users could see at a glance if demand was above, at, or below the forecast.
Screenshots from the live site
The overview page, featuring a custom, dynamic infographic at the top that shows key metrics. Users can view sources, notes, and a description; view each chart in full screen (along with the sources/notes/description); download the chart as an image and/or download the data for the chart; and print an individual chart. Every data update also generates a PDF which serves as a print-optimized view and an archive of the page and is accessible through a link in the page header.
The electricity view, including key metrics at the top and an embedded ArcGIS map showing electricity infrastructure.
The natural gas view, including key metrics at the top and a static map with dynamic labels.
The petroleum view, including key metrics at the top.
The commentary page, featuring an accordion format which allows the current commentary to be front and center while allowing users to see historical entries if desired.
The "take a tour" feature, which provides descriptions, notes, and sources for the various visualizations, and allows subject matter experts to give additional context where appropriate.
How does the New England Dashboard look on mobile?
Pretty good! Since I was involved in the design and development of the NED since project inception, I was able to plan, advocate for, and implement a fully responsive design. I don't have any wireframes or mockups as I was responsible for the design, front-end code, and review for the mobile and tablet views. I relied on our existing design system to handle the overall layout changes for mobile/tablet and then added/modified styles as necessary to create an appealing and usable design for mobile/tablet on the fly.
Impact
The New England Dashboard launched on schedule at the start of the winter heating season, providing timely insights into the region's energy landscape. Despite a tight three-month timeline, the dashboard delivered over 40 interactive visualizations, enabling users to explore natural gas storage data, animate temperature trends, and access real-time data through API integration.
The dashboard's dynamic infographic simplified complex metrics, making energy data more accessible to both stakeholders and the general public. By leveraging existing design systems and collaborating across offices, we ensured a responsive and user-friendly experience across devices.
In 2024, the dashboard attracted 13.5K views, reflecting its value as a reliable resource during critical energy periods. The project's success demonstrated the effectiveness of strategic decision-making and cross-functional collaboration under tight deadlines.
Kudos from our users
"That's spectacular" —user from ISO New England Supervisor of Forecast and Scheduling
"The newly released New England Dashboard looks very nice and is certainly something that I will be referencing on a daily basis." —Graticule Asset Management Asia Commodity Analyst
"I think the new New England dashboard is great. Do you guys have plans to roll out to other U.S. areas?" —ISO New England Internal Market Monitoring analyst
"I think this dashboard is great! I was wondering what visualization software you used to create the dashboard?" —user from FERC Division of Energy Market Oversight staff
"This tool is fantastic. I will use it quite often... it's nice having so many fundamental indicators in a single place, so that I no longer need to pull from multiple sources." —retired U.S. Energy Information Administration Senior Adviser
"Wow!" —Natural Gas Supply Association Senior Vice President Governmental Affairs
"I like it and think it will be really helpful!" —user from Open Energy Advisors
"I find the dashboard to be a very useful tool. So many thanks for developing it." —Market Monitoring
"This is a great tool—can I ask what program you are using to create it?"
"Kudos to EIA for creating another great information product!"