In my previous piece “Rejecting the Content-First Approach”, I outline the three key flaws to any “____-first” rhetoric. While its rigidity, heavy emphasis on a singular element and implied lack of cross-functional collaboration are problematic, improvements can only be made if a suitable alternative is presented.

In this spirit, I took a look at how my most successful initiatives were composed. With a foot in both the design and content worlds for over a decade, I found each project that made this list shared a common thread in the planning process. Based on these commonalities, I propose an alternative: The Six C Story-First Framework.

Introducing “Story-first” design

“Form and function should be one, joined in a spiritual union.” Frank Lloyd Wright

If you’re familiar with Wright’s work, you’ll know it makes a compelling case for how intricately weaving design with the purpose builds value, preference and strong differentiation. Similar principles can be found within the film industry where the marriage of script and visuals is essential and the advertising world is rife with visual storytelling.

So how do we achieve similar success and break the cycle of siloed strategy, content and design? We put the story first.

The story encourages a systems approach, where all the elements are interrelated. It begins with a thorough understanding of a project’s goals, intended audience and their needs, then flows into a relatable narrative an audience can connect with emotionally. The story then acts as the emulsifier for a project’s many components with designers and communications specialists working side-by-side to make contextual decisions around the best way to exemplify each point.

Meet the Six Steps

While none of these steps are truly revolutionary, they’re often missed to the detriment of a project. A critical component are the overlaps with different teams and skill sets at different stages. These strategic redundancies make the best use of all skill sets, preventing the too common scenario of providing writers a beautiful, but ill-fitted template to work around or handing the baton to a designer at the tail end of a project to “dress it up”. The built-in flexibility makes this framework applicable to a variety of projects from website builds and promotional campaigns to sales collateral.

1- Catalyst

Too often, those working on a project are siloed from the underlying business needs behind their work. This first step looks to resolve this by tying the raison d’étre to the project, clarifying its goals and setting key performance indicators (KPIs). This may be carried down from a larger strategy, however, it should be clearly communicated to all working on the project. This enables every member to understand how their work fits within the larger picture, rather than as isolated deliverables. 

Involved: Project lead, relevant business leaders and peripheral stakeholders

‍Outcome: Objectives

2- Crowd

Once your objectives are established, it’s time to determine the audience best equipped to help you achieve them. Since these two questions are intrinsically connected and determined by the same leaders, both the “Catalyst” and “Crowd” can typically be decided within the same session. The more laser focused your are on the behaviours and needs your solution solves when setting the audience, the more compelling your final output will be. 

Involved: Project lead, relevant business leaders and peripheral team leads

Outcome: Target Audience

3- Collect

At this stage, the team dedicated to the project should be collecting relevant research from both internal and external sources. This is often where you should be reaping the insight from field teams and analysts to ensure output is aligned with the market. This activity can take time the first time round, but for most companies, can be reused with only minor adjustments afterwards. 

Involved: Project and relevant field teams

Outcome: Detailed Audience Personas

4- Capture

At this stage, it's time to start drafting the key messages such as why your audience cares, how to grab their attention and how to convince them. A common pitfall here is to begin immediately pitching your solution. While that may feel like the most direct route to achieving the project’s goals, it likely won’t be the most effective. 

The persona should be at the core of every story, positioning how your solution fits in context to their life and needs.  

Involved: Project team, looping back to stakeholders for approval.

Outcome: The Story: Key Messaging with emotional/relatable layer

5- Create

Once your story is ready, it's time to hand it off to the designers and content specialists to determine side-by-side the best way to convey its various chapters. The "create" stage contains roughly 80% of the project scope and is where all the decisions around structure and format take place. Each specific need or key message should be explored in detail, determining the best way to communicate each item (copy, video, interactive design, etc). Rapid prototyping and continuous communication between all creators is essential.

Involved: Designers, Content Specialists, Creative Leads

Outcome: Publication ready draft

6- Clarify

It’s rare our initial assumptions are completely accurate and today's market conditions evolve even as our projects take shape. Whether it's a new website, a promotional campaign or a product, it's important to review how actual consumption aligns with those intended and to make the adjustments required to optimize performance. At this stage, the project lead should be monitoring the KPIs and general usage to determine which items need small tweaks or to return to stage 5's drawing board.

Involved: Project lead

Outcome: Usage and recommendations for improvements

Brands getting it right

Whether they were purposely following this framework or not, the following brands are killing it in story-first communications.  

Apple

Scrolling through this iPhone spotlight page, it’s clear the content and design teams worked together flawlessly. Each section approaches the need in a bespoke manner that answers the brief best: The phone’s resolution is described in 9 words, but demonstrated with stunning full-screen interactive visuals that drive the value home. Emergency SOS isn’t explained through bullet lists of tech specs, but one title and an emotional video of a mountain-top rescue. The balance between showing, telling and imploring you to click through for more is perfectly executed— something that can only be achieved through intentional communication design.

‍

Highline 

Huffpost’s magazine Highline focusses on impactful cover stories to kickstart dialogue and evoke action around key topics like political policies, health and gender equity. Omitting the potentially seizure-inducing hero banner, their piece Poor Millennials uses a combination of paragraphs, brief call-outs and interactive visualizations to explain the financial challenges young people face today. Key quotes and ideologies are presented in isolation, providing clarity on the problem at hand. Prominent statistics are presented in full screen visuals and through first-person “we” statements, making them memorable and relatable. The most successful example of impactful storytelling is the use of interactive cartoons to walk readers through complicated concepts such as “structural disadvantage” and dated urban planning policies. The eight-bit character Becky is shown crashing through a lifelong struggle with affordable housing and exploring the legacy systems that created it. 

Understood

Understood aims to connect the 70 million individuals living with learning and thinking differences with supportive resources. The organization's homepage connects with visitors with simple statements of belonging in the first person and enables visitors to search the site through a personalized solution builder. With a thorough understanding of their audience, the website's many visuals are offset with functionality to disable motion, while resources are made accessible through various formats like audio and transcripts.