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.
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:
This approach provided everyone the space to make well-informed choices while still meeting critical, immoveable deadlines.
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:
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.
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.
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.
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:
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.
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.
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).
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.
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.
