Image of a page from the floodsmart website.

FEMA's FloodSmart Website

Designing a government website for anxious homeowners wanting to protect the life they’ve built.

Project Summary

Project Type

UI Design

My Role

Sr. Designer

Timeframe

Over several months in 2017-2018

Company

GMMB

Team Members

The GMMB team included UX designers, Project Managers, Account Managers, Creative Directors, Design Directors, plus an external agency who managed the development of the site.

Project Details

FEMA's FloodSmart website is the official website of the National Flood Insurance Program (NFIP). It provides flood and insurance-related information to millions of American property owners across the United States.

When already juggling many things in life, searching for the right flood insurance policy can feel like a heavy, stressful burden for users. Many people visiting the site have either experienced a flood firsthand or are fearful natural disaster will hit their homes.
As the UI Designer on the team,  I considered how visual design could help alleviate the users' stress when visiting the site to learn about flood insurance. I proposed and presented visual directions to internal and external stakeholders and helped the team launch the site. Visit floodsmart.gov to see the live site.

Project Objective
Build a new responsive website that prioritizes the users and their needs and complies with all accessibility and legal requirements.

Visual Design

When making design decisions, I considered the user needs and accessibility. The type styles are recommended by USWDS because they are easily legible on screen. I chose blue as a primary color because it is known to be calming and trusting. The iconography style is flat and geometric—making these simple designs fast-loading and quick for designers to create in tight timelines.

I also created a visual library of images that avoided typical flood-related pictures of neighborhoods submerged in water. Instead, the new photos evoked themes of preparing for a flood, protecting your home, and rebuilding your community after disaster strikes.

A picture of a style tile.

Prototyping

After receiving client approval on visual directions, I developed hi-fidelity static mockups, then "pair-programmed" a responsive prototype of the designs. While pair-programming, the UX designer and I adapted the design to different breakpoints and proactively identified any issues.

Image of a page from the floodsmart website.Image of a page from the floodsmart website.

Final Product

The website is divided into two segments: Consumers and Agents. Each audience is provided with a custom site with relevant content while maintaining a consistent look and feel. Visit floodsmart.gov to see more.

A picture of the landscape matrix.A picture of one of the pros/cons pages.

Results

01
Usability testing after launch revealed, "People liked the clean look of the site."

02
In the first three months after launch, there were over 1 million unique visitors to the site.

03
The FloodSmart website continued to expand in scope, and the Agency side was built out soon afterwards.

04
The creation of a brand guide brought cohesion across design teams and marketing materials.