How Might We Redesign The Department of Energy's Website To Help Homeowners Save Money & Energy?


Duration: 5 weeks

Independent Case Study

Image alt tag
About The Project

OBJECTIVE

Redesign a meaningful responsive user interface for the Department of Energy's website.

CHALLENGE

Begin working with a team of UX Designers. Early on in the project, only you can continue working on the project independently. How do you execute the project on your own.

MY ROLE

Utilizing the Double Diamond Design methodology, with the help of my team during the discovery and definition phases, I was able to contribute my research and analysis.

Independently, I completed the definition, development, and delivery phases on my own.

U.S. Department of Energy Website: UI Redesign Case Study

Double Diamond Design Methodology

1. Discovery Phase:
Gather information

Problem Statement

The Department of Energy’s website was built to be a primary resource for people to learn more about renewable energy in the United States.

However, we have observed The Department of Energy’s website is not effective and overwhelming for visitors to use due to its convoluted paths to find information and is written using terminology that is too technical.

How might we improve the Department of Energy website to be a place for people to go to and quickly find their desired information and decrease user bounce rate.

The Solution

Break down all of the content to categorize the information, use those categories to redesign how the website is mapped as well as revise the terminology that resonates with a larger audience to deliver a better user experience. 

U.S. Department of Energy Website: UI Redesign Case Study

Proto Persona:

Meet Devon!

What were my assumptions?

  • Non-technical visitors to the site

  • Do not visit the DoE site regularly

  • Aware of “clean, green, renewable” energy but don’t really know what the differences are

  • Unsure of all types of “clean energy” there is.

  • Government publishes information about solar panel installation investment, so the information has to be on the government site, right?

  • Not feeling confident in their capabilities

User Testing:

We tested 5 users who were given the same 3 objectives to complete on the Department of Energy's website.

The purpose was to be able to observe a user's experience on the website to better understand:

1. How people use the website to find each objective

2. What problems are people running into

3. Where and why.

Using these findings we can build a user path and prioritize how we can apply the right solution and improve the usability.

The 3 Objectives:

1. Find Solar Page

2. Find Homeowners Guide

3. Download Homeowner's Guide

U.S. Department of Energy Website: UI Redesign Case Study

Brad, 31, User Testing Existing DoE Website

Key Insights & Findings:

1) A convoluted path to find information

2) Links hard to locate

3) The technical wording of categories and sections of the website made this process even more overwhelming

4) Difficult to remember their path and the task to be performed.

2. Define: Make Sense of The Data

Defined User Paths

1. Without technical knowledge, we felt that it could be hard to find the relevant information. 

2. Multiple paths

3. Useful Links not available on all pathways

4. Technical Tone across the site categories

5. Too many steps, can't remember user path

Feature Analysis Matrix

U.S. Department of Energy Website: UI Redesign Case Study
3. Development: Start Designing!

Using the identified categories in the colored post its, I broke down the information architecture even more 

  • Attacked the subcategories (purple) 

  • Also applied the hyperlinks 

  • Sorted and resorted these cards by the designated Categories 

  • Tested out the below navigation bar 

  • Renaming the nav primary because the wording was confusing and wouldn’t do a good job telling someone theyd they’d find their content under there 

U.S. Department of Energy Website: UI Redesign Case Study

Lo-Fidelity Wireframing: Established Categories

  1. Based on the themes I captured in the primary and secondary pages, I established categories that would be the new naming tabs for the navigation bar

  2. I went ahead with this new navigation bar for my lo-fi wireframes to be able to see the new navigation bar in context, build out a drop down menu and user test

U.S. Department of Energy Website: UI Redesign Case Study

I found a video log I recorded of my frustration.

(Italian hand talking)

This was a costly learning period.

Why?

I was very fixated on the "homeowners" journey that it wasn't realistic. Time was running out so I went back to the original navigation bar and zero'd in on the solar journey- not the homeowner journey

U.S. Department of Energy Website: UI Redesign Case Study

Finally,

I designed my own user-testing plan to capture feedback and problem areas with my design

I reached out to my colleagues and friends to help me complete my usability testings.

Taking those test results and feedback, my next steps were to reiterate my prototypes, until I ran out of time and submitted my final responsive web and mobile UI redesign deliverable

U.S. Department of Energy Website: UI Redesign Case Study

Second Round of User Testing Results:

Usability Tester 1: Results

Usability Tester 2: Results

The Setting:

Before submitting this project, I conducted a round of moderated usability testing in order to reveal possible usability problems with (2) users.

For each tester of my Hi-Fi Prototype, I walked them through the user scenario by asking them to approach the (3) tasks I have laid for them as if they were homeowner looking for information on solar panel installation for their homes. Then, how would you navigate to find that information given this objective I have laid out for you.

I then stepped away from the computer screen and moderated from a few feet behind the tester to observe their actions in completing each task.

My Goals:

1) Did I successfully address the problem areas from the original Department of Agency Website users had.

2) Are people able to navigate to the solar energy page from the homepage.

3)Are people able to easily able to find solar energy information quickly

4) Are people able to easily able to find solar energy information

2
Iterations
2
Usability Tests
3
Tasks
100%
Tasks Completed
U.S. Department of Energy Website: UI Redesign Case Study

Takeaways and Learnings

In my book, this project will never be marked as "complete." What project ever is "completed"?

Starting this project with a team, there was constant "moving on to the next." However, when I was in control of my own time, wireframes, iterations, design, testing, I would spend days on one page, I would revise and revise before I would let myself move onto the next step. It was great because I learned how to do a lot in figma, however, I was also on a very tight schedule and I wasn't satisfied with my work.

I met with a graphic designer to talk to her about this never ending cycle of, build, change, build, change with no end in sight. I asked her if she ever considers her work on her client's websites ever "complete"?

Graphic Designer Friend: "no, but...what are you trying to do?"

Me: I want the user to go from the homepage to the homeowner's manual.

Graphic Designer Friend: "Then just do that."

The advice: only focus on building one pathway to the solution. All the "other pathways," "everything else," "what ifs" leave for later. Clients are going to always come back with changes and feedback and to always expect there are going to be iterations. Present A SOUND SOLUTION and submit.

I have always felt I needed to come up with THE solution! The solution that is the best, that will always work, no problem areas, its all been figured out. No. Come to a solution, understand the priorities, understand the pros and cons and using valuable user testing and feedback, grow and iterate from there.

This project was my life for several weeks and I look forward to reviewing this project again and reiterating it throughout my career as a grow and expand my abilities, thinking, process, and measure how far I've come.

Special thanks to my graphic designer friend :)