Bringing the Story to Life

The Fine Arts Museums of San Francisco (FAMSF) needed to generate dynamic, single page experiences to tell the stories behind their real world exhibitions. Kalamuna delivered an innovative and dynamic set of web publishing tools to empower FAMSF with greater control over the design of these stunning expressions. As a result of an amazing collaboration, this work was named a 2019 Webby Honoree. Here is the story of how it came to be.

Insights: a Digital Storytelling Tool for the Fine Arts Museums of San Francisco

The Fine Arts Museums of San Francisco – Comprising the de Young Museum in Golden Gate Park and the Legion of Honor in Lincoln Park – is the largest public arts institution in the City of San Francisco. The deYoung is one of the largest art museums in the United States and turns 125 years old next year. The first two elements of FAMSF’s important mission are to present a range of exhibitions of the highest quality and provide extensive and innovative art education. One way they deliver innovative educational experiences about their exhibits is through their Insights digital story platform, which offer visually rich and in-depth background information for visitors to consume as a supplement to the exhibition, or in lieu of their ability to attend in person.

The Challenge

FAMSF already had a Drupal 8 microsite-generating platform in place, but it couldn’t handle the variety of content they created for the broad range of exhibitions they host. When initially building the digital stories platform, FAMSF thought all of the digital stories would follow a similar template. In reality, each new story introduced unique design challenges. And with this challenges: a desire to innovate.

Expanding the Drupal-based platform proved to be problematic. Introducing code changes for new stories impacted previous stories. And adding new components to the design came with a lot of overhead, leading to bolted-on features and the accumulation of technical debt that made the whole enterprise clunky and unsustainable. The original platform hadn’t been architected for significant design changes and enhancements.

FAMSF wanted to be able to do more active storytelling, and to have more impact and control over the design of each story. They had hired Upperquad to redesign the visual components, working under the assumption the new platform would be rebuilt with Drupal 8. Kalamuna would need to evaluate the platform they had in place in order to provide sound technical recommendations for implementing their new designs and features, while also delivering the flexibility and customization they needed.

The Solution: A Process to Fit the Timeline

From the start, this was a very ambitious project with a tight timeline and deadlines looming on the horizon. FAMSF needed us to perform a careful technical discovery and analysis while still advancing the digital story component designs from Upperquad into testable prototypes.

In order to meet these competing needs, we planned a phased approach that would allow us to meet the impending deadlines for upcoming exhibitions, while also performing our due diligence in selecting the right platform technology. We devised four phases:

  • PHASE 1: Static site launch for impending exhibition
  • PHASE 2: Technical discovery and implementation of a content management platform
  • PHASE 3: Building the hub to collect all of the digital stories
  • PHASE 4: On-going support

This approach provided everyone the space to make well-informed choices while still meeting critical, immoveable deadlines.

Cmd+S “Baby” / Cmd+Z “Bathwater”

With the existing Drupal platform in place, we were inheriting an established set of content components with which FAMSF had mixed levels of satisfaction. Additionally, Upperquad was engaged in redesigning some of those components while designing brand new ones as well.

It was essential for us to conduct a thorough component audit to better define the landscape of functionality this platform would have. We wanted to save and improve the parts that worked well, so that FAMSF could make informed decisions about where and how to spend their budget. A solid technical discovery of this nature to understand the feature components in better detail would enable Kalamuna to provide better estimates and assessments of what FAMSF could afford.

Reviewing the audit with FAMSF and Upperquad, we were able to determine:

  • 13 feature components would be maintained with redesigns from Upperquad and functional upgrades from Kalamuna
  • 9 brand new feature components would be designed by Upperquad and built by Kalamuna
  • 6 feature components would be completely deprecated and replaced by new features

Not only did this auditing work help FAMSF understand costs at a feature level, it illustrated where unexpected costs can manifest themselves from the design process. For example, it was unstated as a feature, but the new designs implied a functionality that the stories would be able to have 'chapters.' This wasn’t originally defined or estimated as a feature, and so the functionality would not have been created had we not been thorough in the auditing process.

Kalastatic: So Much More than Prototyping

Since the real innovation in digital storytelling for FAMSF’s exhibitions happens in the front-end display of these microsites, it was imperative that we prototype all of the newly designed content components in functional HTML, CSS, and JavaScript. This is precisely what Kalastatic is designed to do for our clients: allow them to move beyond static image mock-ups and live with designs in the browser. For a project with such a high degree of interactivity, interaction design across screen sizes would have been painstakingly difficult, and highly inaccurate unless done in the native medium of the web. FAMSF was very pleased to be able to see how the components and their many permutations behaved in the browser throughout the prototyping process.

Process diagram illustrating how changes made in GatherContent trigger Netlify Build and Kalastatic to update specific environments based on the moderation state.

Launching with Kalastatic

With deadlines for the next exhibition approaching, our plan was to launch the first new digital story (La Prose) as a static site. Kalastatic is more than a prototyping and styleguiding framework. It produces production ready code, and can function as a static site generator. This approach let us launch a product more quickly, and learn from user behavior what was working and not. Quick fixes were applied post-launch, while we continued to evaluate content management options to support the client’s editorial workflows.

With a static site, you don’t have some of the advantages you may gain with a content management system. One issue that we needed to address was responsive images. The digital stories rely heavily on high quality images (as you may expect), and since the stories need to work optimally on all devices, we required a service to render images responsively for the static site. We chose CloudImage.io because we could easily make a call out to CloudImage to a fixed URL asset, which would then return all of the responsive image sizes we needed with impressive speed. Additionally, they provide an elegant, javascript based responsive image API, with a legible syntax that provides default breakpoints, but also custom image handling to renders out images at all necessary sizes.

We launched the static site for La Prose on Netlify because they specialize in deploying and hosting modern static web applications. Netlify provided a solid deployment workflow and economical hosting solution that made sense for FAMSF’s needs.

Choosing the Right CMS

A primary mandate for Kalamuna was to help FAMSF make the right technology choices so they could achieve the business outcomes they needed. Specifically, they wanted their digital story platform to generate:

  • Independent, single-page digital story microsites
  • Stories that can draw from a gallery of content components
  • Components that can be set in any order in each digital story
  • Components that can be individually styled (or themed) per story
  • Stories that can support custom code which doesn’t impact previous stories

Above all else, they needed a platform that was flexible, scalable, and sustainable.

Auditing the architecture of their existing Paragraphs-based Drupal build, we felt that we would likely only recreate the issues they were already experiencing by rebuilding the platform with Drupal. As much as we love Drupal as a dynamic and powerful framework for building websites and apps, we have no reservations telling our clients when Drupal isn’t the right solution for their specific needs.

Carefully considering FAMSF’s needs and frustrations with their current circumstances, it seemed clear to us that nearly all of the technical innovations they wanted were in the front-end display rather than the back-end platform. Our research into platform technologies would need to be highly informed by this understanding.

Evaluating Content Management Platforms

We looked at a number of technical solutions – all with various strengths and weaknesses. We built a matrix of the options as readily scannable guide for FAMSF to parse which tools may best suit their needs. Additionally, we demonstrated each tool for the FAMSF team so they could have a hands-on look at how the platform would work for them. This was especially important for the FAMSF IT team who would ultimately inherit, support, and maintain the tech stack we built for them.

important!
We looked at a number of technical solutions – all with various strengths and weaknesses.

The Winner Is: GatherContent

Prose.io makes markdown editing a breeze, but would also grant users access to the whole codebase on github, proving too permissive for our circumstances. FAMSF ultimately chose GatherContent, which allowed their content editors to reorder components most easily in the editorial interface.

Prior to the digital stories project with FAMSF, Kalamuna had built a proof-of-concept integration between Kalastatic and Prismic’s JSON API. This proved useful as we were able to extend our prior work as a basis for the digital stories’ content platform.

With GatherContent as a content delivery platform to the prototyping tool, there is now a cleaner separation between content and presentation. Stories can inherit all of the components available to each digital story, but within a story components can be reordered and independently styled so as not to impact other digital stories that use the same components.

Story content can be archived in GatherContent once active editing is complete to reduce the impact of the billing footprint a large volume of content the digital stories produce (GatherContent pricing is based on an account’s active number of content items).

Deploying Updates from Gathercontent to the WWW

Finally, Netlify provides a solid deployment and hosting endpoint for GatherContent integration. When content is moved to specific workflow states in GatherContent, we trigger a build of the site, and deploy the build directly to Netlify. A test site lets everyone see the content come together in the browser, and editors can continue to edit in GatherContent and see updates without deploying code. Moving all changes to production is a webmaster-only function for added protection.

Outcomes

The initial Insights launch and subsequent digital story launches have been met with overwhelming appreciation from FAMSF. Thus far, several digital stories have been launched using the new platform:

The FAMSF team has a rich suite of tools to create new, unique stories for their exhibitions. That being said, they continuously push the envelope of how they can illustrate the context of the work they exhibit. While Kalamuna continues to support the FAMSF with their digital stories platform as needed, the institution has been able to innovate independently, publish independently. This is what we like to see – organizations empowered to own their message, and amplify it with technology they control.

The Fine Arts Museums of San Francisco’s passion for telling a more compelling story is just one of the reasons we love working with FAMSF, who were tremendous partners in the process of building the digital stories platform.

Webby Award Honoree badge
Insights into Gauguin: A Spiritual Journey was a 2019 Webby Honoree for Websites: Best Individual Editorial Feature - Ind/Brand/Org.
Kalamuna’s team helped bring our vision and design of a new educational digital storytelling platform to life through an iterative development process. Not only did they develop a robust toolkit and content workflow for our team, but they also encouraged us to use innovative solutions that we may not have considered on our own. The result is a flexible, high-performance, high-engagement, and Webby-honored platform.
Tricia Robson, Director of Digital Strategy, FAMSF
Portrait of Patricia Robson
kalamuna-logo-gem