Powering a Nation

Launch Site


When UNC professor Laura Ruel came to me in hopes of refreshing the online presence of the Powering a Nation project, I was excited – but a little intimidated. Powering a Nation was a multi-year multimedia project of the UNC School of Media and Journalism focusing on the state of power generation in the United States. Each year, students produced a standalone website, and the site I worked on serves as a central repository of all of the content. In its original form, the site was based on a WordPress theme with few custom styles, disorganized content, and a confusing architecture from the standpoint of the user. It wasn’t accessible on mobile and was full of flash graphics built in days of yore.

Here is the original site:


The original Powering a Nation site.


So, I dove into the project, beginning with a full content audit (with the help of Lindsay Carbonell, UNC c/o 2017). We sifted through the entire site to flag content for necessary updates, missing assets, and potential for deletion altogether. We collaborated on a Google sheet to clarify next steps for each and every piece.


Content audit spreadsheet for Powering a Nation.


Next, I talked with Professor Ruel about her objectives for this project. The primary target audience is middle and high school students completing science coursework. The hope is to connect students to longform journalism and inform them on the varied landscape of American power. From this discussion, I drew a few conclusions that would inform our process:

  1. School students typically work on either laptops or mobile devices while in class. As such, the design needs to be strong (and accessible) on both platforms.
  2. Mobile platforms do not support Flash graphics  – we would need to come up with a strategy for preserving graphic storytelling while leaving Flash in the past. Our solution: maintain graphics on the site so that users with access to Flash can interact with them AND produce a series of screen recordings interacting with the graphics which can then be hosted from Vimeo.


Next, I researched WordPress themes that would highlight the project’s content in a clean (and responsive) way. We decided that based on the scope of this refresh endeavor, building a custom WordPress theme was not the best approach. I presented three potential options to Professor Ruel and we moved forward with the Hitchcock theme by Anders Noren.


A preview of the Hitchcock WordPress theme.


Next, I moved into content migration (after a quick site backup). The original site used a custom post type “Projects” to store every piece of content. Since Hitchcock is a theme optimized for standard posts, I used a free plugin to convert all of the “Projects” to standard post types. I created a new navigation structure that allows users to explore content by theme and by project year. I also located missing images and integrated the newly created screen recordings of Flash graphics.


I produced sketches of the homepage concept, but found that the WordPress theme was not able to make it happen. So, I decided to code the design myself in HMTL5 and CSS3. I used CSS’ built-in flexbox tool to create a grid of thematic images so that the user can navigate directly to the topic of their choosing. I used a grayscale overlay on the images and a hover state to flood images with color on hover.




Now, as I am wrapping up the project, I am still running through the site with a fine-toothed comb. Professor Ruel and I will continue to collaborate as we move forward with migrating the website from its current host to an on-campus service called UNC Cloud Apps.