top of page
24 hour sprint
FEMA Flood Smart
ROLE
Research
UX/UI Design
PROCESS
Research & Analysis
Design
TOOLS
Figma
DURATION
24 Hours
Project Description
Background
FEMA provides a vital resource for the public through its FloodSmart website, serving as a central hub for information on flood insurance, risk assessment, and preparedness. To rapidly address design needs for specific pages, a 24-hour design sprint was initiated.
The Challenge
Within this rapid 24-hour design sprint, the core challenge is to recreate two key pages of the FEMA FloodSmart website, leveraging the USWDS (U.S. Web Design System) as a foundational framework. The goal is to demonstrably improve the effectiveness, consistency, and user experience of these pages, ensuring easy access to critical flood insurance and preparedness information.
How might we create a more effective online platform that would empower users to easily access and understand the critical information provided by the FEMA website?
Process
My process began with a focused research and analysis phase, including a targeted audit of the selected FEMA FloodSmart webpages and a brief competitor analysis, alongside familiarization with the USWDS design system to inform rapid improvements within the 24-hour sprint.
Audit
Building on my firsthand user experience, I performed a focused audit of the selected webpages to systematically identify specific usability and consistency issues.
-
Titles: The two header styles on the page establish a conflicting visual hierarchy, which can mislead users about the importance and relationship of different sections. This confusion is amplified by the inconsistent use of components and color, applied to both headers and clickable links, ultimately hindering clear navigation and the ability to easily find information.
-
Font Weight: The inconsistent use of varying font weights within the header creates a jarring and visually disruptive experience.
-
Accordions: The website's overuse of accordions, even for minimal content, forces unnecessary steps and obstructs the easy discovery of information.
Analysis
Building upon the insights from the user audit, I conducted a competitor analysis to learn how other organizations in the space address similar user needs and content presentation. This comparative view helped identify effective solutions and inform the recreation process.
Solution
Streamlined Navigation
Recognizing redundancy and the potential for user confusion with the existing side navigation, I opted to consolidate all primary navigation into a tabbed interface. This approach was implemented to reduce visual noise, create a more explicit information hierarchy, and simplify the user's path to key content.
.png)
Clear Action Buttons
Replacing header text/link buttons with dedicated, visually distinct buttons resolved inconsistencies in how users interacted with the site. This change provides clear visual cues, making interactive elements immediately recognizable and improving overall usability.
.png)
Enhanced Discoverability
Removing the unnecessary accordions and displaying content, directly aimed to enhance information discoverability, allowing users to quickly scan and find what they need and reduce cognitive effort.
.png)
.png)
.png)
Results
After completing my designs, the team and I sat down to review what I had put together. The core challenge was to efficiently utilize the existing design system to recreate the necessary pages. Although my initial designs deviated somewhat from this objective, the team expressed genuine interest in my approach and the thinking behind my decisions. We explored my findings in detail, and I walked the team through my initial understanding of the project, how I prioritized tasks, and the factors that influenced my design choices.
Project Takeaway
This 24-hour sprint underscored the critical importance of proactive communication and establishing a shared, complete understanding of project requirements before commencing design. I realized that even seemingly straightforward terminology can hold different interpretations across team members. For instance, terms like "recreate" or specific feature names might carry varied assumptions. This made me realize it's super important to just ask those "hey, just to be sure..." kind of questions and chat with the team early on.
Get in Touch
bottom of page