Department of Energy
Featuring a mobile-first RWD, updated & contemporary navigation, & a reorganized information architecture.
About
The Department of Energy (DOE) is an agency of the US Government that acts to ensure the conservation of energy & environment within national boundaries. Their primary goals are to increase efficiency of energy expenditure, slow & decrease effects of climate change, and create & enforce regulations in accordance with novel research regarding the former two.
Tools
Figma
Adobe XD
Google Forms/Drive
Balsamiq
Invision
Miro
Project
The project’s objectives were to solve fundamental usability issues presented on the Department of Energy website & mobile application. To do so, a variety of users were observed using the site, both before and after redesign. During the process, the hierarchy of information and navigation were reorganized & reconstructed, while the site also received new responsive breakpoints with corresponding designs. Overall, the redesign was observed to be successful in enhancing user experience.
Jump to a Section
(empathize)
heuristic evaluation
The current site has several effective aspects, but quite a few more issues.
Positives: easily accessible search with intelligible filter options; clear & concise page titles, headings are emboldened & well-defined
Negatives: highly unorganized & unclear information architecture, not apparent or hidden important site elements, & the UI is inconsistent from page to page
To begin the redesign process, it was decided to jump straight into usability testing after the initial evaluation of the sit. Hopefully, this would shed light on the features that should be kept, improved, or scrapped.
Usability Testing I
The purpose
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard
the tasks
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
what were the outcomes?
Users were:
- Overwhelmed by the abundant content & tiny text
- Unable to figure out their location on the site (i.e., no breadcrumbs)
- Lost upon leaving the homepage due to the lack of sensical information hierarchy
- Not able to access on mobile devices
how were the results implemented?
Following user testing, results were analyzed, a user persona created, and priority attention was given to reformatting the site map and primary navigation, as those caused the most
Feature prioritization matrix of usability testing results.
Card Sorting
New participants were asked to organize a sample of thirty 2nd & 3rd level pages into their chosen categories.
Users Most Commonly Suggested These Categories:
(define)
Once we had gotten to know & understand our users, we compiled significant pain points, personality traits, desires, & motivations to build our problem statement and base our redesign on.
User Insight
Statement
Online users who may be interested in conservation, construction, government policy, science, or just browsing, need a clear, effective way to navigate the Department of Energy’s website.
Currently, site’s hierarchy of information, user interface, & non-responsive web design deters people of any tech-savviness levels from using the valuable resources and information hidden within the site.
Problem
Statement
The Department of Energy (DOE)’s website was created to inform the public about the internal research & policy regarding energy & the environment. We have observed that the DOE website is not self-explanatory & lacks ease of use, causing users to abandon the site & seek information elsewhere.
How might we improve site cohesiveness & usability for the Department of Energy?
New
Site Map
Using data from the card sorting, a new site map was constructed implementing a generalized version of the categories suggested by the participants. Each category is intended to cater to the most likely users of DOE’s site, such as the climate concious, students & teachers, home renovators, and business owners.
(ideate)
Information Architecture
Primary Navigation
- Pages were organized into a primary navigation system composed of 3 levels
- Levels consist of: landing, 2nd level, & 3rd level pages
- Constructed as an alternative to a mega nav, as this method may be easier for new users to browse content they are unfamiliar with
- Because of the sheer amount of content & pages on the site, giving the user a method of browsing 3rd level pages through the navigation limits confusion & the need for a secondary navigation
Information architecture
Beginning Header & Footer Mockups
Desktop
Mobile
Tablet
Once we had gotten to know & understand our users, we compiled significant pain points, personality traits, desires, & motivations to build our problem statement and base our redesign on.
Responsive Design
UI Style Tile
(prototype & test)
Initial High-Fidelity
RWD Prototype
Using data from the card sorting, a new site map was constructed implementing a generalized version of the categories suggested by the participants. Each category is intended to cater to the most likely users of DOE’s site, such as the climate concious, students & teachers, home renovators, and business owners.
Usability Testing II
The purpose
To assess the efficiency of the navigation redesign and RWD elements.
The Goals
To uncover any hindrances to the user interface,
the tasks
- Look for and find any page off the homepage that interests you
- Find career and volunteer opportunities
- Use the site’s navigation to seek online learning resources for adults & workers
what were the outcomes?
Users were:
- Overwhelmed by the abundant content & tiny text
- Unable to figure out their location on the site (i.e., no breadcrumbs)
- Lost upon leaving the homepage due to the lack of sensical information hierarchy
- Not able to access on mobile devices
how were the results implemented?
Following user testing, results were analyzed, a user persona created, and priority attention was given to reformatting the site map and primary navigation, as those caused the most
Responsive Design
Iterated Prototype
After addressing issues found in user testing, the design was further simplified and iterated. This consisted of changing the hero image and formatting, highlighting the email sign-up process, and modifying headers & footers.
final
Prototype & Navigation
Final Thoughts & Next Steps
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don’t look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn’t anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using ‘Content here