The Department of Energy website has a lot of useful information on conserving energy and saving money. Within the website there is a section referred to as "Save Time, Save Money" or sometimes "Energy Saver." Unfortunately, it can be difficult for users to find this section, understand its benefits and to find information that would be helpful to them. I redesigned the site with a focus on improving the navigation and information architecture so that users can get the information they need on conserving energy.
This was a project that I completed independently. I primarily played the role of a UI designer but also did UX design and well as visual design.
Adobe XD, Adobe Illustrator, Miro, Invision, Lookback
3 weeks
When I approached this project I knew very little about the Department of Energy. From the website, I gathered that most of what is there is primarily for people within the energy sector; things like energy economics and innovative energy technologies. But there was also a navigation heading called "Save Energy, Save Money." This section is also called “Energy Saver” which I refer to it as. This section was all about things that people can do to save energy, and save money.
I felt the Energy Saver section was unique in that it targeted a much wider audience but was buried on the site. I did a heuristic evaluation of the site and saw several issues that could keep users from navigating to information that they would find useful. But I wanted to make sure that what I found was really the problem.
I did usability testing and asked people to navigate to a specific page, how to air-seal your home and see if they were able to find it. What I found was that many were not able to find it without additional prompting.
To guide my research and analysis of the Dept. of Energy website I sketched a quick proto-persona based on my idea of a typical user. I choose a 41-year-old homeowner. His goals are to lower his energy bill and conserve energy but he needs guidance on where to start finding information.
After understanding more about the websites goals, user needs, and where the disconnect was I was able to form a better idea of what the problem was:
In order to make to site more user friendly I took on these challenges:
I stepped into prototyping a mobile and desktop version of the new site with a focus on the mobile site. I started with lo-fi prototypes, developed a new style guide, and came up with these solutions:
I addressed this issue partially by making improvements to the visual design. I came up with a new color palette for the site and I used green primarily on the Energy.gov site and blue on the Energy Saver site. I also primarily used photography on the Energy.gov site and on the Energy Saver site I used playful illustrations and icons. This helped users understand where they were on the site.
In my research I also found that users had trouble with the dropdown menu for Energy Saver on the Energy.gov site. I decided to make the Energy Saver header navigation blue and remove the dropdown. By clicking or tapping on the header navigation it would take users directly to the Energy Saver site.
Of course, I need to make a way for users to easily return to the Energy.gov site from the Energy saver site. To do this I kept a link at the top of each mobile and desktop page in Energy Saver in green that takes users back to Energy.gov.
With these changes users should understand:
1. This is one website with two separate area and functions
2. Green takes me to one section and Blue takes me to the other.
In order to help users understand the purpose and benefit of the site I wanted to add some call to action buttons. This also helped in directing appropriate users to the Energy Saver site and it gave users a starting point in finding information they were looking for.
In the hero space I made a blue button with the text “Learn how you can save energy + money at home”. For the desktop I also added two other green buttons that link to places on the Energy.gov site.
From these changes users should be able to enter the site and immediately know where they want to go.
I knew it was important for users to be able to find information on conserving energy that would be useful to them. One of the biggest challenges I faced was the amount of information on the Energy Saver site. I read through over 100 pages of information and that didn’t even include some child pages and external links. (If you need to know how to build a micro hydroelectric dam hit me up!) A lot of the information that I found would be difficult to categorize to someone without special knowledge of certain topics. Since my target user persona would not likely have this kind of knowledge sorting the information was difficult. I used Miro to input all of the page topics and began sorting.
What I decided was that users may not know what the information they needed was but they would know why they were there. So I sorted everything by user scenario into four categories:
Sorting the information this way empowers the user to take the knowledge they do have (“I want to optimize my home”) and start finding the information they need. This would be helpful both for users who know the problem they want to address but need to find where it is located on the site as well as users who do know what they want to do but need information on a broader topic in order to decide what to do.
As a bonus I also updated the visual style of the webpage and designed a new logo for the Department of Energy.
• I choose to use the font Exo 2 which is a Google font and well known for its legibility and accessibility.
• For the logo mark I create an image that represents the earth that is made up of a grid; similar to a power grid.
• The most noticeable part of the mark is the bolt, created by the negative space, that represents energy.
• I made sure that the logo was easily recognizable at any size.
I put my prototypes together and did a couple rounds of testing with a few iterations. Overall, I was really pleased with how testing went. I gave users the task of finding information on "air-sealing your home", something on the current site, and similar to what I had initially asked users to do on the current site. I was pleasantly surprised to find that each one of my test subjects was able to navigate to the "air-sealing your home" page without having to go back.
I did find that in testing some users still had trouble in navigating between the Energy.gov site and Energy Saver site, specifically on the mobile site. When users clicked on the hamburger menu and then the Energy Saver item it took them to the Energy Saver page. But the hamburger menu for the Energy Saver page was very close to where the previous page was. Users expected that to be the same menu they had just seen on the Energy.gov page.
To fix this I moved the Energy Saver hamburger menu to the other side and placed the search bar below. (This also made the search bar more visible) I also emphasized the blue.
.gif)
I put my prototypes together and did a couple rounds of testing with a few iterations. Overall, I was really pleased with how testing went. I gave users the task of finding information on "air-sealing your home", something on the current site, and similar to what I had initially asked users to do on the current site. I was pleasantly surprised to find that each one of my test subjects was able to navigate to the "air-sealing your home" page without having to go back.
Hit me up on LinkedIn, download my resume, or email me and let's talk about my work, your work, UX design, product development, underrated fonts, or ask me about the time a monkey stole my glasses.
