.png)
Department of Energy
The United States Department of Energy (DOE) is an executive department of the U.S. federal government that oversees U.S. national energy policy and manages the research and development of nuclear power and nuclear weapons in the United States.
Role
Duration
Team
UX Researcher, User Experience & User Interface Design, Interaction Design
2 Weeks
Jasmine Robinson
Tools Used
The Problem
The site needed improvements to their navigation, page content, layouts, and purpose.
Also, the mobile had a problem with its navigation menu blending in with the background.
The Objective
The Department of Energy aims to ensure America’s security and prosperity by addressing its energy, environmental and nuclear challenges through transformative science and technology solutions.
The Solution
Improvement of the overall navigation, page content & layout & improve the desktop to mobile transition.
THE CURRENT SITE
A website redesign is needed to improve the main navigation, fix broken links and errors, prioritize content hierarchy, and help users easily complete their tasks without many pages to go through.
RESEARCH
To start getting into this redesign, I started with usability testing. Using 4 participates to complete certain tasks and provide feedback for how they were able to complete those taks.
IDEATION
Tools used
User Persona
I wanted to form a deeper understanding of our users' goals, needs, experiences, and behaviors. So, I created a persona based on my initial ideas of the target audience.
Without any research, I anticipated the user to have certain characteristics:
A professional female in her mid 30s, who volunteers in her spare time and loves being with her family.
She is enjoys being in nature & taking care of the world around her.
DESIGN
Desktop Sketches
Starting my design process, I used what I learned from usability testing and design tools to start sketch out a more intuitive and meaningful design.
Desktop Wireframe
From my initial sketch, I started to bring the idea to life and the initial steps for what the main content should be. Also, starting to incorporate the brand of the DOE with its signature colors. Prioritizing the main content, layout, and navigation.
First Desktop High-Fidelity Prototype
Iterations to Desktop:
From the wireframes created, it was time to work on the next steps in the design.
-
Using card sorting, main navigation was organized into the main categories the DOE handles.
-
For the page content, moved the priorities to the top of the page, emphasizing the DOE main goals, to help improve the world.
-
Also for page content, moving the how to get involved to the top of the page for people who want to contribute or learn how they can help.
First Mobile High-Fidelity Prototype
From the designs of the desktop version, it was time to move them into the mobile version.
-
I wanted to maintain as much consistency as possible, starting with the top navigation. The logo was condensed down and added the menu, search, and news for easy navigating.
-
Followed the main content with the priorities and getting involved to the topic, and changed the image and button the side.
Final Desktop High-Fidelity Prototype
From user testing, I made improvements to the design.
Iterations to Desktop:
-
Changed the color of the main navigation to be more consistent with the footer navigation.
-
Changed the font to create a more reliable and professional sense fo the DOE.
-
Improved the layout and took advantage of white space more.
-
For page content, added a header image and text that conveys the sense of purpose for the DOE.
-
Improved the how to get involved by adding a carousel of options for the users to view quickly.
-
Added a easy way for users to subscribe and get more information on things going on in the world.
-
Kept the news at the bottom, so the user can see what is currently going on.
Final High-Fidelity Prototype
From the desktop improvements, moved them into the mobile.
Iterations to Mobile:
-
Prioritized the sense of purpose with the main text and image under.
-
Improved the top navigation, the menu button on the left side, the logo in the middle, and the search on the right.
PROTOTYPE
FUTURE RESEARCH
In the future, I would like dive more into the main navigation and build those pages out. Also, work the the login pages for those who work with the DOE and career pages.