CASE STUDY: U.S. State Department FDI Finder

< back to case studies

Responsive Web App - Summary of Needs

The U.S. Embassy in Sweden needed a tool to help promote foreign direct investment (FDI) in the United States to both government and corporate audiences around the globe. They wanted to be easily able to communicate the current status of FDI in the United States, both at in-person meetings/presentations, and to wider audiences via the web. To address this need, we created a tablet-optimized ad-hoc data query tool, featuring a map of the locations of foreign direct investments as well as an aggregated report that can be used to dig deeper into the data.

Web app screenshot

Deciding to Build a Tablet-first Responsive Web App

In discussing the various anticipated users of the web app, we learned that in addition to needing to make the app publicly available on the web, it was expected that the tool would be used frequently in one-on-one and small group meetings by U.S. diplomats and others needing to promote foreign direct investment in the United States. It was determined a tablet device, such as an iPad or Android tablet, would be the ideal way to demo the app in these sorts of environments. To address this, we optimized the app’s display size and user interface for iPad sized touch devices.

Responsive Web App for Laptop and Desktop Computers

We wanted to make sure that users of laptops and desktops also had a good experience. We used responsive web design techniques to display the app at an appropriately larger size when viewed on laptops and desktop computers, thus ensuring an excellent user experience for all anticipated user groups, regardless of whether they were interacting with the website via iPad, Android tablet, laptop, or desktop.

Interactive Mapping App with Data Filtering

At the core of the web app is its mapping functionality. We built a custom map overlay to display the investments, and included clustering features to handle areas with high investment density. Investments are color coded, and clusters expand when clicked (or touched, on iPad or other touch devices) to show the individual investments comprising the cluster. Data can be filtered by several criteria, including investing country, sector, function, revenue, year, and state.

Map filter screenshot

Investment Details and Satellite Images

When a user selects an investment on the map page, detailed information about the investment appears, including a link to view a satellite image of the investment location.

Investment Detail View

Investment detail view on map

Satellite View

Satellite view on map using Google Maps API
We used the Google Maps API to display satellite images, based on the investment site’s geocoded coordinates.

Sharable hyperlinks to save and share filtered searches

A “Share this map” link displays below the map. Selecting this link brings up a custom URL that will automatically display the map with all existing filters in place.

Share this map screenshot

Filterable, Sortable Data Grid

A number of data views separate from the map were also included. We used JavaScript to permit the user to filter, sort, and aggregate the data all on the same page.

Data Grid screenshot

Aggregate Data View

Users can toggle between viewing the data in grid form and aggregated view. Users can view data aggregated by country, investing company, investment type, sector, U.S. state, U.S. partner, and city. The view below shows data aggregated by state.

Data aggregate view screenshot

Backend Admin System

The site is maintainable via a custom backend admin system. Administrators can edit and upload new data, which is immediately reflected in the map and data views. Text on the site is updateable via a user-friendly content management system (CMS).


  • Custom interactive mapping application
  • Database-driven web application
  • Data filtering and aggregation
  • Tablet-first responsive web design
  • User interface design
  • HTML / CSS / jQuery
  • Javascript application development
  • PHP / CakePHP programming
  • Google Maps API
  • Custom content management system (CMS)

< back to case studies