Client
U.S. Energy Information Administration – the federal agency responsible for energy education and transparency
Context
Energy Explained was one of EIA’s most-visited sections but was built on an outdated architecture with limited mobile support and poor SEO. The platform needed a full redesign to meet modern usability standards, simplify maintenance, and scale across devices and audiences.
Objectives
• Modernize the design and align it with EIA’s branding system
• Make the experience fully responsive and mobile-friendly
• Replace dynamic query string architecture with SEO-optimized pages
• Introduce interactive charts, dynamic infographics, and a maintainable codebase
• Empower non-technical staff to update content without introducing errors
• Make the experience fully responsive and mobile-friendly
• Replace dynamic query string architecture with SEO-optimized pages
• Introduce interactive charts, dynamic infographics, and a maintainable codebase
• Empower non-technical staff to update content without introducing errors
Strategic Value
As lead designer and front-end developer, I transformed a sprawling, outdated resource into a cohesive, scalable platform. I introduced modular CSS, dynamic SVG visualizations, and GitLab version control—enabling long-term sustainability. The redesign improved discoverability, user engagement, and editorial workflows, and it now serves as a model for EIA’s educational products.
Results
• 8.4M+ views in FY23, making up ~16% of EIA.gov traffic
• 16% increase in visits and 5% lift in page views post-launch
• 89% user satisfaction with design and navigation
• Platform now supports 169+ articles and 100+ visualizations across desktop, mobile, and tablet
• 16% increase in visits and 5% lift in page views post-launch
• 89% user satisfaction with design and navigation
• Platform now supports 169+ articles and 100+ visualizations across desktop, mobile, and tablet
Objectives
• Update the design to be more modern and in line with branding on other, newer sections of the website.
• Design new navigation to replace the expanding side navigation.
• Make it responsive so it works across all devices.
• Allow users to download visualizations and data easily.
• Create an intuitive, engaging experience that meets the needs of first-time and returning Energy Explained visitors.
• Improve code integrity and version control to prevent errors from accumulating over time while allowing HTML novices to maintain the content.
Original Energy Explained design circa 2016.
User Analysis
The users for Energy Explained are the same as it was when the agency first introduced it. Energy Explained serves multiple user groups: the general public, academia (teachers and students of varying levels), government (usually congressional staffers), and non-energy business/industry.
I designed the user interface for the original website and was involved in the user research. Since the focus of the redesign was to improve access not rethink the content, I used my existing knowledge of the Energy Explained users to brainstorm new features and improvements.
Interactive charts. Charts that allow users to hover over data points are more engaging than static images. Academia, government, and business/industry often want to download EIA images to add to reports and presentations.
Touch-friendly navigation. Academia increasingly accesses EIA's website from a phone or tablet. Navigation within Energy Explained should be easy to open and select using a finger on a device of any size.
Enhanced discoverability. Most Energy Explained users initially found content through Google searches. The existing pages used a query string to dynamically serve up the content. Splitting the content into distinct sections with separate pages for each topic and unique meta data would dramatically improve findability.
High Fidelity Mockups
New navigation
I created a menu containing all the different Energy Explained sections. I added icons for visual appeal, and set up a grid which would yield large tap areas on mobile and tablet. I knew I would need to add in the sub-navigation for each section and decided to wait on designing it until after we decided on a menu design.
I created a menu containing all the different Energy Explained sections. I added icons for visual appeal, and set up a grid which would yield large tap areas on mobile and tablet. I knew I would need to add in the sub-navigation for each section and decided to wait on designing it until after we decided on a menu design.
• Options 1, 2, and 4 (below) have the same card-style format and differ only in aesthetic.
• Option 3 has more defined subsections for the types of energy sources and offers navigation to EIA's state and international energy pages.
• Option 3 has more defined subsections for the types of energy sources and offers navigation to EIA's state and international energy pages.
Menu option 1
Menu option 2
Menu option 3
Menu option 4
Article pages
Option 1, visualizations on the side
• Images and visualizations would be in the right-side column.
• Sub-navigation at the bottom (e.g., navigation within Diesel fuel explained or Hydropower explained).
• Related information at the bottom.
• Images and visualizations would be in the right-side column.
• Sub-navigation at the bottom (e.g., navigation within Diesel fuel explained or Hydropower explained).
• Related information at the bottom.
Pros
• With the images and visualizations in the side column, it would allow us to continue using the image files we already had on the old site, and staff maintaining the pages wouldn't have to consider where to place them relative to the written content.
• With the images and visualizations in the side column, it would allow us to continue using the image files we already had on the old site, and staff maintaining the pages wouldn't have to consider where to place them relative to the written content.
Cons
• On longer/shorter pages with more/fewer images, this could lead to awkward column lengths and white space (e.g., long side columns with lots of white space in the main column).
• On mobile, all the images and visualizations would end up under the text content and be completely out of context.
• On longer/shorter pages with more/fewer images, this could lead to awkward column lengths and white space (e.g., long side columns with lots of white space in the main column).
• On mobile, all the images and visualizations would end up under the text content and be completely out of context.
Diesel fuel explained, option 1
Hydropower explained, option 1
Option 2, visualizations in context*
• Images and visualizations would be inline with the content.
• Images and visualizations could span the whole column if desired.
• Sub-navigation on the right (e.g., navigation within Diesel fuel explained or Hydropower explained).
• Related information on the right.
• Images and visualizations would be inline with the content.
• Images and visualizations could span the whole column if desired.
• Sub-navigation on the right (e.g., navigation within Diesel fuel explained or Hydropower explained).
• Related information on the right.
Pros
• With the images inline with the content, there'd be fewer instances of overly long right-side columns (this occurs on other parts of the EIA website).
• On desktop and mobile, images and visualizations would show within the context of the text they're supporting.
• With the images inline with the content, there'd be fewer instances of overly long right-side columns (this occurs on other parts of the EIA website).
• On desktop and mobile, images and visualizations would show within the context of the text they're supporting.
Cons
• We may have to pick some new images when the originals aren't big enough to fit the new space. This will add a little to overall project time.
• We may have to pick some new images when the originals aren't big enough to fit the new space. This will add a little to overall project time.
*Option 2 was my preferred approach.
Diesel fuel explained, option 2
Hydropower explained, option 2
Oil and petroleum productions explained, option 2. This mockup shows a page with more tabs along the top so stakeholders could see how I planned to integrate them on the pages with multiple tabs. The tabs could be applied to option 1 or 2 as the top, page-level navigation is the same in both designs.
Options for styling the Did You Know callouts.
Decisions, decisions
I organized meetings with internal stakeholders to discuss the menu and article options. We decided on menu option 3 and agreed to remove the sections for state and international energy as they would lead users off of the Energy Explained section. We decided to implement option 2 with images and visualizations in context. Even though it involved some extra work to find new images that were higher resolution, we all agreed that having them in context would benefit the overall user experience.
But wait...where are the mockups for mobile and tablet?
There are none. I was given a lot of freedom with this project and there are a few reasons why I opted to skip mockups and design for mobile and tablet on the fly.
• I knew I would be the person implementing the CSS
• The EIA website already has a design system in place so most of the layout changes between desktop, tablet, and mobile would be taken care of.
• I would be the final reviewer for mobile and tablet styles.
• I knew I would be the person implementing the CSS
• The EIA website already has a design system in place so most of the layout changes between desktop, tablet, and mobile would be taken care of.
• I would be the final reviewer for mobile and tablet styles.
Given all the reasons above, creating mockups for myself would have added to the project timeline and offered me little benefit, so I skipped them.
Implementation Plan
Interactive charts. I planned to use the HighCharts library that EIA already has in place and which allows users to download the data and the charts as an image. I intended to read the data into HighCharts from CSV files (a built-in feature in the HighCharts library).
CSV files for each chart. Wait, really, separate flat files for each chart? Yes, for a number of reasons. First, the data for each chart isn't always available elsewhere on the EIA site. When it is available, it doesn't follow the same publication schedule as Energy Explained—automatically updating data on Energy Explained could yield written text that's out of sync with the graph depicting it. Finally, the staff maintaining the Energy Explained content are not technically savvy enough to handle updating data inline with JavaScript code and doing so would introduce significant risk of errors. Updating a CSV file in Excel and saving it, on the other hand, is essentially what they already do on a daily basis.
Custom Scalable Vector Graphics. For visualizations that are not possible to make using HighCharts, I planned to make my own. In order to make these graphics easier to maintain, I planned to combine the SVG code with PHP so content owners could update the content in some variables and the graphic would adjust to reflect it.
Download solution for custom SVGs. Based on past experience and user research, I knew users would want to be able to download the visualizations (saving an SVG online to use in a document would be difficult for all our users) so I planned to research code libraries that would convert SVG's to static images.
Create separate pages for all article content. Unlike the existing Energy Explained pages, which loaded content from include files onto a single page using query strings, I wanted the new Energy Explained pages to be easier to find and maintain. I also planned to add metadata to each page to increase SEO.
Add version control in GitLab. In order to improve code integrity and prevent errors from accumulating over time, I wanted to build out Energy Explained using a GitLab repository. I persuaded the content owners to maintain the content in GitLab using their IDE. They were previously using Dreamweaver's code view to update files and since GitLab's IDE has semantic highlighting, the experience would be similar enough, and the benefits of version control far outweighed the cost of learning a new interface.
Write a new, local stylesheet. I was introducing some new styles in Energy Explained and needed a local stylesheet to handle them. With a website as large as EIA's, trying to maintain all styles in a single, global stylesheet is too cumbersome and risky. It becomes impossible to know what pages one little change might affect. So, I set up a local CSS file to adjust global styles as needed and to handle all the theming that would be unique to Energy Explained, including the SVG icons for the menu and page headers.
Delegating and asking for help
I briefed the developers about the plan and asked them to work on all the charts and to create the CSV files they would need for them based on Excel source files we had. I wrote up a few tickets in Redmine, our project tracker and assigned them. I went off to work on my parts of the project. When I was a few charts into the process, I quickly realized I needed help. I had too much to do between my role as project manager, designer, front-end developer, and reviewer, let alone other work outside the project that I had to complete.
So, I asked for help and it was one of the best decisions I made in this project. I was provided a project coordinator who could take over routine ticket creation and tracking. I then realized that in order to offload some of the reviewing, I would need to coach everyone on how I review the charts so they'd be able to catch basic issues on their own. I created a detailed checklist that covered all the different aspects of the charts (e.g., chart axis titles, units, tooltips, etc.) and what to look for.
Once I set the team up for success, I was able to tackle my own tasks, which included:
• Setting up every page within Energy Explained with URLs, page titles, descriptions, and keywords to maximize SEO
• Asking the content owners to provide me with descriptions and keywords for all the pages
• Asking the content owners for feedback on a list of page titles and URLs
• Creating the custom SVGs in Illustrator and exporting the code
• Integrating the SVG code with PHP to make it dynamic
• Writing the local CSS
• Migrating all the text and images from the existing site to the new pages
• Reviewing, reviewing, reviewing
• Setting up every page within Energy Explained with URLs, page titles, descriptions, and keywords to maximize SEO
• Asking the content owners to provide me with descriptions and keywords for all the pages
• Asking the content owners for feedback on a list of page titles and URLs
• Creating the custom SVGs in Illustrator and exporting the code
• Integrating the SVG code with PHP to make it dynamic
• Writing the local CSS
• Migrating all the text and images from the existing site to the new pages
• Reviewing, reviewing, reviewing
Notable features
Custom and dynamic SVG bar chart. The labels and bars all adjust automatically when the content owners update the data.
Custom and dynamic SVG expanded pie chart. The labels, pie slices, and bars all adjust automatically when the content owners update the data.
An infographic I created in HTML that users can download as an image using the same download feature as the custom SVGs.
The previous Energy Explained had lots of bullets with numbers that were...boring. I styled them with some CSS to make them more like infographics so they're more engaging and more scannable.
Interactive HighCharts that have tooltips for data points. Users can click the link to enlarge them. If we didn't (nearly always) have such long chart titles, I would have added a zoom button next to the chart menu, which might be more noticeable.
Interactive maps (also HighCharts) that have tooltips for data points. Users can click the link to enlarge them. For consistency, the enlarge link is in the same place as on all the other enlargeable charts and images.
Clicking the menu button on the page displays an overlay with the Energy Explained menu, which is also the Energy Explained homepage.
Clicking one of the icons opens a sub menu with links to the pages within the section.
Impact
After launching the redesigned Energy Explained resource on August 28, 2019, we saw immediate improvements in user engagement. In the first month alone, we attracted approximately 36,000 (16%) more visits and 22,000 (5%) more page views compared to the previous year. By the close of fiscal year 2023, Energy Explained had reached over 8.4 million views, consistently generating about 16% of total website traffic on the agency's public web presence. This redesign significantly advanced our mission to promote public understanding of energy.