Department of Energy
Featuring a mobile-first RWD, updated & contemporary navigation, & a reorganized information architecture.
About
Department of Energy (DOE): an agency of the US Government that acts to ensure the conservation of energy & environment within national boundaries.
DOE’s primary goals: to increase energy efficiency, mitigate the effects of climate change, and develop and enforce regulations based on novel research findings related to these objectives.
Tools
Figma
Adobe XD
Google Froms / Drive
Balsamiq
InVision
Miro
Project
Objective: to solve fundamental usability issues presented on the Department of Energy (DOE) website & mobile application.
Method: usability testing—users were observed using the site, both before and after redesign.
Results: 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.
1. Inital Evaluations
Heuristic Evaluation
Before starting the testing and redesigning process, a heuristic evaluation was conducted on the DOE site to make an informed methodology for producing the best, most user-friendly outcome. Upon evaluation, the site in its original state was considered to have several practical aspects, but also features various factors inhibiting usability and intuitive operation.
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/hidden essential site elements, & inconsistent UI from page to page
Usability Testing I
To begin the redesign process, it was decided to jump straight into usability testing after an initial evaluation to shed light on the features that should be kept, improved, or scrapped.
Task: Participants were asked to completed three objectives—
Outcomes: participants 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
Following user testing and data analysis, a user persona was created, and priority attention was given to reformatting the site map and primary navigation, as these elements caused the most confusion during user navigation.
Above: Feature prioritization matrix of usability testing results.
Original Navigation Issues
To begin the redesign process, it was decided to jump straight into usability testing after an initial evaluation to shed light on the features that should be kept, improved, or scrapped.
Card Sorting
New participants were asked to organize a sample of thirty 3rd-level pages into their categories created by the individual. Groupings that were most commonly suggested by the user were:
Energy: including cards such as fossil fuels, wind power, and clean energy
Home Improvement: including cards such as energy saving and saving with appliances
Education & Opportunities: i.e., STEM and Volunteering
Science & New Developments: i.e., Projects, News, and Analysis & Projections
About Us: including About Us, Contact Us, and Job Opportunities
2. Define
Problem Statement
After gaining a deeper understanding of our users, we identified key pain points, personality traits, desires, & motivations that informed our problem statement and guided our redesign. Additionally, a user persona (below) was created to represent a potential user who might occasionally access the DOE website.
Problem Statement: DOE’s website was created to inform the public about the agency’s internal research and policy regarding energy and the environment. We have observed that the DOE website is non-self-explanatory and 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?
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, the site’s confusing hierarchy of information, inconsistent user interface, & non-responsive web design (missing mobile breakpoint) deters people of any technology skill level from using the valuable resources and information hidden within the site.
Revised 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.
3. Ideate
Information Architecture
In creating a new 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
Responsive Header & Footer
UI Style Guide
5. Prototyping
Initial Mid to Hi-Fi RWD Design
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 of the secondary round of usability testing was to assess the efficiency of the navigation redesign and RWD elements, with the ultimate goal of uncovering any further impediments hindering users from having comprehensive and seamless usability of the new interface.
Task:
- 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
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
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
Iterated Responsive Prototype
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