Case Study:
United States Department of Energy Website Redesign

My role: Heuristics evaluation, color contrast analysis, user tests, affinity diagram, site map, lo-, mid-, and hi-fi prototypes.

Tools: Figma, Photoshop, Google Suite, Zoom

The current Department of Energy website is a confusing hodge-podge of distinct offices, containing surface-level information and little substantive content. This project tackles a new DOE site, complete with a rebranding, new site map, and refreshed content across the site for target users.

What’s the DOE?

The Department of Energy is a federal government agency tasked with addressing America’s energy challenges, including climate change, environmental clean-up, energy security and infrastructure, nuclear power, and new technologies. The DOE website is a central informational database for the public to access and utilize the DOE’s knowledge and tools.

Site Research, Establishing Goals

Essential Issues Identified through User Testing

• Inconsistent content between top navigation dropdown menus and top level pages

• Around 50% of users missed the The Save Energy, Save Money menu item in their initial scan of the navigation
• Hard to predict what is on each page judging only from navigation labels
• Many of the menu items open into a new site, but not in a new tab (most common pain point)
• Mobile navigation doesn’t format properly on some pages
• Search function is pretty poor: 1 user could not locate content they were looking for in search, using appropriate keywords
• Images related to links should be clickable

Pain Points

User testing revealed that the site is difficult to navigate, lacks wayfinding elements, prioritizes bulk over substance, and leaves users confused and unable to find meaningful information. A variety of display styles leaves the site with no clear visual voice, and primary links unexpectedly takes users to new websites.

Card sorting was an essential process since the DOE website contains an enormous amount of content across hundreds or pages, included mini-sites with similar branding but entirely different content. Creating an inventory of the site kicked of the ideation phases, as it allowed me to begin to rethink the site's information architecture, to develop more descriptive menu labels and an organizational system which considers the needs of the average user. As well, researching other government agency sites, a sort of elementary competitor analysis, allowed me to consider other strategies currently in use and broaden design horizons.

Transferring the note card site map into a Figma file revealed further complications and organizational issues that required another round of restructuring.

The biggest unsolved problem in the prototype at this point is that some pages in the top navigation open into new sites (mini sites within the DOE site).

Those pages could alert the user they’re on a different site, or they should be pulled out and re-organized to make them a distinct section. Ultimately, these pages and mini-sites should be integrated with the Department of Energy’s main website, as this information is essential to its purpose and function.

User Testing our Lo-fi Prototype

We focused lo-fi prototype user testing on the navigation, since information architecture and taxonomy were among our primary goals and accounted for most of our largest hurdles. Reoganizing this massive amount of content required multiple iterations.

The user testing revealed opportunities for additional changes, including renaming sections and pages, and confirmed that our role-based resources library on the new homepage acted as a helpful secondary navigation.

Redesign and Rebrand

The redesign established a new site map and branding guidelines like type, color, site components, and a new logo, utilizing the results of user testing. Highlights include streamlined interface components, and wayfinding elements to situate the user.

Primary Colors

   

#002A4E

 

#4F7458

 

#DEFF81

Greyscale

#3A3A3A

 

#545454

#848484

#838383

#DCDCDC

Typography

Font: Clear Sans by Dan Rhatigan, Robin Nicholas, and George Ryan

Buttons States & Interactions

Logo

Hi-fi Prototype

Final Thoughts

Style

The proposed style guide for the DOE addresses issues with the current styling: competing visual styles, no consistent method to display information, a logo with illegibly small text, and a harsh and fluorescent color pallet. A set of designated button and card styles, a pallet set of deeper blues and greens (along with a yellow highlighter to maintain the ability to call create moments of intensity), and a streamlined logo that stays true to the original spirit help transform the site from unappealing and confusing to consistent and welcoming.

Navigation

To address the various issues with the current DOE site navigation, I recommend the DOE integrate its mini-sites into the main DOE site design, and reorganize and relabel navigation items to clarify what content exists on the site and where people can find what they’re looking for. I also recommend that section top level pages accurately reflect the information on their subpages, and feature links to their subpages.

Information Quality

The Department of Energy website faces a Quality Assurance issue: the quality of its written information. Opting for quantity over quality, the site contains too much fluff, and not enough substance. Focusing on actionable and concrete information, as well as identifying categories of resources for different types of users helps address this issue.