JenStrickland.design Hello! I’m Jen, a graphic visual interaction UX researcher product designer engineer creative professional listening for the right “It” before we build it right.

 Back to Selected Case Studies

2017 FEMA FloodSmart.gov Responsive Redesign overview of responsive deliverables

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

  1. 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.
  2. 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.

    low fidelity wireframes
  3. 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.
  4. 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.
  5. 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.
  6. 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!”

    high fidelity designs

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.

Back to Top