Double Diamond Design Methodology
How Might We Redesign The Department of Energy's Website To Help Homeowners Save Money & Energy?
Duration: 5 weeks
Independent Case Study
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.
1. Discovery Phase:
Gather information
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.
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
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
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
Lo-Fidelity Wireframing: Established Categories
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
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
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
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
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
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 :)