The New Citizen-Centric, User-Friendly FEMA Website
- Overview of our process
- Examples of our old and new web sites
- Results from our usability testing
- Design of our new site
- Lessons Learned
- Conclusion
Overview of our process
FEMA.gov began an extensive user-centered design process in a year-long usability project, which included several steps:
- User research and needs analysis
- Definition of site goals
- Iterative usability testing
- Participatory design
- Web-friendly content
- Citizen-centric information architecture & wireframe development
- User-friendly and accessible graphic design
To learn more about each of the steps we took, please see How We Redesigned Our Web Site.
Examples of our old and new web sites
BEFORE: Spring 2005
AFTER: April 2006
Results from our usability testing
Using an iterative usability testing process that included a series of tests, including a baseline usability test on the original Web site and a comparative test on the redesigned Web site, we were able to measure our improvements.
By comparing user performance on the first usability test to the last usability test, we found that the new Web site:
- improves user performance by 93%,
- reduces the time it takes users to find information by nearly 50%,
- improves user satisfaction from 49% to 71%.
During the baseline usability test, we learned that:
- Participants felt the home page was cluttered and contained too many links that were unnecessary or not relevant their needs.
- Participants spent a long time searching for information and struggled to understand the site organization.
- Participants felt that the link labels were ambiguous, unclear, too vague, and agency-centric (not citizen-centric).
- Participants were confused by multiple formats of the same information.
- Participants were frustrated by out-dated and inconsistent content.
By developing a new information architecture, reworking much of the existing content, and implementing a simplified, more streamlined look and feel, FEMA was able to make the site much easier for visitors to navigate and understand.
Input from visitors in the aftermath of Hurricane Katrina, when more than 14 million visits were logged, confirmed the results of the first round of usability testing and helped significantly during the content management and information architecture portions of the design processes.
Design of our new site
The design of the new FEMA.gov included a new information architecture, citizen-centric categories, user-friendly labels, a simple, clean design.
The home page consists of four main navigation areas, including:
- Information for specific audiences
- Citizen-centric topics about how to plan for a disaster, how to apply for aid, and how to rebuild after a disaster
- Disaster-specific topics, with quick links to all of the disasters on the home page, as well as a way to find disaster information by state
- News and hot topics
Our usability testing showed that users were much more successful with the new home page and felt that it was easier to use and less cluttered. Participants also liked the main topic pages of the site and felt that they were well organized and easy to understand.
Lessons Learned
Some of the major lessons learned included:
-
Use a simple homepage to give visitors the "scent" of the information that they are seeking.
-
Organize and clearly label content based on topics, audience types, and location.
-
Develop consistent templates that pages will follow.
-
Create logical groups of links to help users determine how navigation areas differ from each other.
-
Consolidate and organize content, so that all information about a specific topic can be easily found or scanned in one place.
-
Write content specifically for the web, what works in print doesn't always work online.
The original home page was cluttered, with too many competing items and colors, and no clues indicating where a visitor should look first.
To improve the usability of the homepage, we reorganized the home page so that it was not as overwhelming by:
- Developing a smaller set of logical, citizen-centric categories that were clear, simple, easily understandable and intuitive.
- Using a new design with a simple and clean, yet distinctive interface.
- Placing the most important information in the center of the page. Research shows that users look first to the center of the page, to the left, back to the center, to the right, and back to the center of the page.
The site was geared too much to the organization, requiring visitors to understand programmatic organization, jargon and acronyms to locate information.
Using easy-to-understand labels for content is very important in helping visitors navigate to the information that they need. In addition to using feedback from our usability test, we conducted internal brainstorming sessions, analyzed information from search logs, and searched for common language used in e-mail inquiries to identify the words that visitors associated with the information that they were looking for. We then used those words to label and describe content.
3. Develop consistent templates that all same-type pages will follow.
One of the larger sections of the fema.gov site provides information on the different types of disasters. On the old site, the format of each disaster page was different and provided different types and varying levels of information. This lack of consistency was frustrating for visitors and prevented them from establishing a clear mental model of the section.
To ensure a consistent layout for disaster pages, we developed a template within our content management system that encouraged "standard" information to be included on every page, in a consistent location throughout the site.
4. Create logical groups of links to help users determine how navigation areas differ from each other.
Navigation on the old site contained a mix or unrelated items that were often programmatic or agency-centric or to all-encompassing. Visitors struggled with the navigation, thought it was difficult to understand and not useful to their needs.
The new site was designed so that each navigation area on the site has one purpose or goal with a consistent, coherent and related set of links. On the fema.gov site the navigation areas were organized as follows:
- The header and footer links are the same throughout every page on the site.
- The left hand navigation links a top-level category with sub-level categories.
- The right hand navigation provides links to reference or program information.
- Anchor links always take the visitor to a spot further down on the page.
5. Update out-of-date and/or inaccurate content
Many pages on the old site had been around for several years and had no one maintaining, updating, or sometimes even knowing about them. This resulted in pages that were out of date or that had been replaced by more current information still being available on the site.
Eliminating or consolidating redundant copy, reduced the burden of updating the website and also made it easier for users to find all of the information related to their topic of interest. We also customized our content management system to include the following features to prevent content from becoming outdated or "lost" on the redesigned site:
- The system assigns an owner and backup owner to each piece of content.
- The system assigns an expiration date for each piece of content.
- The system sends out a notification when it is time to update content.
Participants expected to find all information related to a specific type of disaster in one place. On the old site disaster information was dispersed throughout the programs.
Consolidating content by topic (rather than program office) made it much easier for participants during usability testing of the new site to find the information they were seeking. Cross-links and cross-references to related program information from the disaster page were much also easily located from the consolidated disaster pages.
7. Ensure important links appear above the fold.
Participants missed important links because they appeared below the fold or were hidden below paragraphs of text.
The new site ensures important links appear above the fold and provides anchor links for longer pages to help visitors quickly determine what information is available on each page.
8. Write content specifically for the web, what works in print doesn't always work here.
Participants struggled with the content on the original fema.gov website and frequently found it hard to scan or understand.
On the new site we focused on "chunking" content by using headings, bullets, anchor links, lists and where appropriate, tables, to make pages easier to scan.
Conclusion
Launched in April 2006, in time for the upcoming hurricane season, the new site makes it easier for citizens to quickly find information on how to prepare for a disaster, how to apply for aid, and how to recover and rebuild. This new navigation and citizen-centric focus was the result of in-depth user research and a user-centered design process that included usability testing with numerous users, including citizens, disaster victims, emergency personnel, insurance agents, architects, and builders.
Among many other improvements, the new site showcases a completely restructured, customer-driven and easy-to-use navigation system and a new streamlined look and feel developed by the Department of Homeland Security.
The FEMA website is the first Department of Homeland Security (DHS) site to roll out the Department's new web branding that features a simple, yet distinctive interface. The common usage of typography, color and page layout found throughout our new pages will eventually be used across all of the component agency's sites.
The redesigned fema.gov also meets President Bush's directive to use electronic government to provide citizens with timely, accurate, and consistent information about government services and operations, and Secretary Chertoff's directive to improve customer service and ensure timely and accurate information during an emergency.
Last Modified: Thursday, 04-Jun-2009 11:52:02 EDT