A New Face for EPA
Posted on March 23rd, 2010 - 1:30 AMTweet
We’re constantly looking for ways to make it easier for you to do what you want on our Web site, and we’re just starting a major overhaul. But epa.gov is large (500,000 pages) and complex (hundreds of smaller sites), so it’ll take time.
We’re taking small steps, though, and the first is a new home page. The main issue with the current home page is that it lacks visual and content prioritization, which makes it challenging to use.
Our design goals are straightforward: help you do what you want while sharing what we’re up to. To figure out your top tasks, we used a lot of data:
- popular search terms both here and in external search engines
- a question about top tasks in our online customer satisfaction survey
- scans that showed where people are clicking on the current home page
- surveys and focus groups that went into our information strategy
The top tasks, both across all audiences and within specific audiences, are remarkably consistent:
- learn about environmental issues
- find out what EPA is doing about an issue (this aligns well with our need to report what we’re up to)
- learn about your local community
Within the business community, an additional concern is to learn about requirements they have to follow. For parents, finding out what they can do to help and finding information for kids are also top tasks. Nothing overly surprising in these results, but it’s good to have data to confirm what we thought.
Our design approach was to greatly simplify the home page, focusing on these tasks and not trying to do everything.
New features include:
- A section linking directly to the subjects you search for most. We’ll update this section as things change.
- A new section on what you can do to protect the environment. We’ll change the contents of this section to match current efforts.
- New banner layouts that give us more flexibility to tell you what we’re doing.
- New sections showing our latest announcements and our highest-priority efforts.
We retained several elements that match your top tasks, like MyEnvironment, which lets you search for information about your community. And the tabs at the top will still be there (stay tuned for major enhancements to the content behind all of them). You’ll still be able to quickly link to our social media efforts, information about working here, and other information in the footer.
Again, this is just the first step, and we’ll adjust as we go. We’ve posted the new home page as a sneak peek, and we’d appreciate hearing your thoughts. Have we missed something big? Does it work? Are we achieving our goals? Keep in mind the complexity of our mission and our multiple audiences as you consider the new design. And remember, this is just the home page; we’re also working to improve the entire site.
I’m excited to finally be able to share the hard work of many folks here, and I look forward to hearing your suggestions for how we can do even better!
About the author: Jeffrey Levy is EPA’s Director of Web Communications
Tags: EPA Homepage, EPA Web
| Permalink | TrackBack
Subscribe to this blog's feed
Follow us on Twitter
Question of the Week
March 23rd, 2010 at 3:24 am
The key term is “USER FRIENDLY”. Not only does EPA need a better face, it also needs to stop censoring unpopular opinions, like whenever I attempt to reply to some skeptic on global warming or some other environmental crisis they try to deny. I have a global viewpoint, but EPA seems to regard that as a threat, why I can only imagine.
[Reply]
Jeffrey Levy reply on March 23, 2010 10:05 am:
Mr. Bannet:
As we’ve explained in response to previous comments from you, we do not censor comments. Feel free to criticize EPA (for example the comment above), as long as you comply with our comment policy: http://blog.epa.gov/blog/comment-policy
You have complained that the system times out, but we’ve never seen that, and no one else has complained about it.
Jeffrey Levy
Director of Web Communications
[Reply]
Al Bannet reply on March 24, 2010 7:49 am:
“….no one else has complained about it.” because no one else dares to say the things I feel it necessary to say. An automatic censor like yours picks up on key words that trigger an erasure. For example, if I refer to the World economy dominating poor nations, that comment is not allowed, and three times (3) I posted a comment containing such a statement and three times it disappreared when I clicked “Submit Comment”. You didn’t do it personally, Mr. Levey, but it happened nonetheless.
[Reply]
March 23rd, 2010 at 3:26 am
This is great news. One of the things I have heard is EPA is hard to communicate with and its hard to find out what is going on. This will go along way in dealing with that issue. And it will also help to build a broader base of public support. Thank you for all your work on this and best wishes, Michael E. Bailey.
[Reply]
March 23rd, 2010 at 12:40 pm
If I shall observe discussion about climate change on this blog, I shall stop opening this page. I understand myself that we are doing environmental science in this blog. If we would try new face that would be views more version video.
[Reply]
March 23rd, 2010 at 12:51 pm
I like the look of the homepage, though the bottom–with four columns–is a bit busy.
This is silly, but alphabetizing the popular topics might make it easier to find things there.
I think it’s important to highlight the science involved in determining government response and regulation as well as the scientific results from past and existing regulations.
In my community (Twin Cities, MN), we would need Hmong and Somali as languages, but I realize it’s not possible to please everyone.
[Reply]
Jeffrey Levy reply on March 26, 2010 2:56 pm:
There’s always a debate about how to order lists. Alphabetical is essentially random unless the person has in their head exactly the same wording as you use. So we’ve listed them from the most-searched for to the least (although even the least are searched for a lot).
But maybe for a short list, you’ve got a point.
[Reply]
March 23rd, 2010 at 1:28 pm
would like to see “CORE VALUES” under “our priorities”
[Reply]
Jeffrey Levy reply on March 26, 2010 2:54 pm:
Thanks for the suggestion. We decided to keep it as simple as possible, but maybe we can include that in the About EPA section.
[Reply]
March 23rd, 2010 at 1:50 pm
The refresh is nice…specifically the main content area up top.
Some off the cuff comments…plenty of room to disagree here:
The topics, get involved, etc. portion is well organized but could use a little padding to breathe in the design. It feels incredibly tight and wedged in and makes it hard to move the eye around the area and figure out what to focus on. The padding is also a little tight in the black content box to the right of the main article image.
I think the background with the city is a prettier background in the current design.
The A-Z Index could probably be moved in the front of the languages section…it appears to float above the search box idly.
The footer is awesome – great work here. Especially with the monochromatic icons. Helps to unify things and the color mouse over is a perfect touch for a user gesture.
I hope this is helpful. Keep up the good work.
[Reply]
Jeffrey Levy reply on March 26, 2010 2:54 pm:
Thanks for the detailed thoughts! The background images at the top of the current design seem to have some fans. But we thought it’d be better to use that space for other stuff.
The A-Z index is where it is because we thought it was an alternative to search.
[Reply]
March 23rd, 2010 at 1:56 pm
Congratulations……. In my laptop it’s bright resolution !!!!!
[Reply]
March 23rd, 2010 at 4:54 pm
I like it! Especially the column of important topics in the center, it’s like the “back bone” of issues.
I agree with Karen, alphabetizing might be good, and would also avoid the appearance that topics are listed in order of priority.
Good job!
One other point: why are there multiple blog entries posted on some days? Isn’t one enough?
Joan.
[Reply]
Jeffrey Levy reply on March 26, 2010 2:52 pm:
There’s always a debate about how to order lists. Alphabetical is essentially random unless the person has in their head exactly the same wording as you use. So we’ve listed them from the most-searched for to the least (although even the least are searched for a lot).
But maybe for a short list, you’ve got a point.
[Reply]
March 24th, 2010 at 10:17 am
While I am a staunch supporter of enviornmental issues, I have a problem with the CFL Lightbulbs and their high mercury content, potential for causing birth defects, and taking business from american companies.
I think that a toxic chineese product has no place on the homepage of a us government website.
[Reply]
March 24th, 2010 at 10:20 am
Fantastic new design, kudo to the EPA Web Team! I like how there are clear priorities to the contents and the design is very pleasing to the eyes. Excellent work!
I do miss the rotating top background image though, I thought that gave the current EPA site a big part of its identity.
[Reply]
Jeffrey Levy reply on March 26, 2010 2:51 pm:
Thanks! I’m glad you liked those images, but ultimately we decided to use that screen space for other things.
[Reply]
March 24th, 2010 at 11:19 am
It would be great to have a tab on the homepage next to the “About EPA” tab entitled “EPA Programs”. The EPA Programs tab would allow for easy access to the following link: http://www.epa.gov/epahome/abcpgram.htm
The current design makes it very difficult to navigate to the webpages of the various EPA programs. An added tab on the homepage would resolve this issue quite well.
[Reply]
Jeffrey Levy reply on March 26, 2010 2:50 pm:
We had to choose how to prioritize, and we decided to focus on people who don’t know our program structure intimately. That’s the bulk of people who come to our site.
But you can find many programs listed on the A-Z index.
[Reply]
March 24th, 2010 at 12:21 pm
A lovely new design. Beautiful and task-focused. Well done.
A few observations after reviewing with Firevox: Check contrast color on hover in the footer links. blue/#3399CC on #38454B is a little hard to read. Right sidebar boxes elevate important content. You might consider differentiating more between them visually, so that it’s clear that each box is its own issue. Also on the sidebar sections, using “>” for the link bullets reads out as “greater than” with a screen reader. You might consider styling list items instead I wonder if advanced search is necessary on the home page — it clutters the search box… obviously depends on how often your audience uses it & effectiveness vs. regular search. Might be sufficient to have it (as you do now) on the results page as a link. I like the rotating image headlines — lets you tell a compelling story and show teaser content. Watch the speed of refresh –I couldn’t read all you had there before it moved to the next slide. Is there a way to click through the rotating content with a screen reader? I like how you’ve used background images on the rotating content, so the main text is readable by a screen reader. Great use of xhtml/css throughout. W3C validator caught minor issues: http://validator.w3.org/. The What are you looking for? may get in the way of screen readers, as the search form is read out as well. The RSS icon for Latest Announcements is hidden from screen readers. The Pick5 andOpenGov images are in separate div’s from the related bulleted content “Share What You Do” and “Share Your Ideas”. So, on a screen reader – there’s tie between the name of the effort “Pick 5” with the call to action “Share what you do.” In another section, you could rename “Read the memo” to “Seven Priorities for EPA’s Future” (more enticing link text). The links grouped in the footer read (visually) top to bottom, then left to right. They read (via screen reader) left to right, then by row. You might consider breaking these up into 3 unordered lists, then styling with CSS for the same layout.
[Reply]
Jeffrey Levy reply on March 26, 2010 2:49 pm:
Thanks for the detailed thoughts! I’ll pass them along.
[Reply]
March 24th, 2010 at 12:25 pm
Whether it be easy or hard to find, the information is there for the public’s viewing.
Of course, the easier – the better, but never before has so much information been available to the general public.
Bravo EPA! Good luck!
[Reply]
March 24th, 2010 at 4:29 pm
The design is nice however please change the auto changing of your banner area to either give a control to change it from auto to manual or preferred to have it static and allow the user to automate it. The constant changing gives me and others headaches and limits our ability to focus on what we need to find.
[Reply]
Jeffrey Levy reply on March 26, 2010 2:48 pm:
This is always a debate: don’t make the images change vs. roll through the images once and stop vs. make them constantly roll through.
Seems to be personal preference, because we’ve gotten comments in every direction (not just here in this blog).
Our compromise is the middle route: show all the banners one time, then let people click the numbers if they want to see something again..
[Reply]
March 25th, 2010 at 8:31 am
Why not use a state-of-the-art wiki like MindTouch for the entire EPA Web page? That way every page could invite comments, be a web-service, serve real-data, have RSS, etc. feeds, be part of a Service Oriented Architecture, support iPhone use and apps, etc.
[Reply]
March 25th, 2010 at 8:52 am
Banner is way too big makes you have to scroll to the main information.
[Reply]
Jeffrey Levy reply on March 26, 2010 2:57 pm:
Thanks for your thoughts.
[Reply]
March 25th, 2010 at 9:20 am
I like the shorter, more compact layout, but I take issue with the color around the page. The blue at the top is fine, but it fades into a sludgy, smoggy grey at the bottom, which is just a truly depressing color. That combined with the black boxes to the right of the graphic make the page seem darker than it was. Finding creative ways to add a little bit of color in those side boxes might help lighten it up.
[Reply]
Jeffrey Levy reply on March 26, 2010 2:57 pm:
Interesting – another commenter also said that. We’ll look at other colors. Thanks!
[Reply]
March 25th, 2010 at 9:52 am
The flashing pictures with embedded links, I believe there are four of them on the homepage need a pause button incase someone is in the middle of reading it and it just keeps cycling through like a slideshow. Otherwise it looks great.
[Reply]
Quentin reply on March 25, 2010 11:25 am:
Brett, if you click on the numbers at the bottom left of the pictures, it stops the slideshow on that image.
[Reply]
Jeffrey Levy reply on March 26, 2010 2:47 pm:
This is always a debate: don’t make the images change vs. roll the images through once and stop vs. make them constantly roll through.
Seems to be personal preference, because we’ve gotten comments in every direction.
Our compromise is the middle route: show all the banners one time, then let people click the numbers if they want to see something again.
BTW, you can click the numbers any time to stop it, as Quentin noted.
[Reply]
March 25th, 2010 at 10:10 am
Several of the images have no alt tags (explanatory text that displays when you point to the image, essential for visually impaired users who use assistive technology that speak what is on the page).
[Reply]
Jeffrey Levy reply on March 26, 2010 2:45 pm:
Claudia: we definitely intend the page to be accessible. Do you see images that are totally missing alt tags?
[Reply]
March 25th, 2010 at 10:53 am
The layout is nice and manageable. I’m not particularly fond of the background for the text on the rotating banner in IE. Would it be possible to set up a PNG alternative to RGBA for the versions that support it? I find the ‘thatching’ effect a little disorienting, and makes the text a bit harder to read.
May also want to consider a no script alternative for “Latest Announcements”, as you lose most of that column with javascript off.
Overall I think it’s well done, now to just get Lucida dropped off the font family :)
[Reply]
Jeffrey Levy reply on March 26, 2010 2:59 pm:
Thanks!
[Reply]
March 25th, 2010 at 12:13 pm
Love it.
[Reply]
March 25th, 2010 at 2:23 pm
I agree with the comment above about the color scheme. It would look nicer if you would incorporate the hues present in the EPA logo. Why not mix some green in? After all, it is the EPA. But yeah, that dark blue/grey color is pretty dreary. Also, why can’t a government website be colorful? Seems like Blue is just the default govt color across the board.
[Reply]
Jeffrey Levy reply on March 26, 2010 2:59 pm:
Interesting that two of you have suggested that. We’ll look at your suggestion. Thanks!
[Reply]
March 25th, 2010 at 6:37 pm
Oh please: streamline that page. There’s so much going on that it’s hard to focus on any one thing. Otherwise, it’s ok, if a little boring.
If you put a non-breaking space in front of your ellipses, they won’t be orphaned on the next line (type like: nbsp;hellip; [ampersands omitted])
Also please fix the accessibility of your forms, especially radio buttons. If you put labels on them, I can click the associated text and not try to hit the radio button at the right spot to select it.
[Reply]
Jeffrey Levy reply on March 26, 2010 2:42 pm:
It’s very challenging trying to serve everyone’s desires. While you see it as still too busy, others are asking for more links.
Thanks for the tip on ellipses – the news releases are coming out of an RSS feed, but I’ll pass that on to see whether we can do that.
Where do you see radio buttons on the new home page? We definitely want to make it accessible.
[Reply]
March 26th, 2010 at 12:15 am
I hate that programs are no longer listed on the main page. I used to be able to go to the sidebar & quickly get to water or air; now I have to search to find NPDES or radon information, and that pulls up all sorts of docs I’m not interested in – I just want the program site.
[Reply]
Jeffrey Levy reply on March 26, 2010 2:41 pm:
Julie: I appreciate that you know about EPA programs. However, most people don’t. And as you can see, other commenters think it’s still too busy a design as it is. Note that you can use the A-Z index to quickly get to NPDES and many other programs.
It’s interesting to me that you feel you have to search to find radon information. We created the popular topics section specifically to get people to the most-searched for topics, and radon is in there.
[Reply]
March 26th, 2010 at 8:06 am
Also, why aren’t you launching the entire new website as a whole? Why start only with the homepage? From a user experience standpoint, it doesn’t bode well when someone goes to a site and sees this nice new pretty interface, then when they click a link to go to another page, it totally changes the look on them.
Not sure why you guys did this, but it’s definitely annoying and detracts users from finding the site useful when it’s changing like this on them. Just my thoughts as a fellow web designer.
[Reply]
Jeffrey Levy reply on March 26, 2010 2:39 pm:
Thanks for your thoughts, Erik.
As I mentioned in my post, the entire site is much larger and will take much longer to redo. We’re starting that effort, but this is a first step.
Jeffrey
[Reply]
March 26th, 2010 at 8:57 am
Add an EPA Library link.
[Reply]
March 26th, 2010 at 3:37 pm
The banner is disproportionately large. It takes up too much real estate.
[Reply]
March 26th, 2010 at 7:49 pm
Simpler is better! I’m all for that. However, it limits what you can highlight.
Take “Get Involved” for instance. There’s got to be a zillion ways to get involved aside from just the “It’s My Environment” video contest. Perhaps have a generic picture here, then launch into a more comprehensive site listing all the ways the public can get involved in the work EPA does, environmental related events in communities, etc.
The rotating pane is quite large compared to other sites. Reducing that a bit and enlarging the font of the text in the rest of the page may help the disproportion.
Will the right side bar boxes still have graphics? Now it’s too text heavy… I like the “!” in the red triangle graphic on the current page to highlight were to click to report a spill, violation, etc.
[Reply]
March 28th, 2010 at 7:09 am
It;s good, that way the public can be informed of what;s in thier community ,by having better directions of the agency web Site.
[Reply]
March 29th, 2010 at 9:02 am
Much cleaner! A agree that the bottom is a little busy with four columns – I understand that Open Gov *has* to be there, but Pick 5 can go – how many people really use it?
As for future upgrades to the entire site, here are my thoughts:
1. The search function is a disaster. Everyone I know uses google to search the page. Terrible indictment.
2. The pages seem to be split up among compliance vs. enforcement – while EPA is set up that way, outsiders do not understand and miss a lot of information (I say this as a relatively new employee who missed a lot of information at first). Consolidate the entire thing, with a sublink called enforcement.
3. There are many pages with press links. Consolidate!!
4. See #3 but apply it to Tribal. Tribes tend to have less resources, so maybe slower connection speeds, so multiple pages is not good. E.g. for the UST program, every region has a tribal page, and an UST tribal page, as does OUST, and then there’s the AEIO (OITA) office pages, the tribal portal, brownfields page, and then the general grant page. So confusing!
I am glad that this is moving in the right direction. While the goal is transparency, it doesn’t do anyone any good if it is impossible to locate.
[Reply]
March 29th, 2010 at 10:19 am
The huge banner is a real turnoff… i’m lucky enough to be using a desktop with an oversized monitor, but i’m curious as to how this layout will work on a laptop or a smartphone monitor? Has this been tested?
[Reply]
March 29th, 2010 at 3:37 pm
I realoly like the new website design. The only issues I have with it are in the banner section. First, I find the text over the image hard to read because of the color and texture of the “dotted background” and I don’t like how the text and text box in the banner reposition themselves before and after each section change.
Overall it is a very pleasing and clean design.
[Reply]
March 30th, 2010 at 7:46 am
First, I just want to say that I love the new format of the scrolling image at the top of the page. I think it’s a great way to really highlight the important events that are happening at the time and makes the page look more modern (not so much like the generic government agency page). I think the footer containing all the social media links is great as well. My one criticism would be that I think four columns below the scrolling image leaves the information looking a bit smashed up against each other and crowded. I agree that this is a much cleaner look than the current homepage but I think a three column format would keep the page from having that cluttered feel. Thanks for the opportunity to provide feedback on the new homepage!
[Reply]
March 30th, 2010 at 4:07 pm
The huge graphic near the top may be a bit too large (others have commented on this already)
I really like the huge footer with the columns of items.
I didn’t see anyone else comment on the pixel width of the page though. My monitor is set to 1024 by 768 and the right side of the page is chopped off (have to scroll right to see it).
[Reply]
March 31st, 2010 at 5:08 pm
Thank-you for undoing the attempt of putting everything on the homepage. New sight is cleaner and much crisper. One feature I know some users miss from an earlier iteration was the mass of simple links to various programs and data sources. For folks who need to go to a specific EPA page once or twice a year, that was a stepping off point. Two or three mindless clicks and they were at their destination. Now they have to think how to find their destination.
A second feature you thankfully have eliminated so far from the new look are any scroll boxes within the page. This may be “fashionable” but is a real pain if the entire page is not displayed at one time. Scrolling past the end of the smaller scroll box, the entire page then moves. I may not notice if my monitor setting were for someone with eyesight twenty years younger.
[Reply]
April 1st, 2010 at 10:42 pm
I’m a regular user of the EPA web site, although I only occasionally come in via the front page. The new layout is great, much cleaner and simpler than the last one (which was also a great improvement). The simpler layout makes it easier to quickly scan and navigate.
A few specific comments:
- Fed sites are emphasizing “open gov” but I think that’s jargon that most people don’t recognize, thereby increasing the likelihood of users overlooking this important link. (And, “share your ideas” is only one aspect of the open site.)
- The large rotating images are popular, but on my laptop that’s almost 24% of my screenspace being used for very little content.
- EPA collects or houses vast amounts of environmental data, but the “data” link is buried and almost lost.
- The latest announcements and hot topics lists are easy to scan and useful.
- The A-Z topics link gets a little lost in the middle of the search/advancedsearch links.
- Thanks for keeping “my environment” visible.
As a regular user, I appreciate these improvements and hope to see similar improvements in other areas of the EPA’s vast online resources. I know a lot of work went into this! Thanks for posting it to the blog, too.
[Reply]
April 5th, 2010 at 1:27 pm
I commend your desire to make the home page more user friendly, but this design goes in the opposite direction. Having such huge banners with overlaid text is unnecessarily busy and poor design in general: it does not have the clean look you are aiming for and reduces legibility. Also, these large banners push much of the page below the fold. With so much information to convey, it’s counterintuitive to introduce an element that displaces so much text. In addition, the lack of any clean navigation is unnerving. As a layperson, I have no idea how to differentiate whether what I am looking for would be in “Learn the Issues” or “Science & Technology” or “Laws & Regulation”. I have to guess. Guessing is not navigation, and just adds more click-throughs and frustration for the user.
By having such stripped-down navigation, it appears that you’re just hoping the user goes to the Search box. Whether you are relying on the search box or not, the whole design could be much cleaner, have clearer navigation, and have less extraneous use of “pretty pictures”.
[Reply]
April 5th, 2010 at 4:32 pm
Had to get one more comment in here and glad “Easy Safety School” has already mentioned it as well: the “dotted” text boxes in the photos are really heard to read. Perhaps go with a smoother, white/opaque look with black text instead.
[Reply]
May 3rd, 2010 at 2:27 pm
It’s clean , but i see it will be much better if the typography enhanced more .
Mohamed
[Reply]
August 11th, 2010 at 8:52 am
I love this stuff free lance writer its so cool and nice, you must try this one!
[Reply]
August 20th, 2010 at 2:02 pm
As a Utah Graphic Designer who is studying sites for good designs, the new EPA site looks great.
How involved are they with the oil spill? I’m guessing it’s their main focus right now but there has to be other organizations who are also involved.
[Reply]
Morgan reply on April 12, 2011 8:21 am:
It appears the consensus is that the website is terrific, and I concur with that opinion. This is one of the best government websites I have ever seen! Most websites that represent large organizations are waaaaaay too cluttered, which makes them extremely difficult to navigate. This site was well thought out, and making a selection of an interesting topic or a current news worthy feature, is easy as pie. My hat is off to the folks who designed the site. Terrific job!
[Reply]
November 2nd, 2010 at 6:25 pm
great news! looking forward to seeing how the reorganization of the site will help with the ease of navigation. keep up the good work .
[Reply]
April 5th, 2011 at 2:41 am
I agree with Karen, alphabetizing might be good, and would also avoid the appearance that topics are listed in order of priority.
Good job!
[Reply]