Web App: Global Vulnerability Mapping for the IFRC

Quantify and visualize the Red Cross’s internal “vulnerability and capacity assessment” system to track historical data and improve understanding of regional needs and trends.

The map view of the vulnerability/resilience mapping tool. Each region receives a color based on its overall resilience—an aggregate of ten indicators rated by local staff. A single click on a geographic region opens an ‘info window,’ and a double click zooms into the region and shows sub-regions. Here, we see a zoomed in view of a province in Vietnam, and an info window for one of its districts.

The user can click to open a ‘drawer’ containing additional information and a visualization breaking down individual indicator ratings.

The global vulnerability mapping site also has an interface for submitting ratings and reports. Shown here is a review page after the user has uploaded a spreadsheet containing ratings for three locations.

One of my tasks as I created user flows and wireframes was to research JavaScript libraries to find the best visualization tools that would be feasible to implement. When I came Flot Charts, I wasn't initially impressed—but then I saw this graph, and knew right away that it would be perfect for graphing vulnerability over time, particularly since the overall vulnerability/capacity rating is based on 10 different indicators. I then created a sketch to give our visual designer an idea of how we might integrate it with our system.

This section of the analysis module came directly out of my research into Flot Charts: the user can view a comparison of up to three regions over time within an line chart, with shading that indicates the standard deviation from the median rating.

This tree map visualizes overall resilience through color, while size denotes a region’s population. A standard map focuses on geography, but this visualization helps a decision-maker understand how each commune, district, and province contribute to a region’s calculated resilience through its rating and population. A user can get to this view from the map, as well as toggle between this view and the line chart showing overall resilience across time.

'Project'=>'Collaborate with project manager Professor Michie Pagulayan of Parsons, visual designer Yumi Endo, and the International Federation of Red Cross and Red Crescent Societies (IFRC) to design user interactions and program an interactive prototype for a global vulnerability mapping system based on a set of indicators, along with the means for accessing relevant images, statistics, and formal reports. The project has been integrated with a private, internal website and database managed by the IFRC.',

'Challenges'=>'Our goal was to create a tool that can transform our client’s operations around the identification of regional ‘vulnerability and capacity,’ allowing them to streamline a process in which it currently takes months to prepare and digest a report. These reports were produced as long-running text-based .pdf files with lots of qualitative and quantitative data mixed together in paragraph form. Past reports were largely ignored and sat somewhere on a server, without an official repository or a process for comparing past and current data.',

'Solutions'=>'Since our data was location-based, we began our design process with a review of functionality required and a review of existing mapping sites. We then diagrammed the user experience, and created a couple of rough wireframes as a starting point for the main interface of the site. At this point, we held a series of design meetings out of which Yumi Endo developed and iterated upon the visual design. The data we were visualizing was geographically based, so we chose to use an interactive map as a primary interface for viewing resilience data, with overall resilience represented by colored overlays. Users could gain additional details within a ‘drawer’ that can be raised or lowered (a design feature that was inspired by the sidebar of the Stories Unbound website.), or within analysis pages with graphs that add insight to resilience data.'

'Early wireframes, v1'=>'VERY ROUGH—in process—wireframes: This was my first set of wireframes for the project. They are VERY rough, and we quickly moved in a different direction with the interface. I'm including it here to show a glimpse of our fast-moving process. Please note, as well: we initially planned to fully integrate our tool with another system, Resource Management System (RMS) that was being developed for the IFRC. This later changed, and we decided that would be best to create a separate interface for our tool. These early wireframes, however, include the other tool's header and footer, since they were initial constraints upon the design.',

'Early wireframes, v2'=>'2nd set of in-process wireframes: A second set of wireframes, made a day or two later. By this point we had decided to go with a single screen, much more along the lines of a web app. In fact, we quickly began envisioning how we might make the project an actual app so that people could upload information in the field, and sync it up later, when they have internet access. Although an app was not part of the scope, we wanted to create a design that could be flexible enough to work beyond our limited project scope. You'll see that for the first 6 pages, the RMS header and footer are still part of our design constraints. Starting at page 7, however, we had established that the RMS header and footer would be removed, and there would simply be a single button back to the RMS website in the upper left corner.',

'Final User Flows'=>'User Flow/Interaction Diagrams: Final set of user flows that I created for each major user: Field person, Staff reviewing indicator reports and ratings, Staff uploading images and reports, Volunteers. Although it was out of scope for the project, we included our vision for SMS reports, since mobile phones are much more common in remote areas than internet access. For the indicator ratings to include rural areas across the globe, SMS reports will need to part of the equation.',

'Final Design Report'=>' This is not available online, but there is a 53-page comprehensive design document for the project. If you've enjoyed learning about it, send me an email at kenny@kennethroraback.com. Thanks for reading!',);