US Department of Energy
Website Redesign
While the current US Department of Energy website has a large database of wonderful educational resources, the difficult-to-navigate sitemap prevents the average user from finding them. My partners and I tested and then redesigned the website to address this issue.​
The Problem
The current Department of Energy website has a library-worth of great materials, but many resources are outdated and difficult to locate amidst the extensive sitemap. As someone who has personal experience teaching energy literacy myself, I was passionate about improving this site to make its content more accessible to the average user.
The Solution
A simplified sitemap and easy-to-navigate design for the DOE website would empower users to find current news and updated information to share with their students and/or peers.
Project Concept
Improving the US Dept of Energy's Website, special focus on sitemap
Scope
Desktop and Mobile Website Redesign
informed by User Research
Tools
Figma, Miro, Pinterest, Invision
Team
Elise Mary Lanigan
User Research Co-Led with Nick Petersen and Edward Feldman
USER RESEARCH
Proto-Persona
Our user, Margaret Tschida, visits the Energy.gov website to find resources for her middle school science classroom. The current materials they have are outdated, so she wants the most up-to-date and age-appropriate information to teach her students about renewable energy.
User Path
We found a great teacher resource that our user would benefit from using in her class. Unfortunately, it took many screens to get to this resource.
Pre-Testing Redlining
Before completing any user testing, my partners and I annotated each page our user would have to navigate through to see what already stands out to us.
We highlighted the color accessibility issues, the sitemap navigation, and the various sections included on the front page giving the user an overview of the site's contents.
DEFINITION
User Testing
My partners and I conducted 5 user tests to ensure science educators could visit the Energy.gov website to find resources for their classroom. We also completed 3 additional user tests specifically on the navigational menu.
Each tester described the website as difficult and frustrating to use, saying the menus aren't clear, the links aren't prominent, and the language too unfamiliar.
Post-Testing Redlining
After our user tests, we revisited the screens our users had to navigate to denote what they had commented on or had issues with.
​
We were able to also identify that users had trouble understanding complex language on the site and couldn't identify the search bar from just the search icon.
Feature Prioritization
We identified three key features to focus on:
-
Improving the sitemap/primary menu for clarity
-
Condensing pages and making sure their contents/links are clear
-
Guiding the user to understand their relative location within the site on any given page
WIREFRAMING
Moodboard
Before we began sketching, we worked together to put together a moodboard. We were mostly drawn to dark green and blue colors with layering graphics to give the impression of depth within the page.
We also wanted the website to look bright and modern with fonts and outline similar to a news website since their homepage contains news articles and resources for educating the public on energy issues and environmental progress.
Sitemap
One of the most important steps of the process was reworking the current sitemap. The main goals were condensing content and simplifying complex language.
​
I condensed the sitemap from 23 secondary menu options to 17 to prevent decision fatigue while conserving the information of the site.
Style Tile
Our style tile built on our moodboard, through we leaned toward a brighter look than some of our "dark mode" inspiration images. We also went with more modern sans-serif fonts to evoke the user towards the forward-thinking goals of the Department of Energy.
Sketches
From this point on, Nick, Edward, and I worked independently on our own vision for the site.
​
I first worked on a mobile and then tablet sketches of the homepage to include a header and dropdown menu, feature image, about section, news stories, and three circles to highlight department priorities.
Mobile Sketch
Tablet Sketch
I then sketched desktop versions, first creating one that copied the mobile version almost completely. Then I adjusted the design to better suit a desktop by having information on the left and right for the user to find stories, department priorities, and the feature image without having to scroll.
Desktop v1 Sketch
Desktop v2 Sketch
Mobile Wireframes
For the mobile wireframes, I adjusted the hero image first and then adjusted the "About Us" section to best communicate information about the department, without distracting away from the news articles and other resources on the page.
I also moved from a sliding nav bar to a drop down menu so the user can see where they are in the site from every page.
​
Last, I developed how the "Priorities" section at the bottom page would appear, changing from the circles in the sketches to images to align more cohesively with the other title headers and images on the site.
Desktop Wireframes
I also adjusted the "About Us" section and "Priorities" for the desktop versions, to ensure a user could see all relative information at a glance.
While the current "Department of Energy" places news stories directly below the hero image, I moved them to the right side, so while visible, the department priorities can better tell the stoy of the organization as a whole.
The final desktop wireframe addresses the initial usability issues found in our user testing as it:
-
Provides more accessible contrasting colors
-
Uses simpler language, particularly in its navigation bar
-
Further expands on the priorities of the department
-
Clearly highlights links for users to click through
-
Includes an entire search bar for the user to look within the site quickly
-
Condenses the content to require minimal scrolling
TESTING
Hi-Fi Mobile Testing Results
After completing a mobile and desktop prototype of the path we originally tested to find educational resources, I tested it again. This time, we had a higher success rate but also found that we
-
could further improve the label of “STEM Education” for clarity
-
should add additional routes to return to the main homepage
Style Guide
Once I finished my prototypes, I also updated the style guide to reflect the typogoraphy, colors, buttons, and forms to create maintain across the site.
Mobile Final Prototype
For my final prototype, I created three mobile screens along with a hamburger navigation menu for the user to explore the DOE site for educational resources.
​
Desktop Final Prototype
I also completed the same navigation and flow of screens for the desktop version. I particularly enjoyed translating content from mobile to desktop in this section to ensure both experiences was uniquely addressed.
_gif.gif)
Final Thoughts and Next Steps
From my testing, I have determined the redesigned sitemap is much easier for users to navigate.
Moving forward, I would still aim to test alternative page titles for the sitemap to further improve coherence. I would also want to expand the scope of the redesign, as the original issue of the large inventory of information to organize still remains.