tel: +1 415.843.1859

Carmen Abroad

The challenge

When Dr. Clair Rowden approached auut studio to assist with the Phase 2 enhancements to, we could not have been more excited. This project needed to use the best mapping tools available to explore both geographical and temporal relationships simultaneously. The problem is: a WordPress architecture has no good options for that.

a sample map with thousands of red pins on the entire globe, as if in a mess

Not so helpful Google plugin 🙁

Design strategy

There was only one design prerogative given to us: to extrapolate from the forthcoming book cover, which utilized a single image.

Our studio sought to find ways for the visual aesthetic to celebrate the transnational phenomena of Bizet’s 1875 opera, Carmen. The interactive map would be a centerpiece of the project’s humanistic analysis, but as always, we wanted it to be extremely easy to use.

The map and timeline needed to update in tandem, so we believed we should grab the right tool for the job. We developed some code to allow WordPress to exchange coordinates harmoniously with the map, although the latter would be rendered in MapboxGL/Javascript, outside of WordPress’ control.

We also used this site redesign as a chance to overhaul the entire data architecture of the DH project. We migrated the database from Excel to a multi-user, online spreadsheet. We created a repeatable workflow for graduate assistants, automating the propagation of data entry in Google Docs into the back-end on WordPress.


  • web development
  • conversion of data into both Javascript and WordPress/MySQL
  • code for new features for the interactive map
  • integration of a dynamic timeline
  • vast improvement to Search capabilities
  • beautiful, distinctive landing pages


We had the privilege to bring to life an entirely re-imagined interactive map, and a stunning aesthetic to the whole site:

split image: left, a 19th century artistic drawing of the character Carmen, from a playbill; right, a screenshot of the interactive map

three images: 2 are simulated opera playbills and the third is a grid of small thumbnail images which cannot be made out clearly

View the project»