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

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.

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

Typography

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

Developing a New Site: Wireframing and Prototyping

This next (very exciting) phase was all about applying the newly established style guide to wireframes across multiple breakpoints.

Navigation, Wireframes, and Mid-fi Prototype

The new site map allowed me to carefully generate a navigation wireframe for a new DEO website skeleton. Lo- and mid-fi prototypes progressively became more established and grounded in a realistic and effective website.

User Testing

User testing on seven individuals was conducted on mobile and desktop navigation via Zoom. Participants were given 2 tasks: find the site Homepage from the Resources page and find the Climate Change page form the Homepage. Significant changes, including site map details, colors, type size, wayfinding, and button styles were made between user testing the next navigation iteration.

Hi-fi Prototype