Department of Energy Redesign| Case Study
Role:
Jeffrey Deakyne-(Individual Case Study)-UX/UI Designer — User research,Visual design,Prototyping & Testing
Timeframe:
3 weeks
Tools:
Figma, Miro, Adobe
Background:
The Department of Energy has one of the richest and most diverse histories in the Federal Government. Although only in existence since 1977. The Energy Department is work to ensure America’s Energy Future, Scientific & Technological Leadership.
The Challenge:
When I first looked at the website to assess an initial heuristic evaluation the UI was very cluttered with cards and information links. This was very overwhelming when thinking of how I could possibly consolidate the information and links without removing information from the original UI.
The Problem:
The DOE UI is very confusing when searching for specific interest and has an overwhelming amount of information on the pages which result in getting lost when just trying to find simple information.
The Solution:
How can I create a streamline flow to guide the user successfully to their information destination with also designing a cleaner more accessible UI.
The Journey Begins
User Research:
I started by creating a Proto-Persona that would that would help demonstrate the needs of a user that was interested in saving money on home energy and needed more information on how she could prepare her home to do so.
Sara ultimately wants to save money on her monthly energy bill at home and needs to find information on ways she can make her home more energy efficient. How can we empathize?
Diving into the flow:
Sara’s flow would start from the home screen to where Sara would find information about how to make her home more energy efficient.
Above you can see Sara goes through the flow of the website in which she is encountered with lots of information and useless steps before she gets to her destination.
I performed an in depth Heuristic evaluation and added annotations as well as performed user testing to help me better understand the UI and understand what I was up against. This would also help me get to my ideation phase to start brainstorming ideas for improvements for the UI.
Prioritizing Insights:
After gathering data from user test I was able to start prioritizing the concerns and important questions the users were encountering when asked to find information on ways to save energy at home.
Things are starting to come together !
Card Sorting:
This was a crucial part of the research process I needed to help figure out how to consolidate the large amount of information on the website. Successfully I was able to narrow and consolidate the primary, secondary and footer navigations with less outside links.
The creation begins!
Wire-framing:
I created mobile and desktop wireframes as well as components for both including a carousel slider and drop down menus. Which gave me the bones of the UI and helped me visualize what all the information and cards would look like. I wanted to keep it clean looking at the same time as clearly displaying information for the user.
Iterations:
I went through three iterations. My first iteration clean but did not keep with the original color scheme. The second I wanted to give it a more modern big font feel but realized this is still a government website so better keep it simple. The third I wanted to grasp the original color scheme with green and a calming blue to simulate the earths atmosphere with clouds and windmills. It was winner.
Final Prototypes!
User Testing/ Final Iteration:
Commentary:
“The font is inviting and makes me feel comfortable”. -Tom Segall
“I like how the flow is smooth and straight forward, not overwhelming”. -Shanna Greenleaf
“This color scheme is the opposite of abrasive, I want be on this website.”-Christian Salgado Baretto
What I Learned:
- When designing the UI I found that it was key to keep the UI simple and easy to navigate which created a better user experience.
- Giving the user card options with pictures for finding specific links helped so they did not have to use the hamburger menu if not necessary. It created a direct path.
- Color choices for the UI were a little difficult trying to keep with the original color scheme and keeping accessibility but eventually I found a nice color scheme that fit as well as put the user at ease through calming colors.
- Government websites seem to be overlooked and poorly designed
