Flood Zone NYC

Roles:

  • UI Design
  • Responsive Design
  • Web Development
  • Web Design Served
  • AIGA Member Gallery
  • Student Show
  • Branding Served

Defining need

While growing up in New York City, I often spent a lot of time looking at subway advertisements. One memorable one in particular warned people about hundred year floods, stating that the last big flood occurred in the early 1900s and that NYC was due for one in the future.

When Hurricane Irene was tracking towards the city, it became the perfect opportunity to evaluate the city’s alert mechanisms. While people had learned of the evacuation zones, they had come to rely on non public sources. Many of these sources, such as newspapers and radio stations, did not include all the relevant data that the user would want (hurricane evacuation shelters, how to prepare), and very little existed for mobile users, a growing market.

Creating a solution

I had decided to focus on a creating a digital solution, as it allowed for easy access for incidental users, who are referred by search engines. The site needed to be accessible on a wide variety of devices, and as such needed to be built responsively. Additionally, it was desired that the service would be available on mobile devices as an app, allowing Flood Zone NYC to target users who access the internet on their mobile devices via applications rather than through a web browser.

On larger devices like tablets and desktops, Flood Zone NYC’s interface was split into two zones. The left hand side contained controls for the map, the right contained informational data, such as shelters, information on how to prepare for the storm, and a legend for the map. When a viewport could no longer support the split, the map controls would remain pinned to the top, now encompassing the entire width of the viewport, while the information menu was pinned to the bottom. This mobile layout is more akin to mobile application layouts, allowing users accessing via a container application to feel that they were using a native app rather than a mobile website.

On iOS, users are able to pin the web app to their home screen. It will then run in full screen like a native app, have a splash screen and an icon, and essentially be indistinguishable from an installed application. For Android, a native application was developed which contains a webview. The webview loads the web application, and essentially mimics the pin to homescreen experience of iOS, as Android doesn’t support a similar feature. An application was also developed for the Chrome web store, which bundles the geolocation permissions.

Usage and Metrics

Flood Zone NYC is accessed, on average by around 3,500 users a month. At its’ peak during the period before, during, and after the arrival of Hurricane Sandy, Flood Zone NYC experienced a peak surge of 8,100 users per hour. A third of Flood Zone NYC’s users access the site on a mobile device. Of those devices, 80% of users are on iOS devices, while the remaining 20% mostly consists of Android phones.

80% of Flood Zone NYC’s traffic comes from organic search. As of this writing, Flood Zone NYC ranks #6 for "NYC Flood", #4 for "NYC Flood Map", and #4 for "NYC Flood Zone".

Visit Website