Energy.gov

Governmental websites often present us with a well-packed data center and leave us with a robust site navigating system, it can be a challenge when one is performing a general data search.

Role:
  • UX Researcher
  • UX | UI Designer
  • Design Strategist
Duration:
  • 4 weeks (Co-working Project)
UX Techniques:
  • User Interview & Data Analysis
  • User Persona
  • User Flow & Journey
  • Wireframe
  • Clickable Prototype

Tools:

  • Miro
  • Figma
  • Google Drive
  • Photoshop

The Problem

The objective of the redesign of Energy.gov was to create a straightforward approach to the navigating system.  

Data we collected and analyzed through interviews, indicates the issues users often come across are not limited to missing links on a webpage and outdated information not getting updated, most importantly, the challenge of navigating the site.

Heuristic Evaluation

The website was analyzed through aesthetics, functionality, and usability and the interviews gave us a direction which field needs more attention.

"First off, it looks outdated.  The logo looks small and doesn't give me a sense of being a legit government website.  The choice of images they used looks overwhelming."

"Looking up what I needed was easy, however, why multiple links and all of them pointed to the same exact page, when you can just one?"

It's definitely not aesthetically nice, the contents are comprehensive but look like a bullet point essay straight out from a word document, no formatting.

Persona

We established a persona, Adrian, a young professional who is concern about the environment and also a new home owner wants to find out an efficient way to save money and reduce carbon footprints.

Tasks

We prepared 3 simple tasks for usability testing, and what we found were:

Task 1: find out how to start on green energy

" It was not hard, but not easy, it kept sending me from page to page, and the information was clear, but the journey wasn't efficient. "

Task 2: to find ways to save energy for vehicles

" I was on the save money and save energy page, it led to other pages, and i felt trapped and couldn't find the information I needed. "

Task 3: try multiple ways to go back to the landing page

" I tried clicking the logo, back button from where I am to the main landing page, the top navigation bar and footer, all work great "

Wireframe

From the task testing feedback, it's clear that the content was comprehensive yet, the journey leading to such information wasn't straightforward and can be improved.  Since most users are familiar with either newspaper or magazine layout, I thought the redesign can apply a similar layout by keeping the visual in the same pattern and consolidating sub-categories.

Prototype

Redesign was created around user's feedback, a simplified layout

What did I learn from this project?

The redesigned interface simplified the research journey, and the result was proven by another round of usability tests.  

I've kept the green color scheme from the original design and expend it to a coordinated color palette, and since what I'd learned from the card sorting exercise, that wording and the ordering of the categories can be confusing, also the responsiveness of the interaction plays a role in user engaging rate.