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 and Site Mapping
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
#002A4E
#4F7458
#001A77
Grayscale
#3A3A3A
#545454
#848484
#B3B3B3
#DCDCDC
Typography
Font: Clear Sans by Dan Rhatigan, Robin Nicholas, and George Ryan
H1
Kind-hearted, fabulous queers embrace their fluid, diverse sexualities with zest
H2
Kind-hearted, fabulous queers embrace their fluid, diverse sexualities with zest
H3
Kind-hearted, fabulous queers embrace their fluid, diverse sexualities with zest
P
Kind-hearted, fabulous queers embrace their fluid, diverse sexualities with zest
Small
Kind-hearted, fabulous queers embrace their fluid, diverse sexualities with zest
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
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.