CASE STUDY: U.S. State Department FDI Finder

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.

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.

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

Satellite View

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.

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.

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.

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).

< back to case studies