Department of Energy Site Redesign

  • UX/UI Project
  • Duration: 4 Weeks

Project Description

The mission of the Energy Department is to ensure America’s security and prosperity by addressing its energy, environmental and nuclear challenges through transformative science and technology solutions.

Problem

The site’s current design has vague Information Architecture that makes navigating their site challenging and the lack of an accessibility option further detracts from the user’s experience.

Solution

Our goal was to improve this site’s Information Architecture as well as provide a more comprehensive accessibility option for both desktop and mobile platforms.

My Role

Information Architecture, User Research, Heuristic Analysis, Interaction Design, Prototyping, User Testing

Team

  • Jacob Driver
  • Vincent Radford
  • Matt Wheeler
  • Jobey Wright
  • Yicheng Zhang

Tools Used

  • Figma
  • Mirro
  • Adobe CC

Research Methods

Step 01

User Research

Heuristic Evaluation

We began the project used this method to analyze and discover any issues that might hinder the user’s experience navigating the siteas well as recommend possible solutions to address the issues at hand.

User Interviews

We managed 5 user interviews to determine users’ viewpoints and expectations when it comes to the Department of Energy

User Persona

Following our customer interviews, we synthesized our findings and were able to create this customer persona.

User Task Flow

Users were asked to perform a task of finding a specific page on the current site. Users were asked to use the navigation and to voice any questions of concerns as they went along.

Step 02

Information Architecture

Affinity Mapping

Using data gathered by both the interviews and Heuristic Evaluation, we constructed an affinity map to help pinpoint the problem areas that need to be addressed

Priority Sorting

We used the data from the Affinity Map and grouped the most relevant feedback into a priority matrix

Card Sorting

Going by our initial Heuristics Evaluation and the User testing/Interview feedback we streamlined the sitemap by removing the redundant link items (left) and grouping similar links into a new set of categories within the recommended sitemap (right).

DOE card sort pic

Step 03

Iteration Design

Lo-Fi Prototypes

New Brand Characteristics

A Visual and Interaction Design Guide for the redesigned DOE site.

Brand Pic

Moodboard

Images were used to convey the many different uses of energy with an emphasis on clean renewable sources that will preserve people’s well being in the present and generations to come.

Moodboard pic

UI Style Guide

Playing off the reference and inspiration of the moodboard, we began fleshing out the Style Guide.

Ideations

Lo-Fi Prototye

Prototyping begain centering around exploring options for nav design and content layout for desktop and mobile.

Testing Notes

Initial prototype testing. Six participants:

After conducting a usability test with 6 users, the overall feedback was about some content being too large and others not being large enough. Most leaned toward the simplified navigation without the image.

A/B testing. Two rounds:

Making the hero image larger and minimizing the navigation received positive feedback. Most of the other changes didn’t receive much attention throughout the both rounds since they were mostly minor tweaks (alignment and word spacing).

Accessibility Issues

Although the current site scored a 98/100 when it came to WCAG success criteria categorized by Level A, AA, or AAA conformance levels, it has no accessibility options for users who have unique issues that may prevent them from successfully navigate the site.

Ideations

Several peer and user testing based iterations eventually led to the High-Fidelity Prototype

Step 04

High Fidelity Prototype

Try out the Prototypes

About the Prototypes

  • Not everything in the prototypes are clickable
  • The clickable elements will flash blue if you click on a non-clickable item.
  • Pressing the letter 'R' on your keyboard will take you back to the beginning.
  • Forms and fields do not work with keyboard input.
  • Click the link HERE if the prototype doesn't appear

Step 05

Conclusion

Key Takaways

Almost all government sites hold a large amount of data which can overwhelm a user who is trying to navigate through it, the DOE site is no different. The biggest challenge was sifting through the redundancies and roadblocks common in government sites and streamlining the overall user experience while making the site both engaging and visually appealing. The “Chunking” method of organizing large amounts of information cannot be understated. I used various ways of doing so, including card slides, accordions, and interactive modals. This is especially invaluable for mobile devices and their particular view specifications. This was good practice design for the world of mobile since it is most users’ tools of choice when it comes to navigating the web.

Other projects you may like....

Chaser App

Drawchange site Redesign

Sweat Buddy

Copyright 2019-2023 | All Rights Reserved