using a content-first design process

Using a Content-First Design

Process

WordCamp Sacramento 2016

slideshare.net/dawnsbrain

Hi! I’m Dawn Pedersen.

• Web designer since 2000.

• Web design teacher since 2004.

• WordPresser since 2005.

Hi! I’m Dawn Pedersen.

• Webmaster at Sacramento

City College.

– WordPress multisite

– 200+ subsites

– 300+ editors

WHAT IS CONTENT-FIRST

DESIGN?

Part 1

Content is…

What the user came to

• Read

• Learn

• See

• Experience

• Do

Content Might Be…

• Text

• Images

• Video

• Audio

• Downloadable files

• Forms

• Interactions with other people or a game

Content-First Design is…

Creating and organizing content as the

first step in the design process.

Content is user experience.

Wait. What Are We Doing Now?

• The traditional method is structure-first

design.

• It usually starts with static mockups.

• Lorem ipsum may be in charge.

• Real content comes later when is ready.

What’s Wrong with

Structure-First Design?

Shoehorning content into layouts not

designed for it:

• length of headlines that span multiple

lines

• page layouts that are too long or short

• tacking on bits and pieces that are

afterthoughts

What’s Wrong with

Structure-First Design?

CSS not carefully crafted for content types

we didn’t expect:

• Galleries

• Captions

• Word wraps

• Tables

• Blockquotes

• Lists

• Etc.

What’s Wrong with

Structure-First Design?

Lots of reworking the mockups, trying to

adjust the design for repeated content

changes.

What’s Wrong with

Structure-First Design?

And when the site is finally finished, you’ve

got inconsistent

• Messaging

• Formatting

• Wayfinding

Content comes in many forms and flavors.

We need to know what we’re actually

working with.

Because we are designing experiences.

Consider Responsive Design

Our content must flow across various

viewports.

Designing Inside-Out

• Designing inside-out is from the detailed

to the organizational level.

• Content-first is generally also inside-out.

• Working content-first is better for

Information Architecture (IA).

• And maybe you should design the home

page last.

Why Lorem Ipsum Won’t Cut It

• Lacks context.

• Says nothing about relationships

between content elements.

• Doesn’t challenge our design

assumptions like real content does.

Challenges

• Most clients don't understand what we

mean by content or page elements.

• The client's mental model and yours are

different.

Challenges

• They seem to think we’re magicians or

button pushers. Or magical button

pushers.

• But usually, they simply don’t know how a

website gets made.

• They don’t know the first steps.

A Little About Content Strategy

• Define how you’re going to use your

content to meet your goals.

• Define how you’re going to use content to

satisfy users’ needs.

• Set benchmarks for success.

A Little About Content Strategy

• Use your strategy to guide decisions

about content throughout its lifecycle,

from discovery through deletion.

Case

Study

Case

Study

Case

Study

Case

Study

Case

Study

CONVINCING THE CLIENT

Part 2

Give them analogies

• Would you ask an architect to design a

house without specifying number of

bedrooms and bathrooms?

• Would you ask an engineer to design a

car without ever having seen a human?

Tell them the benefits of

content-first design.

• Most obvious benefit: content isn't shoe-

horned into an existing, inappropriate

layout.

• The content needs to be designed too.

Tell them the benefits of

content-first design.

• Better structure of the information:

– you are able to identify structural patterns

within content types (modular)

– on the other end of the spectrum, you can

see the "big picture" organization that the

content suggests (relationships between

modules)

Tell them the benefits of

content-first design.

• Better structure of the information:

– content becomes more efficient (reduced

redundancy)

– better wayfinding/navigation

Tell them the benefits of

content-first design.

• Better branding:

– clear and consistent tone throughout

– targeted messaging

– reduction in conflicted messaging

Tell them the benefits of

content-first design.

• Easier to keep project on time and on

budget:

– if content is carefully considered and

produced, the "design" process will go

quickly afterwards

– won’t have a website go live with incomplete

content, or miss a critical deadline

Sometimes clients are nervous.

• they are nervous about the project and

are hoping you will do most of the work

for them

• break the “bad news” to them gently

Ease their nerves.

• explain the content-first process you plan

to follow

• show them the collaboration tools you

plan to use

Get to know their content needs.

• ask how the content will be maintained

• review their existing site or a

competitor's

• explain a couple of content challenges

that can come up with it

Let them know that the content

will take lots of time and effort.

• suggest they prioritize their content

production

• set realistic milestones

• can the project be published in phases?

• suggest they might consider hiring a

copywriter

Promise to support them through

the content creation.

Talk directly with their content people if

you can.

Winning their confidence in this plan

depends upon you explaining the process

sufficiently in layperson's terms

without getting overly in-depth.

Build content-first design into your

contract schedule.

Explain how delays in content creation will

result in delays in design production, and

perhaps additional charges.

You have already begun

the discovery process.

DISCOVERY

Part 3

Defining Audiences

• who needs what we have?

• why do they need it?

• how will they access it?

• personas: fictitious people you're

designing for, conceptualized from real

users

Defining Goals: Site Owner

• entertain

• educate

• persuade

• convert

• etc.

Defining Goals: Users

• What problems do they need to solve?

• Why do they want what you have?

Interacting with the User

• What story can we tell them?

• What conversation can we have with

them?

• What editorial voice should we employ?

• Are there any existing editorial style

guides we need to follow?

Interacting with the User

Be sure to have your developer at the

meeting!

Thorough discovery ensures the quality of

our content,

our structure,

our presentation, and

our functionality.

CONTENT CREATION

Part 4

Helping the Client

Develop Content

We need to determine:

• what content types are needed?

• how are they related to each other?

Helping the Client

Develop Content

The client needs to figure out:

• what are the top questions and

complaints from our audience?

• what is valuable to our users?

Helping the Client

Develop Content

Many use analytics and Google keyword

research to guide content creation.

Helping the Client

Develop Content

Sourcing content:

• repurposing existing

content

• new, original content

• bought/third-party

content

• curated content

• curated content

• crowdsourcing/

conversation

• competitor content

Helping the Client

Develop Content

Identify the Person in Charge on the

client’s end.

• They see that things get done according

to the approved content strategy.

• They must be allowed to say “no” to

content.

• They do not need to create all content.

Helping the Client

Develop Content

Identify the Person in Charge on the

client’s end.

• They identify the content experts who

will write the content: who will "own"

each piece of content.

• Ideally, this person is your single point of

contact.

First Drafts to Final Drafts

Instruct the content creators to:

• keep content unformatted

• ignore page structure and flow

• keep it flexible, lean, and concise

Beyond the Static Page

• forms and interactions

• write for every interaction

• metadata and microdata

The Iterative,

Collaborative Process

Tools for collaboration:

• Google Docs

• Evernote

• spreadsheet to collect and organize

• GatherContent.com and the like

The Iterative,

Collaborative Process

Very important:

Agree on an approval process.

Case Study:

¡Bienvenidos!

Case Study:

¡Bienvenidos!

DESIGNING FOR THE

CONTENT, DESIGNING THE

CONTENT

Part 5

Working with Early Drafts

• Work with the earliest drafts you can

access

• AKA “proto-content”

• This will help you begin…

Understanding the Content

• Read the text thoroughly.

• Read it again and ask questions if it is

unclear.

• When you comprehend what needs to be

communicated, the appropriate layout

tends to suggest itself.

If you can't understand the content,

the user never will.

Rewriting Content as Allowed

• Become a better designer by learning

copywriting basics

• Write simply: short words and phrases

• Limit yourself to one idea per paragraph

• Short chunks of text

• We want each page to be scannable

Organizing the Content

• Prioritize the content

• Your goals: clarity and access

• Card sort/post-its: what content is related

to what other content?

Organizing the Content

For each chunk of content, consider:

• What kind is it?

• Categories

• Tags / Key phrases

• Does it go in a sidebar?

• Does it deserve its own page?

Creating scannable content:

it takes time and effort

• Put the most important stuff at the top

• Put a quick summary at the top

• Format lists as lists

• Use headings and subheadings

• Again, you can't do this well unless you

understand the content well

Problem Solving for

Optimal Structure

• How will you visually group related

content?

• How will you incorporate white space?

• How will you create a focal point on each

page?

• How will you utilize repetition?

Problem Solving for

Optimal Structure

This can’t be done without real content.

And again: involve your back-end

developer in the process.

Problem Solving for

Optimal Structure

• How will the content flow for differing

screen widths?

• Where are there opportunities to hide

info until needed?

• Where are there opportunities to use

iconography in place of text?

• How will you make it all accessible?

What About Wireframes?

• They might no longer be part of this

process

• Try working straight in the browser or

use paper prototyping

• Progressive enhancement:

text > HTML > CSS > interactive coding

• Test content prototypes with real users

Yes, the final design must be flexible

enough to adapt to new content,

but it will never truly get there without real

content to design from.

Thank you.

slideshare.net/dawnsbrain