Case Study

Southern Company Gas

“Our system let us house content in one place and publish it across multiple sites under the Southern Company Gas umbrella.”

What we did

Affected a “web first” digital transformation of corporate communications across three interconnected systems: content production, the design process, and code/publishing
Implemented a process of content production and governance
Designed a component-based system in Figma, for wireframes, designs, and content collection
Designed a user experience emphasizing simple usability, search, accessibility
Wrote code for components in HTML, CSS, JS on top of Vue.js, published with Gridsome
Tied together multiple systems with our code into a composite content application
Enabled multisite publishing of content

Long Story Long

The Scenario

Southern Company’s natural gas division had a content problem. Production of words, images, videos, and interactive media, involved multiple groups both inside and outside the company. Publishing to the corporate site, or any of the division’s four subsidiary sites, required the assistance of an external vendor. Even simple copy edits underwent process and required assistance; we couldn't "just change the copy" on our own.

So vexing was this problem that a separate content unit became the lingua franca of corporate communications: the PDF file. Content at Southern devolved to delivery via PDF files, termed a “leave behind” – not because it was the best format for messaging customers but because it was the one that could be controlled from start to finish. Valued for their port- and print-ability, much of corporate communications was locked away in files to be downloaded, printed, or emailed (if viewed at all).

The content problem grew to an unwieldy status, cemented as “the way things are done” inside the department. But, lo: a brave strategic decision was made to build the systems and processes necessary to bring content publishing in-house. A digital transformation, of sorts, to own all steps in the production and distribution of content, deployed first and foremost in a browser. Web First!™

The Solution

Content Production

Tasked with articulating and building this system, we started by understanding content production in-house, from ideation to writing to visualizing. Our team proposed systems of content governance that solicited ideas, approved a subset for production, then ushered them thru a production process of writing, editing, and visualization to completion, before being published.

Google's Zero Moment of Truth (ZMOT) became our mental model for content creation. We'd ask the questions a user would ask, write answers to them, remove redundancies, and arrange content from very broad questions to very specific ones. We matched Q/A pairs to our Information Architecture. Promotional pages at the top of the hierarchy answered broad questions. Leaf pages at the bottom of the hierarchy answered 1 or more specific questions about a subject.

A lovely, round, little fellow, suitable for a storing leprechaun's gold. — A sketch of the flow of content creation and publishing shows how we think about structure and code.

Design

On the User Experience side, we designed pages with external search and accessibility in mind. All pages featured proper structural code for accessibility, partnered alt text (delivered dynamically thru Contentful) with images, designed with proper contrast, and ensured accessible usability. This was especially important to our client, a public-facing utility company. We designed variablility into our components to handle multiple uses or visual styles; we could customize presentation by setting variables or including/omitting content.

Code

A similar path was taken on the technical side. We built a “composite content application” (thanks, Gartner, for the buzzwords) – an application combining multiple systems – to produce a published piece. Vue.js and Gridsome handled a component-based design system for content, featuring all the tools necessary to build full web pages of different types. An NPM package shared code across properties. Our authoring system was flexible, customizable, and reflected in full in a Figma design system. Content types were modeled in Contentful, housing words, metadata, media, and descriptive content for promotional units. SendGrid and Twilio captured data for email marketing or automated targeting. GitHub and Netlify handled our code repository and hosting.

The Outcome

The power of this system was exciting. We could wireframe pages in Figma that looked and behaved as they would online. Content creators could write words and curate imagery, dropping final versions of copy, links, and images in the Figma file. Developers could see what the page should look like, down to the specific variations of the components necessary to realize the finished page. If a piece was missing, we’d define it and build it, componentizing things to augment the entirety of the system. Simple pages were augmented with reusable interactive elements like maps using Mapbox or forms with Sendgrid to handle email signups.

Most interesting was the flexibility of the system on the publishing side. Our custom solution let us house content in one place and publish it across one or many sites under the Southern Company Gas division umbrella. Author once, syndicate across multiple sites: a huge time saver for publishing and maintaining a site over time.