National Museum of the American Indian
Building a Virtual Museum
After COVID-19 disrupted their in-person exhibition, The Smithsonian National Museum of the American Indian partnered with Kalamuna to launch a virtual exhibition worthy of its subject matter.
Launch by Veterans Day
The National Museum of the American Indian (NMAI), as part of the world’s largest museum complex, includes 825,000 items in its collection from more than 1,200 indigenous cultures throughout the Americas.
In 2020, the Museum planned an in-person exhibition to honor generations of Native Americans who have served in the United States armed forces called Why We Serve. While the COVID-19 pandemic delayed public viewings, it created an opportunity to extend the exhibition’s reach globally online.
NMAI needed a partner to transform their gallery exhibition into a rich, interactive, and accessible online experience for a diverse audience. They also needed it done in a hurry to launch on Veterans Day, coinciding with the unveiling of a new National Native American Veterans Memorial. From start to finish, we had a two month project window.
Holding Space for Discovery
Despite lofty goals and limited timeline, we still held space for a brief research-driven discovery.
The Museum shared related Smithsonian exhibition websites for us to examine along with additional context for how this project would relate to their Patriot Nations exhibition and Veterans Memorial.
We spoke individually with key members of the NMAI team, conducting thoughtful stakeholder interviews to shape our understanding of the museum’s goals and those of this special exhibition. These conversations formed a close collaboration and a foundation of trust that continued throughout the project.
Becky Haberacker, Public Affairs Specialist, shared insights from her two-decade-long career at the Smithsonian. In particular, we learned the importance of highlighting native cultures as both diverse and contemporary, along with using the exhibition site to extend the impact of the museum and memorial’s physical presence.
Alexandra Harris, Senior Editor and Writer, wrote the content for the Why We Serve exhibition and the associated book. We discovered how the book transformed the preliminary exhibition concept into the final exhibition, aiming to distill insights on identity and colonialism. She echoed Becky’s vision of diversity – highlighting the individual culture people carry into their service.
In Discovery, we defined the guiding principles: elegant, streamlined, and user-friendly. And we prioritized its global audience: native communities, educators, students, veterans, and the general public.
We used panels like these from the physical exhibition as design inspiration.
Drafting the Blueprints for a Virtual Museum
Just as people can let their curiosity move them through a museum, NMAI wanted to offer visitors even more freedom to browse the exhibition’s content in a non-linear fashion.
A draft of the content in hand, we approached the information architecture to serve an authentic user experience. We created a content map to share our vision for how the virtual exhibition would be structured, much like a floor plan would serve a physical exhibition. For instance, visitors would be offered the choice to browse the full gallery of images or narrow their focus by topic.
The content map visually communicates how users will be able to explore the content, including connections to key external sites
As we moved into creating wireframes, we envisioned how each panel of the exhibition could be structured in a compelling way as a web page. In this process, we balanced many simultaneous priorities, including clarity, honoring the content, innovation, entertainment, accessibility, and ease-of-use. For instance, we featured simple and descriptive links and buttons, a label for the menu icon, and large legible text throughout.
Our first wireframes included an interactive carousel, which we iterated upon twice in close collaboration with the NMAI team. What began as a horizontal structure was transformed into a vertical timeline that better served the content chronology, creating a mobile-friendly and organic-feeling vertical scroll.
From horizontal to vertical, see how we restructured topic pages in collaboration with NMAI. We agreed the vertical timeline-like layout would better serve their content and users.
Bringing a Virtual Exhibition to Life
Our visual design drew from the inspiration we gained reviewing other Smithsonian exhibition websites and the resources we were provided, and honored the NMAI team’s request to draw visual inspiration from the gallery exhibition without replicating it.
Images were honored in their uncropped entirety, and we held space for the exhibition’s video that was in post-production at the time. The NMAI team appreciated the thought that went into our approach, noting that each visual design direction was both “handsome and sensitive.”
Use the arrows to compare the two visual design directions we presented to NMAI. They elected to move forward with the option on the right.
Static Site, Dynamic Experience
The NMAI team needed a static, self-contained site. So, rather than a content management system approach, we delivered HTML, CSS, and JavaScript.
A static site should still provide a dynamic experience for users. Animations were added with care, balancing a cinematic feel with inclusivity and accessibility. We used the Intersection Observer API to detect which elements were visible on the screen and trigger CSS transitions and animations on scroll, finessing the combination of speed and effect until the animations were just right. To address accessibility concerns, we used the reduced-motion media query to remove all animations for users with this browser setting enabled. In addition to honoring the Smithsonian’s WCAG 2.0 level AA accessibility standards from the beginning, we also conducted in-depth manual and automated testing to ensure the site served audiences of all abilities.
The default behavior for embedded YouTube videos, which displays suggested videos on pause and at the end of the video, was not appropriate for NMAI. Rather than implementing an alternate player, we leveraged the “Rel=0” property to remove this behavior for specific organizations with approval from YouTube, knowing that the Smithsonian was on the eligibility list.
And, the gallery feature was particularly challenging to realize, as aspect ratios, caption placement, and caption length varied tremendously between each image – and all of these needed to respond to different browser and device properties.
Default
By default, the browsing experience includes subtle animations to create an immersive and engaging experience.
Reduce motion
For those who prefer an experience without animations, they are empowered to remove them using the reduce motion setting within their system.
A Virtual Exhibition Worthy of its Subject Matter and Institution
Even with the most constrained timelines, a research-driven approach gets the best results. The virtual Why We Serve exhibition launched on time for Veterans Day and left the NMAI team delighted with the outcome: it honored their accessibility needs and offered an elegant and engaging experience for users.
The NMAI team thinks the site is beautiful, both in its functionality and look and feel. NMAI also valued our team’s willingness to be open-minded to how we could achieve the desired outcomes.
We look forward to further opportunities to collaborate with NMAI and the Smithsonian Institution in the future. Though limited in their capacity to offer individual endorsements, they have expressed that they would be happy to work with us again.
