Responsive Website Redesign: DOE Website
Role: UX/UI Researcher and Designer
Individual Project
Tools: Miro, FlowMapp, Figma, Google Suite
Timeline: 3 Weeks
Year: 2022
Concept: A navigational and UI redesign of the Department of Energy website. It focuses on information architecture, accessibility, and aesthetic so that the user can better achieve their goals.
Project Goal: Create a responsive website redesign of a government agency website.
The Problem
The DOE website has a vast amount of information which is difficult for the user to navigate. Its aesthetic is overwhelming and its information architecture is inconsistent. A user cannot easily find the information they are seeking.
The Solution
A navigational and UI redesign of the DOE website is needed. It focuses on information architecture and accessibility so that the user can better and more intuitively achieve their goals.
User Persona
Beth Triely, an environmentally responsible young citizen, visits the site to understand what the DOE is currently doing to combat climate change.
She is looking for information and tips to adjust their energy consumption for the better of the planet.
User Flow
I then laid out a typical user path for someone visiting the DOE website looking for information on combating climate change. They travel through multiple pages specific to climate change and renewable energy.
Redline Annotations of Heuristics Issues
Through usability tests and analyzing heuristics, I identified issues in the website’s design:
Difficult to read text
Dead end links off-site
Non-functioning buttons
Limited breathability in some areas
Lack of balance
Redline Annotations of Navigational Issues
By analyzing from a heuristic perspective, I identified issues in the website’s navigation:
Sub-categories could be alphabetized
Excess of categories leading to the same page
Small and/or distracting icons
Unutilized space in the bottom navigation bar
Navigation Card Sorting
Through card sorting, I identified excess or repeat categories.
I reduced the amount of primary navigation and grouped secondary and tertiary navs.
