Creating a Content Marketer’s Paradise

Content marketers are the airline pilots of the website world. From when a site is launched until it’s decommissioned, they operate it, navigate it, and steering it towards its desired destination.

Some sites operate like a fighter jet. Others operate like the Boeing 737 MAX.

Easy-to-operate websites typically have several characteristics:

• The ability to create new pages easily with correct branding 
• Site-appropriate content that is easy to edit
• A consistent, easily replicable content model
• A clear correlation between CMS data and the page elements where it gets displayed

Creating this kind of website requires both the right underlying technology and the correct implementation in areas like design, content modeling, and code component creation. They make it easy to make copy changes, to create new templates, to launch new pages based on existing templates.

Easy to operate websites let content creators smoothly tell story after story after story, cementing an organization’s central narrative.

This is especially true for mission-driven organizations, for whom narrative is everything.

Creating a Content Marketer’s Paradise

Both Starlight Children’s Foundation and Impossible Foods are mission-driven organizations. Starlight aims to deliver happiness to seriously ill children while Impossible Foods is working to reduce the impact of climate change through transforming the global food system. When attempting to tell their widely divergent stories, however, both companies faced the same challenge: struggling with brittle, difficult to change websites. 

“As a charity, storytelling is at the heart of what we do,” says Lisa Potter, Senior Vice President of Digital Marketing at Starlight. “Our old site did not allow us to focus on the most important narrative — the people we support and the impact of our programs serving them.”

Ashley Geo, Head of Digital Marketing of Impossible Foods, reports a nearly identical challenge. “ImpossibleFoods.com 1.0 worked at a fundamental functional level, but had significant drawbacks when it came to making updates,” she recalls. “We had a slow turnaround time for adding any new content, making it difficult to keep sharing new stories.”

Eventually, both organizations ended up meeting, and beating, the challenge of websites that blocked the ability to share their stories by building replacement sites that paired Gatsby with a headless CMS. The benefits were swift and certain. 

Both companies wanted to overhaul their brand with a speedy website to help them serve their mission better through empowering their content creators. After re-platforming to Gatsby + Contentful, both teams saw dramatic improvements.

Creating Reusable Content Modules with Gatsby + Contentful

Realizing the need for reusable content

Each team worked with a technologically forward agency to relaunch their sites with Gatsby and Contentful. Impossible Foods worked with Matter Supply and Starlight Children’s Foundation with Delicious Simplicity.

The old website failed to align with the business goals, holding back potential supporters to take a specific action. It didn’t really offer multiple ways to support the foundation, gather insights and data, and it was not tied to the Customer Relationship Management (CRM) or back-end. It was clunky, slow, and required a third party contractual assistance from a developer to change even a typo error.

“These days, people don’t have time to read a ton of copy to take action. You have to lead them there directly,” says Potter. “The new site needed to delineate journeys for donors and fundraisers that quickly inspired them to take action — and, most importantly, our digital team required a tool to create this in-house.”

Finding the right storytelling primitives

Both Matter Supply and Delicious Simplicity blended design and development to create a set of reusable content modules — a modular approach to creating commonly used page elements that can be quickly assembled to build a new page — that were data-driven and insight-led. This modular approach to laying out content is a relatively new one, and it requires some up-front strategizing. It works by considering each piece of content as its own compartmentalized little storytelling block — a designation that is unique to every different organization. 

Since Delicious Simplicity had built experience through working with various nonprofit organizations in the past, figuring out what these blocks would look like for the Starlight site wasn’t difficult at all.

“In the nonprofit world, these are reasonably standard — hero, statistics, images, quotes, videos, bulletins, email collects, and of course a donate block,” says Jordan Jennings, a Delicious Simplicity developer.

“We carefully considered the look and feel to make sure each of these modules will interact with one another seamlessly when they’re sequenced,” continues Jennings. “That way, when you assemble this page, you can arrange and rearrange content in whatever order that the narrative demands. Just like that, voila!”

Impossible Foods also chose the modular approach, though they opted for a more phased, iterative approach. In July 2018, ImpossibleFoods.com 2.0 launched with eight pages, each assembled from a set of eight modules: a navigation bar, a hero module, configurable content and images module, a mailing list module, a news grid module, a footer, an article module, and a carousel.

The site quickly expanded as new features for the site quickly followed, shipping iteratively and rapidly.  A year later, says David Fonnegra, Director of Technology at Matter Supply, “We have built an inventory of over 60 modules for the content author to play with.” 

And the business impact has been huge.

Using those 60 modules, Geo says, Impossible Foods has been able to:

• Launch a food service hub to support restaurants serving the product
• Improve the help center page for easy management by the customer service team
• Launch a new careers page
• Provide quick turnaround for new campaign pages around Impossible’s partnerships with Burger King and Little Caesars.

All done quickly, easily, and in-house without need for intensive developer intervention.

Creating components and writing code

Why were Gatsby and Contentful so integral to success for both these projects?

Brian Webster, founder of Delicious Simplicity, credits two factors: the intuitiveness of Contentful and the power of Gatsby. Contentful’s UX is a delight when compared to other CMSes, he says, and they truly loved the APIs and flexibility that using Gatsby brings. “Coming in, setting up your content types and models, and adding fields is just really clean and easy,” adds Webster.

The Delicious team stored each content type in Contentful with a corresponding React component in Gatsby. Their Block: Hero image component for the Starlight site, for example, had 14 fields in Contentful, including title, headline, feature image, copy, primary and secondary CTA titles, and so on. These fields are easily populated with data served from an API (or a database, CMS, static files  — Gatsby lets developers integrate data from anywhere, including multiple sources at once). 

When they made the corresponding Hero React component in Gatsby, they used a GraphQL query to grab the field data (shown below) and then pulled it into the UI.

The Block: Hero component and other content block types are stored hierarchically in the file structure (shown below), with one block per file, and files named accordingly. This also allowed them to keep their landing page template code (also shown below) extremely simple: essentially, a simple list of blocks.

Adding Real-Time Interactions With Gatsby Cloud

Having constructed the new Starlight site with Gatsby, Webster wanted to make sure the agency’s newest creation also had the best possible implementation environment: Gatsby Cloud. Running a Gatsby site on Gatsby Cloud means you don’t really have to maintain a separate codebase — you build your main production Gatsby site, and then just run it up to Gatsby Cloud. It really is that simple.

One of his favorite Gatsby Cloud features is Preview, which provides a fully-functional ‘ghost’ copy of a site with a temporary shareable URL. “Before Preview, on our older sites, we could only preview the page we were actually working on,” Webster says. “Now, we get a full site preview where we can literally change anything from the home page to the navigation links, even write a new blog, with seamless quality control and visual consistency across the entire site.” And, he adds, the client appreciate that Gatsby Preview grants their content team user-friendly technical power that previously required intervention from a front end dev.

“Gatsby Cloud gets your drafted changes from Contentful in real-time. Those combined now give editors and writers the full picture, where they have this editor interface on the left, and then they can see the entire page come together if they’re building something new, or they can see their changes if working on an existing page,” explains Webster.

Three actions the Starlight team does on a regular basis are:

• Selecting icons to accompany text from an icon library.
• Rearranging sections on a page.
• Building landing pages. 

Webster demoed the workflow for each of these three actions:

1. Changing icons

2. Rearranging sections

3. Building landing pages

Conclusion

WIthin a month of its launch, Starlight Foundation’s Marketing VP Potter reports, the new site saw huge usability gains in terms of massive conversion and visitor improvements. Even better, the Starlight team is now able to focus on putting their customer journeys first and building engagement for their mission. “Our storytelling took a major leap forward as a result,” marvels Potter.

And she’s got the numbers to prove it:  

• The new Starlight.org saw user growth from 6k to 20k visitors a month. 
• Users are staying longer and leaving less, with a 45% increase in average session and a 33% decrease in bounce rate. 
• They can A/B test, make real-time updates, and get deeper insights from their donors by tracking website activity through to their CRM and advertising platform.

In summary, Starlight’s tech stack is now more intuitive than ever, and it doesn’t require any programming knowledge to get started. The team can jump in right away and can make changes and updates with confidence, Potter says. 

“This has been a really amazing experience. Gatsby and Contentful have blown our minds with what they can do.”