U.S. Department of Energy
Government Website Redesign
MY ROLE: UI & IA Analysis and UI Design
TIMELINE: 5 Weeks
The Problem
While U.S. Dept. of Energy website is a wealth of information for everyone from consumers to businesses of many different industries, users navigating the site to find the information they seek find it challenging and time consuming leading to frustration and confusion.
How might the information architecture be reorganized to design a better navigation so that users can efficiently find the information they seek?
Objectives
-
Reorganize website information architecture.
-
Redesign user interface.
-
Create Responsive Desktop & Mobile website.
RESEARCH
Proto-Persona
Gerald, an Electrical engineer by trade, seeks to reduce his energy costs. He's curious about adding solar panels to his home but isn't sure about what types of rules and regulations there are. He visits the Energy.gov website to learn more, but finds himself overwhelmed with trying to navigate the site and when he tries to search he finds so many articles he isn't sure where to start.
Heuristic Analysis & Redline Annotations
To get a better understanding of Gerald's frustrations and gain a better understanding of the site, a heuristic analysis was conducted and redlined annotations of current site issues and suggested recommendations to assist with the redesign.
User Path
Now knowing Gerald's frustrations, a user task was defined to conduct usability tests to see if other users had similar issues while navigating and searching for information on solar panels. To make the test more direct, an article titled "Planning a Home Solar Electric System" was chosen as the end goal.
Usability Tests
5 usability tests were conducted with 3 out of 5 testers unable to successfully complete the navigation task to the specified page with out any assistance. Users were left confused as there are many different articles about solar panels that finding the right one quickly was challenging.
Many of the insights users had with their pain points are similar as to what was discovered during the heuristic analysis.
IDEATION
Navigation
After having done usability tests and noticing that navigating the task was challenging, redline annotations were completed for the navigation bar to see where improvements could be made so that Gerald can better navigate
Some of the takeaways from the redline annotations include:​​
Card Sorting
A list of links from the website were compiled and a card sort was performed to determine if there were any potential commonalities or if there was a better way to group links to help start buidling the site map.
Site Map
It was determined based on initial usability testing that users wanted a more efficient way to learn about energy sources, including solar energy so a new navigation tab with 'Energy Sources' was added to the main navigation bar.
New Navigation Bar
A new navigation bar with links to 'About' and 'Energy Sources' were added to give users quicker access to those areas.
PROTOTYPING
Wireframes
Users enjoy websites with clean, easy to use interfaces so that they can complete the tasks they set out to. With this in mind, wireframes were made for both desktop and mobile to best suit these needs.
Style Guide
The existing website colors of black, white and lime green deemed a little too basic and the overall style of the interface felt a little rigid.
With the redesign, the colors chosen help to not only brighten up and soften the website but they also bring in a sense of cleanliness while maintaining a statement of importance.
Hi-Fidelity Desktop Mockups | Interactive Prototype
Hi-Fidelity Mobile Mockups | Interactive Prototype
Prototype Usability Testing
Once the redesign was completed, another round of usability testing was conducted to see if the improvements that were made helped users to better navigate the specified task. Feedback of the overall UI was also requested.
Each tester was able to easily navigate the site to follow the task flow to the specified page. Users also enjoyed the overall clean appearance of the site, although one user questioned an area that may be of concern with accessibility.
Final Thoughts
• Government websites are full of information for different industries as well as consumers but finding the information one seeks can be challenging as the site structure can be cumbersome.
• Providing users with better information flow and more appealing visuals could lead to better overall user experiences.
• If given more time, top priority would have been exploring additional user flows, more testing and look further into site accessibility.
OTHER PROJECTS
Responsive Website Design
