Museum of the American Revolution

Highlighting Philadelphia's Revolutionary Legacy
The Museum of the American Revolution (MOAR) is a newly opened historical museum in the heart of Philadelphia’s historic Old City neighborhood. We partnered with the museum to design and develop a microsite that highlights events, locations, and itineraries relevant to the American Revolution, providing residents and visitors with a dynamic guide to the city’s vibrant historical legacy. The site was intended to celebrate the launch, prompt visitors to further explore history outside of the museum, and eventually, allow users to add their own sites of interest for others to discover.
Content Strategy
Information Design
From left to right: a laptop showing the MOAR home page, a desktop showing the itinerary screen, a tablet showing an event, and a phone displaying the map of all the sites

Project Goals

  • Create an enhanced digital experience that helps visitors get the most out of their trip to historic Philadelphia
  • Provide rich, authoritative content that promotes central themes of the museum
  • Create a resource for residents to discover lesser-known historic sites in their area
  • Highlight relevant local events and activities

The Challenge

MOAR has a unique point of view, telling stories about historical events and communities related to the American Revolution that are seldom highlighted. The goal of the microsite was to extend the experience of visitors into the city around them. Many users would access the site upon leaving the museum and primarily experience it on their mobile devices.  We needed to develop a simple yet interactive app experience that was truly mobile-first while highlighting a host of events, itineraries, and historic sites.  Furthermore, the microsite needed to align with the main site’s brand while still having a distinct identity.

Our Approach

The Museum had a strong vision for the microsite that enabled us to hit the ground running. We decided early on to design the microsite as a mobile application to deliver a superior user experience that performed well in terms of usability and aesthetics. A simplified information architecture and grid system paired with strong imagery delivered a streamlined experience with the desired look and feel.

Itineraries

To help users plan their historical experience beyond the museum, MOAR staff curate itineraries that group attractions and landmarks in line with a specific theme such as “Women of the American Revolution” or “Libraries and Historical Societies.” Each itinerary provides a brief overview of each related historic site, along with links to their websites, and a “launch” button that loads a map pre-populated according to the itinerary. Itineraries can also be easily shared with others via social media or email.

Map

We developed an interactive map feature that allows users to identify nearby attractions and landmarks. The map leverages the Google Map API and uses a custom interface that was tuned to present optimal usability, legibility, and accessibility on small screens. The map loads centered on the museum’s pin and focuses at an optimal zoom that presents an array of nearby sites while preventing the user from having to scroll and zoom. On mobile, the map filter is toggled on via a floating action button in the bottom left corner of the screen that opens up to a full-screen filter. A simple taxonomy composed of site type (attractions or landmarks) and topic/interest (arts and culture, battlefields, historic houses, etc.) enables users to quickly select their preferences. With a click of the “apply” button, the options are populated on the map.

We chose to limit the color on the embedded Google Map to grayscale, promoting legibility for the points on the map on a small screen size. This decision opened the door to intentional use of color on the map, with a red accent used for the pins that call out historic sites and the MOAR teal reserved for the Museum’s pin and logo mark.

Events & Activities Calendar

The calendar features an array of events and activities relevant to the American Revolution and the historic sites highlighted throughout the microsite. Each event is presented as an individual card in a list view, providing a quick snapshot of the daily happenings as well as any upcoming events. The card interface provides large tap targets on mobile and further augment an app look and feel. Users can see an overview of the event by clicking the card, and can submit an event from the events landing page.