While attending the UX/UI Bootcamp at Georgia Institute of technology, our team was tasked with redesigning a government website - Energy.gov. During research and discovery, our team realized that the majority of users over 85% were coming to the site looking for specific information. With participants tests and navigation tests, we learned that the site had contrast issues that made titles challenging to read, often frustrating users. Our team organize the content, gave Energy.com a modern look, and highlighted the search bar making it easy to read and navigate.
Users were overwhelmed by the vast amount of disorganized information on the site. How might we redesign Energy.gov to be a go-to hub for information about green living and alternative energy sources?
Prioritize search feature, introduce a new navigation system, and redesign energy.gov with a modern twist.
Research & Discovery My team performed user interviews and tests, established personas, designed flows, annotations, and color testing.
Intuitive Navigation Through testing and card sorting, we were able to fully grasp the size of this site and give it a more logical organization and eliminate repetitions.
Redesign Inspiration I was inspired by a user quote - when asked what energy means to them. They replied, "energy is the difference between light and dark." Also, our approach was to focus on mobile-first. We made sure the content flowed on mobile devices as well as it did on full-sized browsers.
Design System I chose an immaculate and minimal design inspired by users.
Sketches, Wireframes and Prototypes Sketched out flows, used Adobe XD to build wireframes and prototypes implementing the minimal design system.
Our team of four completed interviews collected survey data and performed usability tests. We analyzed the research data together. I ideated, sketched, and prototyped the solution, and develop the design system.
Timeline: 4 Weeks
Conducting interviews with users and watching them navigate the site led us to conclude the DoE's primary users go to the website for a specific reason, and their main frustration is finding the information they set out to get. Due to the immensity of the site, they often rely entirely on the search function to find the information they need. This finding led us to redesign the home page with the search bar featured in a primary and central location.
Here is what some interviewers had to say:
"This is confusing. I would not think this is a drop-down menu. I mean, there is no indication." Drew Conners
"Is this it? No right? I don't think this is it" (When an article loaded improperly for the second time)
"That is too many clicks. I would not know to click that"
Our test subjects also found it difficutl to read, especialy the homepage highlighted articles. The titles are displayed over busy images making them hard to read.
On highlighted articles, the titles are displayed over busy images making them hard to read.
Primary articles are apparent, with a nice contrast between text and background.
Although a user persona is considered a bit outdated, it is a tool, and it can prove useful in inspiration and steering design decisions, even more so when complemented with a scenario to shows tangibility and realism. From testing, after completing the test subjects ware asked if they saw an article they wanted to click on the site, almost all wanted to explore the save money category of the website.
Samantha Kurz | 42years
Middle School Physics Teacher
STEM Club leader
Sam starts her school day by reading Energy.gov to seek inspiration and to find engaging information to intrigue her pupils. Also, she recently bought a home and is determined to make it energy-efficient and to save money on utilities.
which test subjects repeated.
Make complex information fun and engaging.
I compile the flows around everyone's ultimate use of the search bar.
User Goal Find specific information/article.
User lands on the home page.
Users types in the search filed.
User perfects the search by clicking a category if they can't see immediately what they are looking for.
User finds the information needed.
To better understand the frustration of the users. My team did a heuristic analisys and discovered layout inconsistency throughout different sections of the site. There are four different menu systems with no clear indication on how to go to the starting point. The site is massive in content with multiple micro sites catering to a wide variety of users. But yet the search option is almost hidden.
The idea for the redesign comes to me form a user interview. "Energy is the difference between light and dark, warm, and cold." That simple sentence captured the essence of energy, in our opinion. So I decided to center the design to this statement. Kept the original blue and green colors associated with Energy.gov and use them to signify the two main parts of the site "science and education" and "save money."
I put together an emotional profile of the people I am designing for when going through the research data to assemble the user persona. I realize the majority of our users are environmentally conscious people concern with green source of energy, their carbon footprint, and global warming. So it was a no brainer that the website needed to feel clean, light, and airy.
I start the design process with a full understanding of the competition. In this case, researching the web representation of other government departments, as well as other content massive sites catering to the general public like Smashing Magazine, AIGA, Netflix.I also looked at a lot of news sites like The New Yorker and USAtoday. All these websites had in common an established hierarchy and the well-calculated use of white space.
I started with paper sketches from scratch, ignoring the original layout of the site. I wanted the logo to be this bright, glowing light embodying the biggest ball of energy we as humanity have seen - the sun. But through talking with collegs and testing with users, I began to understand that energy is more than just light. It is also power. It is a connection. So I moved on to more ambiguous shapes to represent the site.
Making it digital.
We decided to simplify the logo for quicker recognition and got rid of the tag line as well to be able to enlarge it slightly.
The colors are freindly and reflect an energetic feeling
A clean, easy to read serif font that has a vaariety of weights.
Icons are a simple stroke, in black on white.
Keeping the same clean, modern look but scaling it for mobile.
UX Writing & Cardsorting