Redesigning the Government: EPA
- Written by
- Ali
- Date
- 03/23/2009 11:32 a.m.
Continuing with our redesigning the government project, we have moved on to the EPA. Many of you might ask why we would want to redesign the EPA – it looks like it's been redesigned recently and seems to have a lot of new and up-to-date features. I think what happens with a lot of redesigns is that people start thinking of all the fun things they can add to a site, rather than thinking of the underlying problems and finding good solutions to fit those problems. Good design and good websites aren't just made up of pretty pictures and Web 2.0 features like gradients and podcasts. A good site has structure and organization, and is easy for users to navigate. I think the EPA has started down a good path, and I want to show them that by emphasizing the right things on a page, it makes the content much more accessible and would take their good site and make it a great site.
EPA Applause
First of all, I have to say that the EPA did a really good job visually redesigning their site. I think they used great colors, the graphic elements are very fitting and pretty, and I think that their first couple levels of navigation are well thought out. I like that on their home page they have a feature box at the top of the page for their important information and also think that having the search box at the top as well was a great decision. Finally, they weren't afraid of using new technology, which is a step in the right direction.
Let the Rethinking Begin
The goal was not to redesign the graphics for this site but instead to rethink the user experience. So starting off, when you have a huge site like this which is relaying news and information to the public, take cues from people who do it well already: news organizations like MSNBC. On their site, they have many structured sections where you can quickly and easily see the news that is most important to the user. The EPA looks as if they started down this road with their blue section bars, but they fall short by not showing enough of their content below those bars. With news stories, usually the headlines are good, short gripping snippets that will grab attention, and are usually pretty explanatory. The EPA needs that same hook, but since their content isn't as extreme as many news stories, they need to show more information to draw the user in and make him want to learn more.
Along the same lines, another thing that MSNBC does well is relevant grouping of data. The mistake a lot of governments sites make is sectioning out data too much. For example, on the EPA's home page they have an entire section dedicated to multimedia. Instead, like on news websites, take those multimedia segments and place them into the context of the stories that they fit into. If it's a news story put it alongside other news stories with video icon, or if it's a story about teaching children about acid rain then put it into the educational section so that the particular users that piece was meant for can quickly find it. People primarily look for content about something they're interested in, not the form it takes.
Finally, so many of the links and buttons on the EPA's newly-redesigned site actually take you back to their old site, which can really leave users confused. On this old site, they seem to have a lot of great information and data, but it seems a bit scattered, with lists of links that take you to more links before you get to the relevant content. Adding good maps, graphic visualizations, adding more content below links, and fitting this content into their newly designed template would really go a long way on these pages to help users find the content and to avoid confusion. The EPA holds vast amounts of data about local communities-- that data needs to come forward and be visualized for end users for it to truly have an impact on their lives. Hopefully the EPA is currently working on these deeper sections of their site.
The Reveal
Click on the images below to see the full comps.
Conclusion
So when thinking about redesigning your site, like the EPA has, don't just think about making it more modern looking, but think about structure, and the experience you are creating for your end user. Some other small tips are:
- White space can go a long way. It helps break up the content and allows for a users eyes to breathe instead of getting overwhelmed. Just like music without rests is just noise and notes, design without white space is just cluttered pictures and text.
- Try to use the same color for links and actions. Many users scan a page before deciding what to click on, having all links be the same color helps them find where to click when they find their relevant section.
- Putting a box around important content doesn't always make it stand out more. When so much of the page's content is contained in boxes, more boxes just serve to clutter and confuse. Explore other ways of calling content out – even subtle changes can go a long way.
- If you have a mobile site, don't place the link at the bottom of the page. People will have to wait for the whole page to load before they find it. Place it at the top so that your users can find it quickly and easily, but remember that it doesn't need to be huge for mobile users to find it.
Discussion
What are Your Thoughts?
Have thoughts that might fuel this discussion further, post them below. (Markdown syntax is supported in comments.)
It is definitely less cluttered and more visually accessible, and a homepage free from flash or video embeds is welcome.
I agree with Mike, the design is less cluttered and it is definitely more visually appealing than the current site.
Great suggestions! What I want to know is what stops government agencies from taking this advice? How do they not know this stuff when they are designing their sites for the first time??
Ali,
I agree with most of your commentary about the existing EPA site and find some real strengths with your comps. You're right-on about the use of whitespace, but I think there is a further problem with their site. There's no hierarchy.
As you know in print design, hierarchy is probably the most important tenet of a good layout. Somehow, when we get into the web, that concept gets left behind. There is so much "exciting" content -- let's put it all in boxes, highlighted, etc. I love measuring hierarchy with subconscious user feedback. Put a webcam on a monitor, hit record, and ask a user to load/read the current EPA site. If it were me, this is how my attention flows:
1) Site loads 2) I, like many, are drawn in by faces. My eyes jump to the man in the video in the lower right. Realizing that it's not that important, I start scanning upwards. 3) I hit the shadow bar above "Video Photo Audio" and my instinct is that I'm moving into a different section, but really I'm not. This shadow is unnecessary noise. 4) Realizing that I'm processing out of order, I step back and look at the whole page. If you give this page the "squint test", blurring the details of your vision, what stands out the most? To me, scrunching up my eyes, the colored bars of "Protect the Environment", "Partnerships", "Subscribe to EPA Email Updates", etc stand out the most. These are secondary headings, however, so their prominence is violating the content's hierarchy. If there were one or two things "standing out" here it could work for emphasis, but with so many elements jumping out, I think the user feels a sense of disorganization and confusion.
Looking at your first comp, I see a lot of improvement. My overall feeling is "Ahhhh." Relaxation. This content has a FLOW that the original lacks. I know in what order I'm supposed to process the elements. You have done good work here, but below are my thoughts for a v2. I know that some of them are based strictly on the art you're working with, so they would represent more work that rearranging existing pieces.
1) I like the idea of the Mobile link up top, but it feels incongruent. How would a spanish-speaking mobile user react? Do I click Spanish, or do I click Mobile? It could be interesting to flesh out some kind of 2-row by 5 column compact grid that allows mobile and non-mobile links for each language. Two of the languages also have much heavier text weighting, making it feel like they're the currently selected language, which they're not.
(Ouch -- hit the length limit!)
2) The column sizing feels incongruent. If you were to print out the page, overlay a blank sheet, and trace just the shapes of the boxes making up the content boxes, I think it would look jumbled. This is a flaw of the original, too. I would like the top graphic to be sensibly sized to the text columns below. As it stands, the top graphic sticks out about 1/3 into the column containing the "Resources" content, but not in a clean way. It creates a visual zig-zag between the ALERTS section and the RESOURCES section. They don't have to be the same size, but there should be some purposeful proportion between them.
3) Right above the map the "Electricity Usage"/"Your Water Supply" navigation is still awkward to me. The shadow above these links creates a more significant divide than the light orange rule above "Your Environment". While the whitespace helps, it looks to me like there are three sections -- "Recent News" with it's stories, "Your Environment" with no content, then the "Electricity Usage" & "Your Water Supply" tying in with the map. I think the whole tab metaphor for the map content is a poor one and it makes the data more confusing. It would seem that most users would enter their zip first, then select the content (Elec/Water), then look at the map. Right now this flow is non-obvious.
4) I really like what's going on with your HOW YOU CAN HELP box. Also, the right sidebar is quite strong, though I would refine the alignment of the bullets and their corresponding text.
4) Lastly, the Education box is very strong, except that there is a competition between the "Education" header and the "Green Scene" header. Combined with the light orange rule between the sub-elements, it looks like "Green Scene" is its own section equal to Education, but really it should be a sub-section of Education. Dropping the "Green Scene" header to the smaller blue font would be a start, but then there will be a competition between the section sub-headings and the links / bullet list. There probably needs to be a third style at play here: heading, subheading, links.
Keep up the good work!
Jeff: That's quite the list of criticisms, given the context. The project's about making a first-pass at genuine improvement, as I understand it.
It seems like Ali gets only a few days to work on these, so of course the outcome wouldn't come out quite as white-glove clean as if she'd spent the several weeks or months this type of redesign requires.
With that in mind, this is some awesome work. It's clear from Ali's other projects that she's an amazing designer, but having the control to not just completely change the feel of the site is the mark of experience.
Just two things: I feel that the hierarchy of Ali's comp is an amazing improvement. Secondly, I'd assume mobile is at the top for text-based mobile browsers, and anyone who's worked with internationalization would know that the language weight issue you mentioned is caused by the fonts, not by anything controllable. The only alternative would be to handle these as images, which would be a step backwards. I stopped reading after that.
I'm glad Ali spent her time concentrating on the meat -- the data visualizations and access -- rather than spending those hours on things like bullet alignment. Info design is more inspiring than graphic design.
Sorry if you were just trolling for attention, and I played the sucker. btw, you're personal site seems to be down.
Cathy,
I think you've misinterpreted my tone or I didn't express it clearly. I think Ali's work in general is great and this project shows significant improvement over the original. When I work on a design, though, I hate feedback like "It's good." I want details, what's good, what needs more work, what sucks. Those are the kind of details I was trying to provide, while still expressing an overall "thumbs up" for the work.
I couldn't care less about any attention, thus not providing a URL link. I only used my full name so Ali would recognize me from our conversation about design at SXSW.