The National Museum Of African American History And Culture (NMAAHC) wanted to tell the story of African American philanthropy, viewed through the lens of the generous support given to bring the National Mall’s newest Smithsonian museum to life. The exhibit needed to celebrate named supporters, demonstrate the impact of their gifts, and inspire others to contribute to NMAAHC’s future.
Work closely with advancement and exhibit teams to design a data-driven system that would be engaging, meaningful, and let the donors be the heroes of the story. As the only digital exhibit in a voluminous, high-traffic space, the exhibit needed to command attention, reward exploration, and give existing donors their moment in the spotlight.
In the Digital Donor Experience, a series of dynamic data visualizations demonstrate how all of the individual donations came together to form a “quilt” of support, where the sum of the parts was truly greater than the whole. A mix of interactive and CMS-driven content are presented in a striking physical layout, evoking the patchwork nature of the exhibit theme.
This is a 2 column section for copy and an image. To change the order, use the Navigator on the left menu to drag the div named "copy" to either above or below the div named "project-image". The various options for background colors are listed below. White is the default and requires no combo class in the style selector. To change the color, hover, to select the "section-2-col" element on the main canvas, then on the top of the right panel, type the combo class name listed below.
The image cropping also has options for smaller screens using the combo classes listed below.
The image cropping shown here is "cover-right" so the image crops in from the left, preserving what is on the right side of the image.
The image cropping shown here is "cover-center" so the image crops in equally from both sides, preserving the center.
You can also use the combo class on text to make it green by removing "white" and adding "lime".
The image cropping shown here is the default so no combo class needed which the image crops in from the right, preserving the left side.
This copy block is optional, just delete it if you don't need to use it. The video code is an HTML element. Just replace the source to keep everything consistent.
Section-full-width - just select the image and replace the source. It is set up to crop the image from the center point with the combo class called "cover-center". This version is for images only.
This caption is optional and can be deleted.
Section-full-width - just select the image and replace the source. It is set up to crop the image from the left as a default.
This version has a copy block as well.
Section-full-width - just select the image and replace the source. It is set up to crop the image from the right with the combo class "cover-right" or "cover-center"
In pandemic and post-pandemic times, best practices for in-person interaction have changed. Where possible, we positioned displays to enable socially-distanced direct interaction.
To accommodate touch-averse users, we leveraged Freetouch, our proprietary software-based touchless software. Users wishing to interact touchlessly scan the onscreen QR code (no app download required, no need to join the local WiFi network, GDPR/CCPA compliant). The system spawns a cursor that serves as a proxy for their touch. The user’s phone behaves as a virtual trackpad and keyboard, enabling them to interact with the displays from a safe distance.
