Founded in 1879, Saint Louis Art Museum (SLAM) is located on the site of the 1904 World’s Fair, utilizing one of the fair’s permanent structures, the Palace of Fine Arts. The museum’s additions to that building and the recent expansion projects — the East Building and the Grace Taylor Broughton Sculpture Garden — house SLAM’s permanent collection of over 33,000 objects and staff more than 250 employees. The new website was born from a digital strategy engagement provided by BPOC that focused on consolidating and centralizing the existing web properties and providing a “skim, swim, dive” approach that allows visitors to engage with the museum’s collection on multiple levels.
url: www.slam.org | completed: December 2018
Piction to WordPress Collection Integration
With the goal of “art upfront”, SLAM needed a way to easily promote their collection throughout the site by bridging the gap between their DAMS, Piction, and the new WordPress CMS. To clear this hurdle, our team created an API hook from Piction that pulled in all items stored in the database, creating individual pages in WordPress corresponding to each piece of art. This sync would run nightly to ensure that all current data from Piction was carried over to the site, updating the CMS pages with the items that had been edited/added. We also created a fallback if the flow of any Piction data was ever interrupted, ensuring the site would keep its content and never lose the corresponding images.
Custom Faceted Search
With over 33,000 objects in their collection, users would need to be able to find a specific item as quickly as possible. We created a powerful custom search written in React for optimized queried results. For general searches, a faceted search allows filtering by checked items under geography, date range, classification, on view, and collection type. When searching for a specific artist, an auto-suggest feature was created to display any artist names within the collection that matches the letters as a user types. As more letters are entered, the returned suggestions are refined for ease of selection.
Curated Artwork Pages
Now that the Piction data had been loaded into the WordPress database, our team could control it as needed. Standardized fields, text, and output artwork data in Piction could be programmatically reformatted and styled to match SLAM’s institution nomenclature and artwork formatting guidelines. The featured artwork image was loaded into an OpenSeadragon deep zoom viewer which allowed for exploration of the artwork in incredible detail on the page or in its own viewing window. Additional detail images of the work of art can be linked to this page from alternate Piction imports and displayed in an image viewer under the work. For a deeper dive into the work, additional content can be curated and added to the imported data through a set of custom components in WordPress.
To unify branding, merge design files, and mirror all edits to galleries and/or collections, one master floorplan file was created for both SLAM’s online and print needs. A vector Illustrator file was created of the buildings, gardens, and terraces, showcasing the collection and exhibition galleries that span three levels. In the site, an SVG file is linked through a custom WordPress backend interface to allow for full user interactivity, highlighting and toggling the museum’s collections, amenities, and points of access by floor. The vector file format makes the floorplan fully responsive to the user’s device, whether it be desktop, tablet, or mobile. This opens up the potential for additional opportunities of use for wayfinding on visitors’ devices, or as an in-gallery interactive. A subsequent phase will allow for select items from the collection to be pulled in from Piction and will display below the floorplan to increase content interconnectivity.
Drag and Drop Components
A robust set of 15 custom components were created for SLAM’s variable content types. Mixing and matching any number of unique components allows for a completely custom approach to displaying content on a page, allowing an infinite number of page layouts and variations. Created not only to build out stand-alone pages, these components can also be used to enhance specific template pages, such as exhibitions, events, press releases, and even individual art objects pages created from the Piction sync. Alternate options within each component allow for further variations to best fit the intended use case. For example, the CTA component has two different sizes, four different background and button colors, and an optional image. Galleries can be populated by selecting images from the WordPress media library or from an auto-suggest field displaying imported Piction art objects. Other components like the Instagram feed and upcoming events dynamically pull in from external or internal feeds based on content tags.
Content Strategy Sessions
The team at SLAM wanted their new website to enable audiences to engage with the museum and its collection, positioning SLAM as an authoritative source that provided content and services in an accessible and audience-focused manner. In order for their new website to effectively meet this goal in a sustainable manner, a long-term content strategy was needed. We kicked off the project by meeting with SLAM’s Digital Strategy Implementation Team for a day of workshops and exercises to help establish focus and define healthy habits for creating content. “Art Upfront” became the guiding principle for the content strategy, and inspired content themes that would manifest itself throughout SLAM’s website, both aesthetically and through the content that the museum would produce.
After presenting the results from the Content Strategy Session, both teams were ready to find the visual voice of the museum through a series of exercises in our Museum Design Workshop. Since a goal of the new site would be to serve as the single source of content delivery both online and in-gallery (interactives/kiosks/signage), establishing a core set of design principles was essential. We kicked things off by reviewing SLAM’s brand guidelines, which allowed us to discuss established patterns to date. Next, we established a common set of terminology for the design process. Finally, after plotting the likes and dislikes of design styles and aesthetics through a series of spectrum polling exercises, our team had a jump start on the design process with a greatly narrowed design vision.
Third Party Integrations
Even though a goal of the new site was to simplify and condense as many of the previous web properties and systems as possible, some legacy software would have to remain due to institutional workflow. Donations and memberships would still be handled through Blackbaud’s NetCommunity platform, and the museum store would remain through eTam. It was our job to create a seamless user experience across all platforms so that users wouldn’t be disoriented by third-party forms or a standalone store for purchases. Navigation, page styling, and footers were all added through NetCommunity and eTam to match the WordPress installation.
Swipe to view the original “before” site.
“From initial planning and strategy, continuing through design and development, Cuberis provided guidance and solutions aligned with the mission of the Saint Louis Art Museum. Their experience with museum platforms combined with a thorough knowledge of WordPress is unique among agencies. Cuberis was the perfect partner for the Saint Louis Art Museum, creating a refined digital experience for our visitors and members.”
Chad Curtis, Head of Digital Platforms
Saint Louis Art Museum