Top Banner
Hi! I’m Karen McGrane from Bond Art + Science @karenmcgrane 1
97
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Paramore University: Content Strategy with Karen McGrane

Hi!I’m Karen McGrane

from Bond Art + Science

@karenmcgrane

1

Page 2: Paramore University: Content Strategy with Karen McGrane

2

Page 3: Paramore University: Content Strategy with Karen McGrane

3

Page 4: Paramore University: Content Strategy with Karen McGrane

4

Page 5: Paramore University: Content Strategy with Karen McGrane

5

Page 6: Paramore University: Content Strategy with Karen McGrane

6

Page 7: Paramore University: Content Strategy with Karen McGrane

what about

the art?

7

Page 8: Paramore University: Content Strategy with Karen McGrane

8

Page 9: Paramore University: Content Strategy with Karen McGrane

9

Page 10: Paramore University: Content Strategy with Karen McGrane

10

when do we see the art?

Page 11: Paramore University: Content Strategy with Karen McGrane
Page 12: Paramore University: Content Strategy with Karen McGrane

12

Page 13: Paramore University: Content Strategy with Karen McGrane

13

WHERE IS THE ART?

Page 14: Paramore University: Content Strategy with Karen McGrane

14

Page 15: Paramore University: Content Strategy with Karen McGrane

15

Page 16: Paramore University: Content Strategy with Karen McGrane

16

DISASTER STRIKES!

Page 17: Paramore University: Content Strategy with Karen McGrane

17

Page 18: Paramore University: Content Strategy with Karen McGrane

18

Page 19: Paramore University: Content Strategy with Karen McGrane

19

Page 20: Paramore University: Content Strategy with Karen McGrane

20

Page 21: Paramore University: Content Strategy with Karen McGrane

21

YOU WOULDN’T BUILDA GALLERY THIS WAY.

Page 22: Paramore University: Content Strategy with Karen McGrane

22

WHY WOULD YOU BUILD A WEBSITE THIS WAY?

Page 23: Paramore University: Content Strategy with Karen McGrane

23

TWO BIG PROBLEMS

Page 24: Paramore University: Content Strategy with Karen McGrane

“Organizations invest tremendous resources on developing the framework for a great user experience — fabulous design, robust content management infrastructure.

Yet when it comes to the content itself, there's often a gap.

The end result is that the value proposition for customers can't be delivered because the content is insufficient, inadequate, and inappropriate.

— Rahel Bailie

24

Page 25: Paramore University: Content Strategy with Karen McGrane

We pretty much know what we want to say.

25

Our marketing team is handling the content.

Kristina Halvorson, Brain Traffic

Copywriting just isn’t that big of a deal.

We can figure the content out later.

We already have most of the content.

Page 26: Paramore University: Content Strategy with Karen McGrane

WHY CONTENT STRATEGY?WHY NOW?

26

Page 27: Paramore University: Content Strategy with Karen McGrane

27

FROM TOStatic Dynamic

Centralized Decentralized

Walled Social

Costly Cheap

Geeky Mainstream

Page 28: Paramore University: Content Strategy with Karen McGrane

MARKETING TECHNOLOGY

USER EXPERIENCE

28

CONTENTSTRATEGY

Content Management

Social MediaMarketing

InformationArchitecture

Page 29: Paramore University: Content Strategy with Karen McGrane

29

• What are my business objectives?• What do my users want to do?• What does my brand stand for?

Design Strategy Content Strategy

Technology Strategy

Product Strategy

• How will we build it?• Who will maintain it?

• How will users interact with it?• How will it be structured?• What will it look like?

• What do we want to say?• Where will we get the content?• Who will maintain it?

Page 30: Paramore University: Content Strategy with Karen McGrane
Page 31: Paramore University: Content Strategy with Karen McGrane

NAMING A PAIN POINT.

31

Page 32: Paramore University: Content Strategy with Karen McGrane

DEFINING A PROCESS.

32

Page 33: Paramore University: Content Strategy with Karen McGrane

33

Page 34: Paramore University: Content Strategy with Karen McGrane

34

Page 35: Paramore University: Content Strategy with Karen McGrane

Test, Measure, and Optimize

Requirements IA Design Development

Creative Design

Design QA

Insight

Current Site AuditStakeholder &

User InterviewsCompetitive &

Market Research

Vision

Usability TestingPaper Prototype & Creative Comps

Post Launch Analytics Report

Page 36: Paramore University: Content Strategy with Karen McGrane

En

gin

eerin

gH

TML

Ex

pe

rie

nc

e D

es

ign

Usa

bili

tyP

rod

uct

Ma

rket

ing

User Experience Design Process: Critical Path

Meetingcoordinated byProgramManagement

UE Team memberassigned toprojectattends meeting

Takes input fromall members asrelated to UIdesign

Receives RequirementsDocument

Needs:List of teammembers,contact info, initialschedule,approval process(people)

Prod. Mktg. feeds teamany results from Marke tResearch

Functionality/Conceptual modeltesting with earlyprototypes

Discussion with engineeringabout any potential newtechnology and its impact onschedule and desired usertasks

Design teambrainstorms, iteratesand collaborates onvisual representationof functionality andscreen designsWork can begin whileuser flow a n dfunctionality isiterating

Visual Designexploration,copy writte nand finetuned

Design works wi thUsability to provideprototype andguidance of whatpriorities ofdiscovery shoul dbe - i.e. businessconstraints,technicalconstraints,optional versions totest

Design teampresentswireframes a n dmockups toproduction with fullset of style specs[font size & color,line spacing,colors, images,links, etc]

ExperienceDesign teamreview Visualdirection

Detailed Producttesting - both forfunctionality andspecific content andvisual design

Product Team meets -Design meeting withProduct Marketing,Engineering, andUsability to reviewrecommendations

Refine Visualdirection, copy,user instructions,help and UIcomponents asnecessary

Final functionality &visual design signoff- Production- Engineering- QA- Partner (if applicable)- Usability- Creative Director- Product Marketing- VP (as necessary)

Production receivesapproved mockupsand works wi thDesign on productarea as needed

Production buildssite and featuresworking wi t hEngineering asapplicable

Engineering informsDesign if there arechanges, issues w i thplanned functionality

Product Team meets -Hand off toproduction,engineering andoperations mode ofthe product cycle

Project Initiation

Prod. Marketing does P&L, content evaluation,creates materials that describe needs, goals,objectives, dependencies, partnerships,business issues and any other relevan tcontent or functionality issues, pulls togethercross-functional tea m

Feasability Studies / FieldResearchWhat do Users wantHow do they want to do it(Usability Conceptual Phase)

UE Team member assignedto project

KickoffMeeting

Initial conceptbrainstorms withProduct Marketing tocollect and gatherrequirements andunderstandcompetitive landscape

Initial Design Cyc le

Engineering mightbegin codingwork from initialfunctionalityspecs

Initial exposure toscope of design andfunctionality

Assess techn i c a llimitations andalternatives

Create DesignSpec/CreativeBrie fMaterial is fromMRP/PRD andbrainstorming notesand otherrequirements, distillsinfo, looks atcompetitivelandscape, rev iewsscope in context ofnetwork and sit eprecedence

UE Teambrainstorm withUsability - led byproject teammember

what's the bestscenario fo rusers

Early functionalitydesigns anddefinitions ofpages needed fordevelopedfunctionality

Rapid prototype forproof of conceptand early testing w/usability

Could be paperprototype, functionalstatic HTML, Flashinteraction,Mockups/Wireframes asimage maps

User Ed developsuser education plan

Design works wi thUser Education tobegin any Help andFAQs and otherinstructional textand all errormessages

Design takesrecommendedchanges and inputfrom Team -including ProductMarketing,Engineering, Exp.Design Team andUsability Research

Revises user fl o wand works thro u g hgreater detail ofindividual screens

Product Team meets -Design presents functionaluser flow, potential userscenarios and high levelscreens need e dApproval cycle here

Product Team meets -Reviewrecommendations fromtesting

Expert advice onprevious research a n dnew research need e d(Usability 2nd Phase)

Design Iteration / Testing / Iteration / Early Refinement

Project isinititated by ProductMarketing withProgramManagement

feedback cyc l e

feedback cyc l e

Revises user fl o wand worksthrough greaterdetail of individualscreens

Product Team meets -Review revisions

iteration cycle

iteration cycle

Refinement / Copy / Final Visual Design / Robust Testing

iteration cycle

iteration cycle

Production Build / Reviews / Design Team Sign Offs

Product TeamApproval cycle here

User Ed. delivers allHelp text andassociate dscreenshots a n dspecs toProduction

Credits: Erin Malone: Designed for AltaVista November 10, 2000

36

Page 37: Paramore University: Content Strategy with Karen McGrane

An ExampleProduct / Software / Web Design Process Guide

L E G E N D MILESTONEDELIVERABLE IDEA REVIEW CHECKPOINT

KEY MEETING INFORM

discover definition refinement development

I T E R A T I OI T E R A T I O N S

business owners

productmanager

ui/id/iadesign

visualdesign

user research

production

Deliverable:

ConceptDocument

and / or

ConceptPrototype

Deliverable:

ProposalDocument

this stepmay be

optional

Deliverables:

ProductRequirements

Document(PRD)

(authored by a

Product Manager)

and

Concept Design

Materials(authored by

blended design

team)

Deliverable:

Templates &

Navigation(authored by

UI / ID / IA Design)

concept approval

PRDapproval

UI designapproval

committedschedule

proposal approval and schedulingconceptual design review

Communicate business needs & brand identity

Gather supporting market research, etc.

Provide input for level of effort

Gather information for and create theProposal Document

Develop strategic rationale, business case, financial analysis, policy considerations,implementation plans.

Brand Positioning

Collect team input

Write Draft PRD and Review

Project kickoff

Visual design explorations

UCD research cont'd. (i.e. paper prototyping,participatory design, field studies, surveys,etc.

Research: Solicit input from Business owners/brands - contact other associated stakeholders(legal, customer support, international)

Refine design concepts

Develop navigation model and refine scenarios

Review Promotional & Marketing Needs

Product Roadmap

Point release plan

Refined Visual design explorations

Competitive usability testing Prototype usability test

Wireframes and navigation maps

UI Design Approval

Product prototype, e.g. paper, HTML, director, or flash

Business developm

Mockups to marke

Promotion plan

Art direction

Prototype testing

credits Design based on earlier maps created by various UI design teams at America Online Incorporated. Revised and edited by Erin Malone, September 2003 for the AIfIA.

Concept Design Review

Provide input for level of effort

Provide input for level of effort

Provide input for level of effort

Define personas, usage scenarios, usergoals, and perform task analysis

Review user feedback on previous productUI's and analyze competitive products.

Define personas, usage scenarios, usergoals, and perform task analysis.

Not

e: In

som

e co

mpa

nie

s th

ese

role

s ar

e en

com

pass

ed b

y on

e pe

rson{

Not

e: In

som

e co

mpa

nie

s th

ese

role

s ar

e b

len

ded

into

on

e or

tw

o pe

ople

. i.e

. ui m

ay d

o us

er r

esea

rch

or

visu

al d

esig

ner

s m

ay d

o ia

, etc

.

{

concept

start

Communicate business needs & brand identity

Gather information for andcreate the Concept Document

Describe problem or needs,proposed solution, and benefits.

Develop usage scenariosand/or design concepts

Leads brainstorming

Idea

RO

LE

SPHASESMILESTONES

37

Page 38: Paramore University: Content Strategy with Karen McGrane

C O N F I D E N T I A LCopyright © TSDesign 1998-9

digital sketches online styleguideHTML interface files

TSDesign Analysis FrameworkSM

1 Delivery of User Benefits

2 Transaction Flow

3 Navigation & Hierarchy

4 Visual Language

Design Analysis

PHASE 1 PHASE 2 PHASE 3

Design Solutions

description:• an expert design analysis from the user’s perspective

benefits:• benchmarks the effectiveness of your site based upon stated

business objectives for the site and your users

• analyzes the design of the site to find out if the benefits of use

are actually being delivered

• recommends methods for substantially improving your users

experiences and meeting future business objectives

description:• By collecting and reviewing print, other tangible artifacts and

Web sites your company creates and disseminates, and

corporate standards (if they exist) we can then distill the basis

for the visual language to be developed that is consistent with

the company's identity and product brands. This work is

continued in the Visual Systems Design phase.

TSDesign User Experience AuditSM

User Personae & Profiling ModuleSM

(UP&P)

Product Strategy and Product Design Strategy Blueprint*

Visual Identity SystemsIdentity and Visual Language Audit

description:• define ‘what the product should be’ and ‘how it

should work’

benefits:• the achievement of clearly articulated, agreed-

upon and aligned mission, core competencies,

corporate goals, and objectives for the site

• the articulation and understanding of your users,

their needs and and your business objectives for

establishing and extending relationships

with each one

• the definition of the organizational resources

required to build and maintain the site

• the creation of a detailed blueprint for design or redesign:

- site organization (footprint)- useful and usable features and functions

for the users- descriptions of intended functionality- messaging strategy

• the receipt of a phased implementation plan with associated costs

Interaction DesignTechnology ConsultingTechnology Audit Information Architecture Interface Design Production

description:• create seamless and consistent transaction flow• define widgets and technologies to best support

the features and functionality

description:• works with client to determine best technology to

implement the product that aligns with client's technology strategy

• creates and evaluates technical RFP's• interfaces between design and technical teams

description:• define site hierarchy• define navigation scheme• define hierarchy of information on pages• identifies content workflow and organizational

responsibilities and resources

description:• using the components, defined in the Visual Systems

Design Phase, create design styles for each page-typeneeded to support interaction, navigation and hierarchy

• apply these design styles to page schematics

description:• create sample HTML files to illustrate page layout

and design styles• deliver and present documentation• Interface QA / training

description:• establish, with the client, a shared

understanding and common language for

visual design and how it effectively

communicates the brand

• define a visual language for the site

- logo, logotype systems- typography- grid system- color palette- imagery style and usage

benefits:• provides the visual language components

with which to build the interface

persona

+ in

terview

s

competitive and comparative analysis

user profiles

user profiles

corporate missioncore competenciescorporate goalsculture and valuesskills and methodologiesknowledge capital and experiencepeople, processes & technologystakeholders and initiativesenterprise-wide challengesInternet objectivescustomers and userscompetitive landscape

user, feature, objective matrix

new footprint and reclustered contentnew ideas

visual language research

The intended value the organization

delivers to users and customers through its site.

The sequence of questions, prompts, and results

that make up a task.

The degree to which a site affords the user to easily

navigate the environment and efficiently locate rele-

vant content.

The representation and support of the identity,

brand and information architecture through

visual elements and overall style.

schematic drawing

Intentional User Experience table

2 investigate 3 define users 4 qualify features

usability testing

T S D E S I G N M E T H O D O L O G Y

design for

Intentional

User ExperiencesSM

5 innovate

1 understand

6 refine 7 describe

Product Strategy Blueprint/Functional Description

Audit comments:• Users arriving at the front page of the

site may not understand what information is there for them.

• The names of the sections do not give users a path to follow to find the informa-tion they need.

• No specific path has been established for each user type. Users must use their best judgement to find the information they’re looking for and often may not be successful.

* workbooks not shown

scope or

rescope

relationship

usability testing

speculate &

innovate

existing

and new

technology

experience brief:

strategy story

and positioning

innovate

Design Implementation

site mapsprocess overviews

innovate

Discount Usability

description:• testing to discover usability problems to provide

information to team to help detect and resolve transaction flow and navigation and techinal problems

page schematics & content development

38

Page 39: Paramore University: Content Strategy with Karen McGrane

39

THE CONTENT STRATEGY PROCESS

Page 40: Paramore University: Content Strategy with Karen McGrane

1. THINK BEYOND THE TEMPLATE.

40

Page 41: Paramore University: Content Strategy with Karen McGrane

41

Name: Ron BuckleyAge: 47Family: Married, 2 children Job:   ManufacturingHome: Port Washington, NY Income: $55,000/yearTravel: 2-3 times per month

Ron represents a flavorings manufacturer. One of his big customers is in Burlington, VT, and he visits their plant at least once every month or two. Being a clever sort, Ron has emailed to himself the hotel detail page for each of the hotels he regularly visits. Prior to his trip, he opens the email with “Burlington – Colchester” as the subject, and clicks on the link to take him immediately to the hotel detail page. He then selects a non-smoking room with a king bed from the list of room types, and is prompted to enter his stay dates, which he does. From the room detail page, he clicks “Reserve” to book a room, enters his guest information and rewards number. When he prints out his confirmation to conclude his transaction, he notes it took him less than five minutes to complete.

Page 42: Paramore University: Content Strategy with Karen McGrane

42

Boutique sites deliver on style preferences for travelers in-the-know

Next-generation sites innovate to provide an easier-to-use interface

Travel booking engines aggressively promote air + hotel deals

Well-known chains inspire loyalty through brand experience and rewards

Page 43: Paramore University: Content Strategy with Karen McGrane

43

Page 44: Paramore University: Content Strategy with Karen McGrane

44

Page 45: Paramore University: Content Strategy with Karen McGrane

45

Page 46: Paramore University: Content Strategy with Karen McGrane

We opted to go live with the existing content.

46

Page 47: Paramore University: Content Strategy with Karen McGrane

Buy-in for that decision stretched to the highest levels of the organization.

47

Page 48: Paramore University: Content Strategy with Karen McGrane

We knew the content sucked. We just believed there was

nothing we could do about it.

48

Page 49: Paramore University: Content Strategy with Karen McGrane

Within an hour, the angry calls started. Client received hundreds of angry calls from franchisees the first day.

Complaint call volume held steady over the next week as people called back to check on status.

The client team was unprepared to make quick changes to the content, and their slow response just added fuel to the fire.

Site had to be rolled back to the previous version while they came up with a plan to update the content.

49http://www.flickr.com/photos/schoppa/3148751414

Page 50: Paramore University: Content Strategy with Karen McGrane

7000 pages.45 people.Six weeks.5400+ hours.

50

The upside is that the second launch was very successful.

Still, I can't say that I'd choose to do it that way again. 

Page 51: Paramore University: Content Strategy with Karen McGrane

HOW TO THINK PAST TEMPLATES

51

_Talk about why it’s important to provide great content. Even when people don’t want to listen.

_Get content in the project plan, even if you’re not responsible for it.

_Scare people with the “giant spreadsheet of terror.”_Prototype and test wireframes and designs with best and worst case example content.

_Start content migration early: first step, not the last.

Page 52: Paramore University: Content Strategy with Karen McGrane

1. THINK BEYOND THE TEMPLATE.2. EVALUATE CONTENT QUALITY.

52

Page 53: Paramore University: Content Strategy with Karen McGrane

53http://www.flickr.com/photos/carlaarena/3188139819/

Page 54: Paramore University: Content Strategy with Karen McGrane

54

DON’T LET THIS BE THE FATE OF YOUR WEB CONTENT

http://www.getittogetherinc.net/images/storage%20before.JPG

Page 56: Paramore University: Content Strategy with Karen McGrane

56

Page 57: Paramore University: Content Strategy with Karen McGrane

I’m better at thinking about abstract relationships between content types,

classification frameworks, metadata elements, than I am at looking at the specifics of

content.

57Dan Brown, Letter to a Content Strategist

Page 58: Paramore University: Content Strategy with Karen McGrane
Page 59: Paramore University: Content Strategy with Karen McGrane
Page 61: Paramore University: Content Strategy with Karen McGrane

61

Page 63: Paramore University: Content Strategy with Karen McGrane

HOW TO EVALUATE QUALITY

63

_Don’t just inventory: analyze your content. Don’t just look at what you have, assess whether it’s any good.

_Have a strategy for how to persuade stakeholders that your approach is valid.

_Conduct a gap analysis to compare what you have to what you need.

_You can usability test content too.

Page 64: Paramore University: Content Strategy with Karen McGrane

1. THINK BEYOND THE TEMPLATE.2. EVALUATE CONTENT QUALITY.3. MAKE IT FUTURE FRIENDLY.

64

Learn more athttp://FutureFriend.ly

Page 65: Paramore University: Content Strategy with Karen McGrane

65

Page 66: Paramore University: Content Strategy with Karen McGrane

66

Page 67: Paramore University: Content Strategy with Karen McGrane

67

Page 68: Paramore University: Content Strategy with Karen McGrane
Page 69: Paramore University: Content Strategy with Karen McGrane

69

Page 70: Paramore University: Content Strategy with Karen McGrane

70

content

content

content

content

content

content

content

Page 71: Paramore University: Content Strategy with Karen McGrane

http://www.flickr.com/photos/filamentgroup/5149016958/

Page 72: Paramore University: Content Strategy with Karen McGrane

72

FRAGMENTED CMS TOOLSFRAGMENTED INTERNAL PROCESSESFRAGMENTED DEVICES + PLATFORMS

Page 73: Paramore University: Content Strategy with Karen McGrane

STRUCTURED CONTENT

73

Page 74: Paramore University: Content Strategy with Karen McGrane

74

CONTENT

EMAIL

INTRANET

SOCIAL MEDIA

MICROSITES

MOBILE WEBWEBSITE

PRINT

TABLET APPS

MOBILE APPS

BLOGS

Page 75: Paramore University: Content Strategy with Karen McGrane

“Traditional publishing and content management systems bind content to display and delivery mechanisms, which forces a recycling approach for multi-platform publishing.

A semantic content publishing system, on the other hand, creates well-defined chunks of content that can be combined in whatever way is most appropriate for a particular platform. All display issues are addressed by delivery applications, rather than by a content management system earlier in the process.

—Dan Willis75http://dswillis.com/uxcrank/?p=378

Page 76: Paramore University: Content Strategy with Karen McGrane

76

PRINT

EMAIL

INTRANET

SOCIAL MEDIA

MICROSITES

MOBILE WEBWEBSITE

PRINT

TABLET APPS

MOBILE APPS

BLOGS

Page 77: Paramore University: Content Strategy with Karen McGrane

77

WEB

EMAIL

INTRANET

SOCIAL MEDIA

MICROSITES

MOBILE WEBWEBSITE

PRINT

TABLET APPS

MOBILE APPS

BLOGS

Page 78: Paramore University: Content Strategy with Karen McGrane

78

Page 79: Paramore University: Content Strategy with Karen McGrane

79

Page 80: Paramore University: Content Strategy with Karen McGrane
Page 81: Paramore University: Content Strategy with Karen McGrane

TRUNCATION IS NOT A CONTENT STRATEGY

81

Page 82: Paramore University: Content Strategy with Karen McGrane
Page 83: Paramore University: Content Strategy with Karen McGrane

NPR’S CMS

83

Page 84: Paramore University: Content Strategy with Karen McGrane

Content admins hate all the fields.But the reason they hate all the fields

is the workflow is bad.

84Jason Cammerer

Page 85: Paramore University: Content Strategy with Karen McGrane

CMS IS THE ENTERPRISE SOFTWARE THAT UX FORGOT

85

Page 86: Paramore University: Content Strategy with Karen McGrane

86

Page 87: Paramore University: Content Strategy with Karen McGrane

87

BETTER CMS WORKFLOW

Page 88: Paramore University: Content Strategy with Karen McGrane

88

Beautiful software, even for back-end users, is becoming an expectation.

We’re moving in this direction because we now understand that better content management systems foster better content.

—Matt Thompson

http://www.poynter.org/how-tos/digital-strategies/134791/4-ways-content-management-systems-are-evolving-why-it-matters-to-journalists/

Page 89: Paramore University: Content Strategy with Karen McGrane

FIRST:

GREAT CONTENT DOESN’TJUST HAPPEN.

Page 90: Paramore University: Content Strategy with Karen McGrane

Enthusiasm and support typically derails when examining the resources and commitment

required to produce regular content.

90Brian Solis, @briansolis

Page 91: Paramore University: Content Strategy with Karen McGrane

SECOND:

WE’RE NOT MAKING CONTAINERS.WE’RE CREATING USER EXPERIENCES.

Page 92: Paramore University: Content Strategy with Karen McGrane

Build from the content out. Not from the container in.

92Jeremy Keith, @adactio

Page 93: Paramore University: Content Strategy with Karen McGrane

THIRD:

IT’S TIME TO TAKE OUT THE GARBAGE.

Page 94: Paramore University: Content Strategy with Karen McGrane

80% of your content is crap.

94Paraphrase, @lukew

Page 95: Paramore University: Content Strategy with Karen McGrane

FOURTH:

THE FUTURE OF CONTENTIS STRUCTURED.

Page 96: Paramore University: Content Strategy with Karen McGrane

The more structure you put into content the freer it will become.

96Rachel Lovinger, @rlovinger