U.S. Department of Energy (D0E)
Government Agency Website and Mobile Redesign.
_edited.png)
Client
Department of Energy (DoE).
Role
UX/UI Designer
PM
Tools
Figma, Photoshop, Illustrator, Miro.
Timeline
4 Weeks
Team
Victoria Demetrio (me)
Project Deliverables
UX Research report, Mifi Prototype, Hifi Prototype.
The Problem
The current website feels overwhelming and hard to navigate, making it difficult for users to find the information they need.
Key issues include a cluttered layout, outdated design, accessibility challenges, inconsistent branding, and poor mobile responsiveness.
The Goal
To design an experience for users that is simple, accessible, and visually appealing. Our aim is to enhance usability and facilitate quick and easy access to information.
The Solution
The revamped website design prioritizes intuitive navigation and clear, concise content presentation to ensure ease of use for all visitors.
I also incorporated visual elements that reinforce the Department of Energy's brand identity, fostering trust and recognition.
Desktop | Home Page
Desktop | Energy Economy Page
Desktop | Save Energy, Save Money Page
Desktop | Contact Us Page
Mobile | Home Page
The Impact
The testing revealed a clear improvement in efficiency and usability.
80%
task success rate after the redesign
36%
reduction in task time
Existing Website Analysis
Before proceeding with the redesign of Energy.gov, I first spent some time getting to know the current state of the website's usability through usability testing and heuristic evaluations.
The heuristic evaluation reveals notable deficiencies in website design consistency and information organization. Some of the main issues:
-
Lack of visual cohesion and consistency across different pages.
-
Overwhelming and confusing information organization.
-
Absence of Mobile Optimization.
These insights provided valuable guidance for the redesign process, allowing me to prioritize improvements within the given time constraints.
Key Research Themes
I conducted 30 surveys and 6 semi-structured interviews with users of the U.S. Energy Government website. From the results of the surveys and interviews, I was able to identify the following pain points:
-
Poor navigation and search: Users struggled to find information quickly.
-
Unclear content structure: Screens lacked hierarchy, making content hard to follow.
-
Outdated design: The visual style felt unengaging and dated.
-
Responsiveness issues: The site performed poorly on mobile and across devices.
_edited_edited_edited_pn.png)
Understanding the User
Based on the results of the previous research, I crafted a persona that represents the potential U.S. Department of Energy website user.
_edited_edited.png)
User Journey
With the user persona in mind, and due to the short time we had to execute the project I focused on two main tasks that were previously tested. I created the new user journey focusing more on the process than the final solution.
The two main tasks were:
-
To find technological updates and subscribe to the newsletter.
-
To find resources for small businesses and submit a contact form.
The future user journey aims to streamline the information search process by improving the footer and organizing the site design.
Ideation
Based on previous research and considering the user personas needs, I started by brainstorming solutions and prioritizing them based on potential impact and feasibility.
Key areas for improvement included:
-
Streamlining navigation through clearer information architecture
-
Refreshing the visual design to boost appeal and engagement
-
Ensuring full mobile responsiveness for a consistent experience across devices
The ideation phase was very creative and I came up with ideas to improve the overall user experience and build trust and confidence in the U.S. Government's energy website.
Information Architecture
I reorganized the site using card sorting and created a new sitemap in Figma to improve navigation and content clarity. The updated footer centralizes key links for easier access.
Key Performance Indicators (KPIs)
Alex can find the needed information in less than 2 minutes.
With just one click in the footer, he can access contact information and sign up for the newsletter.
Now, as an Energy Analyst, Alex can quickly and easily access official documents, reports, and the latest updates related to energy policy and initiatives.
Visual Design
For the UI redesign, I decided to go for a color scheme that is aligned with the existing U.S. Department of Energy (DOE) branding to ensure continuity with the established identity.
The visual design integrates two primary colors, seeking to maintain a visually appealing appearance while keeping a professional tone.
Iterations
I began with exploratory hand sketches and developed them into mid-fidelity wireframes in Figma. After user testing, the designs evolved into a high-fidelity prototype.
The images below show how key screens were refined based on user feedback.
User Testing
I conducted virtual usability testing on our mid-fi prototypes and gathered key insights to improve the design. The main takeaways included:
-
Break up long content for better readability
-
Simplify the newsletter subscription flow across devices
-
Avoid carousels on key pages for clarity
-
Redesign the footer to enhance navigation
Before
After
The Solution
After weeks of effort, the final result achieved provides users with a streamlined experience in an easy-to-navigate and visually appealing site.
Goals
Returning to the initial aim of the project, the revamped U.S. Department of Energy website offers users a straightforward, accessible, and visually appealing experience. This not only reinforces the Department of Energy's brand identity but also contributes to fostering a sustainable future.
_edited.png)
Project Reflections
Redesigning Energy.gov on my own was a turning point in my journey as a UX/UI designer.
The project challenged me to rethink content structure, refine navigation, and design with clarity and purpose. It pushed me to grow creatively and strategically.
Key Learnings
A user-centered approach deepened my understanding of behavior and intent, helping guide design decisions with empathy. Iterative testing and feedback loops allowed for continuous improvement and greater design flexibility.
Personal Growth
Owning the process sharpened my strategic thinking and resilience. While I’m naturally driven to keep improving, I’ve also learned to recognize and celebrate the progress made — and this project reflects just that.