User Interface Anaylsis

Proto Persona

We created a proto persona to gain a better understanding of who might access the energy.gov website and how they may navigate it.

WHY “JERRY” VISITS THE SITE:

He is looking for clean up sites in his surrounding area to raise money for. He is also looking for better and trustworthy information to provide to his students in lecture. His main goal is to use energy.gov as a trusted resource for his course for years to come.

After developing this proto persona, we evaluated what it would look like if this person tried to visit the website. To analyze that, we gave the persona a hypothetical reason.

User Path

To dive in deeper to our persona we came up with a scenario for why he may be visiting energy.gov.

Heuristic Evaluation

We then further analyzed the website to determine what worked and what did not so we could improve aesthetics and accessibility. For this we conducted a heuristic and accessibility evaluation.

Accessability Evaluation

Main Accessibility Finding:

1. Titles were difficult to read with the graphics used as backgrounds.
2. Titles to articles blend into article descriptions on the homepage.
3. Original color palette does not pass the accessibility test.
4. Too much white space causes the user to get lost.

Guerrilla Usability Testing

Objective:

As UI designers, we need to make sure that users are able to navigate through the website to find information successfully, so we designed three tasks to test.

Tasks:

1. Have a user locate the website’s mission statement.
2. Find the map of cleanup sites provided under “Environmental Cleanup” page.
3. Find the detailed information about “wind” energy in the “Clean Energy” section.

With these tasks we conducted 5 layout & design usability tests.

After discussing and analyzing the results from our usability tests, we organized and streamlined our users’ thoughts into a Usability Testing Priority Matrix.

Main Takeaways:

• Lessen the amount of text and information on the homepage.
• Make titles and navigation buttons clear and concise.
• Create a user friendly navigation bar with new users in mind.

Mood Board

Once we complete our usability testing for layout and design we put together a guide/mood board to showcase our vision for the revamped energy.gov website.

From our accessibility test we found that the energy.gov color palette failed when it comes to accessibility. So we just tweak the existing color so that they pass.

Navigation Evaluation

After testing and creating our mood board for the direction we wanted to take the energy.gov redesign we moved into analyzing the navigation as well as testing it with users to determine how we can rework the navigation to make it more efficient and smooth for users.

We conducted four more tests to determine the usability of the Energy.Gov website on both desktop and mobile.

Main Takeaways:

• Changing the verbiage and organization of the drop down menus would improve the navigation.
• Changing the size and relevance of graphics would improve aesthetics.

Wireframes

Lofi Desktop Wireframes

Once the card sorting was complete, I created the reimagined Energy.gov desktop homepage and navigation in lo-fi wireframes.

We wanted to give the website a clean and simple layout for each page so the “About Us”, “Environmental Cleanup” and “Wind Energy” page have a similar layout to the “Clean Energy page” that is shown above.

There was some rearranging of the header navigation, but the more impactful change was the reformatting by resizing graphics and ridding of jargon for a cleaner and more focused look.

Lofi Mobile Wireframes

Since we are making a responsive website I created mobile wireframes as well to go along side the desktop wireframes.

We kept the carousels feature but reduced the size of the graphics for the articles so that more links and content are visible upon website arrival. The new header and footer navigations are also displayed here as drop-down menus.

Lofi Usability Testing

We conducted three 5-second tests to determine the first impression of the Energy.Gov homepage and navigation.

From those tests we put the feedback from users into a priority matrix to determine what need to be tackled first in our iterations.

Main Takeaways:

• Find a way to make it more obvious that it’s a homepage with either a hero image or a small description.
• User a larger font for the navigation bar to have the eyes drawn to it more naturally.
• The carousels were well received.

Final Prototypes

Click on devices to see prototypes!