Overview
Created remotely with a team of five, the U.S. Department of Energy's conceptual redesign aims to enhance user experience through improved navigation, modernized visuals, and more intuitive access to energy-related resources and information. Key features will include streamlined content organization, modified information architecture, and accessibility improvements for a more inclusive and efficient mobile & desktop experience.
Project timeline
3 weeks
My role
UX Research
UI Design
Design tools
Energy.gov has potential to be visually pleasing for users. However, design inconsistencies and cluttered pages make it less appealing than it could be. The website navigation is challenging for users due to convoluted information labelling, length of text sections, inconsistent page design and lack of white space. Important and useful information can be hard to find through these lengthy text sections and non-intuitive display locations, with an overwhelming amount of menus and pages.
From a functional standpoint, the Department of Energy's website follows proper etiquette for links, breadcrumbs, and includes utility features such as a search bar and contact information in places where users would expect to find them.
How easily can homeowners find information about cost-saving energy incentives? Through Zoom, a group of users were tasked to find the Home Energy Saving Guide on the original website - with only a 60% success rate. The majority of users felt that specific information was too difficult to find on an otherwise dense and information-heavy website.
Navigation stood out as the biggest challenge during testing. One clear example noted users getting confused by links that had the same text but led to different places, reflecting a broader issue with how intuitive and consistent the navigation is overall.
Some users were quoted during testing sessions saying:
“It seems like they make it difficult to find Energy Saver Guide on purpose”
"It's too complicated to find specific information."
Accessibility
In the last several years, the U.S. Department of Justice finalized a mandate requiring all government websites to be accessible to all people. The original color palette of Energy.com does not meet contrast guidelines to make it accessible to broader audience. Website text on logos, navigational tools, and menus do not pass a standard contrast ratio test. This issue would need to be addressed in a website redesign.
Clark has a 9-5 job. He usually spends his free time with his family, and loves taking care of his daughter. Clark wants to have a better quality of home life. He is interested in energy and appliance efficiency and hopes to save money on electricity bills.
A user like Clark might be interested in using the U.S. Department of Energy's website to learn more about at-home energy savings.
His frustrations:
Age - 43
Marital Status - Married
Ideation
Navigation
The Department of Energy's website would benefit from an overhaul to navigation and information architecture, prioritizing content and how to move and navigate between pages. UI elements like drop-down menus need to be clarified and reconfigured, as important information is pushed underneath multiple subpages.
Time
The current website is cluttered and hard to navigate, making it difficult for users to find important information quickly. Poring through long text sections with little visual break also leaves users feeling overwhelmed. This frustrating layout wastes time and makes it harder for visitors to get the resources they need.
Consistent style
UI elements, such as clickable titles within dropdown menus, unexpectedly lead to different pages or dead ends, confusing navigation. Many of these UI elements can differ from page to page due to inconsistency.
There are drastic navigation differences between desktop and mobile affect website’s learnability and navigation intuitiveness. Navigating the website on a mobile device negatively impacts its usability.
Sitemap
The Energy.gov sitemap is often confusing due to its overwhelming number of subpages and lack of clear information hierarchy. Important content can be buried deep within sections, making it hard for users to find what they need quickly. The site also leads to frequent dead ends, highlighting a need for better information prioritization and streamlined navigation.
Menu tabs in the navigation bar have their own dedicated pages if clicked on as well, without a way to navigate between the subpages under each tab.
Card sorting
By including the navigational items from the sitemap, a UX card sorting exercise was used to simplify content structure and improve clarity. Categories were merged, and related information and subpages were grouped to create a more intuitive layout. This informed the design of new navigation tabs aimed at reducing user confusion and making content easier to find.
Before
After
New sitemap
After the card sorting exercise, we reorganized the sitemap to make it easier to understand and use. Similar pages were grouped together, while less important or rarely visited pages were removed or combined, helping the site focus on the most important information. We also noticed that some secondary pages had multiple links to the same content from the navigation bar. To address this, we condensed and centralized where users could find information by creating a single, organized dropdown menu that displays its updated information hierarchy. This streamlined structure made navigation more intuitive, allowing users to find what they need faster and with less confusion.
Forest
#395919
Green Energy
#5F8031
Green-Gray
#C4CCB4
Display
Body
Hi-fi wireframes
60%
Original website
80%
Lo-fi prototype
100%
Hi-fi prototype
Usability testing showed clear improvement at each stage of the design process. In the original website, only 60% of users could successfully find the Energy Saver Guide, revealing the need for a more intuitive experience. After creating a low-fidelity prototype, supported by card sorting to simplify navigation, success rates rose to 80%. The high-fidelity redesign, with refined visuals, better accessibility, and smoother interactions, reached a 100% success rate, showing that the new design made the task easy and seamless for users.
Original website
Lo-fi prototype
Hi-fi prototype
The U.S. Department of Energy website redesign aimed to modernize the user experience through improved navigation, clearer information hierarchy, and stronger visual consistency. Initial usability testing revealed that only 60% of users could locate the Energy Saver Guide on the original Energy.gov site, pointing to major navigation and content organization challenges. Convoluted labeling, lengthy text sections, and inconsistent design patterns made it difficult for homeowners to find cost-saving energy resources and incentives, especially on mobile devices.
Through iterative usability testing, task success improved from 60% on the original site to 80% on a low-fidelity prototype, and ultimately to 100% on the high-fidelity redesign. The result is a cleaner, more cohesive experience that enables homeowners to find energy-saving information easily, supporting the Department of Energy’s mission to make sustainable living more accessible for all.
