2017 FEMA FloodSmart.gov Responsive Redesign
FloodSmart is the official Website of the National Flood Insurance Program (NFIP), administered by FEMA, providing millions of Americans information and resources on flood insurance.
Situation
FloodSmart.gov was hacked in 2016. To make the content available FEMA put the content on FEMA.gov in a series of toggles without consideration of user needs. It was dense, written in governmentese, and tough to navigate. I contracted for GMMB who was the sub-contractor for the prime contractor.
Audience
Wide range of American property owners looking for information on the National Flood Insurance Program
My Role
Lead Designer
What I Did
Nurtured the development of the team while hands-on leading the redesign.
Team
- UX Strategist
- 2 Project Managers
- Visual Designer
- Front-end Developer
Key Tools & Deliverables
- Wireframes (HTML/CSS/JS)
- Branding and visual design (Adobe Illustrator, HTML/CSS)
- Responsive, interactive prototypes (HTML/CSS/JS)
- GatherContent for content wrangling
Skills Used
- Accessibility
- Content Strategy
- Design Leadership
- Design Thinking
- Front-end Web Development
- Information Architecture
- Interaction Design
- Mentoring Junior Staff
- Rapid Prototyping
- Responsive Web Design
- Technical Documentation
- UX Design
- UX Research
- UX Strategy
- Visual Design
Challenge
This project’s directive was a responsive redesign with a 100% focus on users. The task order chronology prevented formal user research ahead of design and a full content rewrite.
Actions
- Prioritized the voice of the people. Taking a lead from the “user-centered design” of the contract, we conducted “guerrilla” user research with Optimal Workshop card sorts. We leveraged our social networks to locate property owners, especially those in known flood zones, to co-create the taxonomy and organize content. This informed the IA, and the copy editing of existing content using plain language.
-
Facilitate stakeholder understanding when presenting deliverables
While the client reviewed mood boards, I created responsive lo-fidelity HTML wireframes to speed up the process. My first client meeting was an opportunity to understand their perspective, a sleuth stakeholder interview. The lo-fidelity wireframes served dual purposes. The annotated deck facilitated understanding of what the project would do, uncover what the stakeholders thought it would do, so we could align work. The responsive links [3.9MB PDF] clarified what responsive design is. We used static screenshots instead of the responsive wireframes to focus attention on the content.
- Used PlainLanguage.gov to make the site easy to read and understand We captured the results of a content audit in GatherContent, and the client reviewed and revised content to be included in the redesign.
- Implemented user-centered and mobile-first best practices with a test-driven design approach With approved mood boards and content, the design phase began. During design I “pair-programmed” with a visual designer, taught responsive web design, accessibility best practices, and test-driven design. We provided a static design deck [5.4MB PDF + links to HTML/CSS/JS prototypes] paired with links to a responsive prototype.
- Ensured optimal UX by teaching staff how and what to test For the design handoff, we paired a responsive high-fidelity prototype with documentation including key web performance indicators, accessible code specs and samples, plus training on how to regularly measure the quality of the user experience.
-
Fostered user empathy with government stakeholders and developers
Used storytelling based on research. My proudest moment was when the Chief of Communications noted the “Need Help?” page looked plain, then pointed at me and said… “when I think of the user, it needs to be quickly easy to read, understand, and get me where I need to go, so this is great. We don’t need big pictures here!”
Result
In May 2018, the refreshed, user-centric FloodSmart.gov redesign launched the “For Consumers” site, with best practices and Section 508 compliance. Before the redesign, the content was housed in FEMA.gov toggles. There were very few visitors who quickly left the site without navigating further, presumably frustrated because they couldn’t find what they were looking for.
In the first three months of launch, June to August 2018, there were nearly 1.5 million unique visitors. With little time on the homepage, most of the traffic went to learning more about how flood insurance protects their investment, who to contact, and then how to buy flood insurance.
The “For Agents” site was done by an entirely different team.