If you’ve worked within the graphic design or mar-comms space throughout the twenty-first century, you’ve undoubtedly stumbled across references to “content-first design”. There’s no shortage of online advocacy for the approach and I too used to preach it; however, a recent collaborative project triggered an in-depth exploration of its limitations and improved alternatives.

Kicking off a new project, I suggested to a colleague that we begin design envisioning before drafting and structuring our written support content. She promptly suggested the best practice would be the opposite: draft the content first, then build the layout around it. The conversation gave me pause… Why was I contradicting such conventional wisdom? 

For this particular project, I knew the key messages I needed to convey, but not the specifics on how, something I sought to work through within the early design process. I was looking to rapid prototyping to test questions like: Would users benefit most from a written tutorial, a video or an interactive tour, and which format would sit best alongside other objectives? In essence, I wanted to design my content to optimize its impact. Drafting anything before those decisions would have restricted our creative problem solving or would require substantial reworks later.

The longer I work within an integrated marketing and design role, the more rigid guidelines like the content-first approach just don’t make sense. 

Old argument, new name.

“Content precedes design. Design in the absence of content is not design, it’s decoration.” Jeff Zeldman

While Zeldman’s 2008 tweet is often heralded as the humble beginning of “content-first” design, it’s really just a new title for the “form follows function” debate Louis Sullivan presented in his 1896 architectural paper and has likely been argued by someone else before him. The emphasis on content in this new iteration of the debate is unsurprising provided the digital era. In 2003, online blogging became mainstream and by 2010 online marketplaces for pre-made website templates and Lorem ipsum-filled brochures took the graphic design field by storm. While an important stepping stone in getting many businesses online, by nature, templates prioritize the aesthetic over the core purpose of the piece. This generic “layout-first” process often yields clunky or shallow experiences that fail to facilitate the desired goals or differentiate a business. 

The root of the problem

Content-first design sought to correct this and its general concept is admirable: The high-level purpose and contents need to be determined first in any project, leaving the designer to expose it like the proverbial statue in Michelangelo’s block of stone. The true issue is the misnomer in the title and all it implies. 

“Let’s not forget why people go online in the first place: to find interesting and useful content.” Maya Hampton, Medium

Described as “words, pictures, videos, etc,” (ContentSnare), many argue “content” is the primary reason for web usage, only… it’s not.

No one visits an e-commerce site to read the product descriptions. They don’t peruse cooking sites because they love images of food, read the news to scroll through headlines or pick up a novel because they love “content”. Each user has a specific need they want to solve… from acquiring the right product fit, determining what’s for dinner, staying informed on current affairs, or to immerse themselves in an experience. None of these needs are addressed singularly through words or images- those are simply conduits that facilitate these goals.  

This common misunderstanding is only one of three fundamental flaws with the content-first approach:

1. Content is not synonymous with function or purpose.
2. Design embodies significantly more than the layout.
3. Web usage is driven by unique needs, not a generic desire to consume content.

The sheer volume of content routinely added online— over 2.5 billion GB daily (Medium)— has brought challenges like “information overload” to the forefront of every marketer and designer’s mind. With that lens, content is certainly not the solution, nor does it convey purpose any more than the design itself. Each are simply delivery methods for what both should equally embrace: the story. Failure to recognize this leaves content-first advocates pushing a rigid, linear process that unwittingly moves their designs towards the “decoration” role they seek to avoid. 

“Story-first” design: An effective alternative

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

☝️ Swap “function” for “content”, and Frankie and I would see pretty darn eye-to-eye!

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.

The 6-C framework for compelling, story-first experiences:

My frustrations with the “____-first” rhetoric is the rigidity, heavy emphasis on a singular element, and the implied lack of cross-functional collaboration. 

With a foot in both the design and content worlds for over a decade, I took a look at how my most successful initiatives were composed to propose an alternative: the Six C Story-First Framework.

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.