Which Comes First Content or Design?

Which comes first content or design? This dilemma can feel a lot like a chicken or the egg debate. Designers ask for content to inform their designs. Content creators often want to see the design first, so they know what kind of content to produce, and in what format. So let’s unpack this conundrum, starting with the answer:

Develop content strategy before you design your UI.

start with what people want

You have a website, presumably with the goal of providing information or services that your target audience will find value in. Regardless of whether these people are customers or constituents, you want them to come to your site and interact with your content.

People come for the content.

This means people need to get to your site. So what are the common ways a person might find your site? Many users will begin their journey in their browser on the search engine screen. Others may be coming inbound from an email or linked from another site. If you analyze search queries or links that drive people to your site today, you will find trends of the most common terms and keywords people are searching for or clicking on.

What you won't see are terms like: "engaging design", "interactive content", "flashy animations", or "awesome homepage carousel with big hero images".

Ironically, this is often where people are tempted to begin—the rally cry to come up with an engaging interactive design, and plans to build content around that. The problem is that no amount of brilliant design work can make sucky content engaging. And without an understanding of the content, your design will lack context and inevitably fail to support your ongoing needs.

Content, not design, is the hook.

OUTLINE Your Content Goals

Start with your end users and what they need, working your way down to the outcomes you’d like to see.

1. Who are the people you want to attract to your site? What do they want to find or do, and why?
2. What content do you have, or will you be able to sustainably produce, that would be useful and relevant enough to attract this audience to your site?
3. What will they want to do next, and what will you want them to do after they find that content?

By answering these questions, you are providing both the context and ingredients necessary to begin design work. Think of the interface as a servant to content, and your content as a servant to the user.

Design as if Content is the Star.

The primary purpose of interface design is to elevate the content. The interface is the pedestal, the content is the work of art. Good user interfaces:

• Help make content effortless to scan and read.
• Prioritize and organize information on the page, visually emphasizing pieces of information relative to their importance.
• Make it obvious what a user can or should do on a screen.
• Amplify emotional response to the content.

With context in mind, and content outlined, design work can begin.

With context in mind, and content outlined, design work can begin. From this point, design and content may begin to evolve together. Visual inspiration may help shape the form of the content, but content requirements need to be established to ensure that the final design can support the variety of content that must display. Content requirements provide healthy constraints for the design.

Drafting Content Requirements

A single screen may pull in content from a variety of sources including databases, content management systems and RSS feeds. Introduce multiple content creators to the mix and the need for designs to be adaptable becomes quickly apparent.

Content requirements define the variables that must be considered when designing how different types of content will appear on screen. Content requirements as an afterthought leads to inefficiency, wasted effort, and inevitable rework.

Consider how the design of an events module might unfold differently based on these two different approaches.

Approach 1: Leading with the interface design

• Step 1. Design request: We would like to have a sweet interactive events calendar to show upcoming events on the home page.
• Step 2. Mocks up sweet looking calendar (high fives ensue)!
• Step 3. Team builds it.
• Step 4. As real content is introduced, new scenarios emerge. Information needs to display under a variety of conditions that weren't anticipated during the design. The approved design does not accommodate this new information well, resulting in a UI that looks broken. Unplanned time and effort are needed to modify the design to account for the content.

Approach 2: Leading with content strategy

• Step 1. Reframe the user need: "We’ve gotten feedback from users complaining that they aren’t finding out about interesting events until after the fact. We need to make site visitors more aware of what events are forthcoming."
• Step 2. Think about and document content requirements. What information must be shown for different types of events? What variables or conditions might affect what needs to display?
• Step 3. Design a way to display events based around a clear understanding of what people need and what types of information might need to display.
• Step 4. Build it and high five.

In the latter example, the design must factor in the range of content that needs to be shown. The interface is designed to be resilient. Compare this to the first example where the needs of the content are an afterthought.

To further exemplify, let's look at the actual content requirements that might be defined for something as simple as "displaying events". Consider the number and variety of events that might need to show up, and the different information that may need to display in different conditions.

For example, ask:

• Is there a maximum or minimum number of events that must be accounted for? Draft a requirement or guidelines to clarify. "We should show all events occurring in the next 30 days. This typically will range between 5-8 events. Maximum might be 10, but that would be incredibly rare as we average 3-4 events per month."
• Could there ever be "zero" scheduled events? Requirement: "There will always be at least one scheduled event."
• Would events ever span multiple sequential or non-sequential days? Capture different conditions as requirements: "We must account for events that span multiple sequential days."
• Will events always have an associated thumbnail/teaser image, or are images optional? Requirement: We do not have images for every event.
• Will event images always be formatted similarly when uploaded, or will the system need to crop/scale to fit? Capture constraints that the design should anticipate: "The images uploaded are from various sources and will be formatted differently. Scaling is okay. Cropping is not."
• Will all events have a summary description, and if so, are there any restrictions to description length or character count limitations that must be accommodated? "Currently our events do not all have summary descriptions, but we can introduce an editorial rule to always include them moving forward. Descriptions should be 140 characters or less so they can be repurposed for social sharing as well."

Imagine how convoluted the design process would be if none of these content requirements were introduced until after the design was created. It would be a continual cycle of back-pedaling, trying to force-fit the content into the interface.

On Innovation

But wait! Shouldn’t design be the catalyst for UX innovation, subsequently paving the way for content strategy?!

Great question! Innovation in design should be pursued insofar as the goal is to solve wicked business problems or satisfy user needs, and not simply for innovation’s sake. During early stages of design, outside-the-box approaches should be explored. These conceptual designs may indeed inspire new content strategy opportunities, but should not be treated as final specification for design. Most of what we call innovation in design occurs after the concept and ideation phase. Innovation stems from insight, and the most effective designs emerge from understanding and embracing the constraints.

This means to move from concept to functional interface, you must first:

• Define what you are trying to accomplish.
• Define what content will exist to support that goal.
• Create rules for that content.
• Have a plan for how to support creation of the content.

Content strategy. Before. Interface design.

Moving forward (not back)

I recall the days when Flash had risen to become a cornerstone of web page design. That misguided era taught us what happens when content takes the back seat to design. Without substance, or being driven by real-life content and user needs, the flashy interactions that in the moment seemed innovative quickly became dated and annoying. Content and design must go hand in hand—with form following function. To neglect one is to undermine the other. With a thoughtful content strategy in place, users’ content needs and user interfaces can be woven together, purposefully, with clear objectives and outcomes in mind. Doing this well is where the real opportunity or innovation lies.