Web content: it's the meat in the sandwich, not the icing on the cake. Too often, organizations fail to deliver content that meets user needs and serves their business goals. Even during website redesigns, the editorial process gets short shrift in favor of building new features and creating new designs. Thinking about the content is always left until the last minute, always thought to be "somebody else's problem." These are session keynote Karen McGrane's slides from her portion of the presentation. Thanks for coming!

1. Hi!
I’m Karen McGrane
from Bond Art + Science
@karenmcgrane
1

2. 2

3. 3

4. 4

5. 5

6. 6

7. what
about
the art?
7

8. 8

9. 9

10. when do
we see
the art?
10

12. 12

13. WHERE IS
THE ART?
13

14. 14

15. 15

16. DISASTER
STRIKES!
16

17. 17

18. 18

19. 19

20. 20

21. YOU WOULDN’T BUILD
A GALLERY THIS WAY.
21

22. WHY WOULD YOU BUILD
A WEBSITE THIS WAY?
22

23. TWO BIG PROBLEMS
23

24. “
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

25. We already have
most of the content. Copywriting just isn’t
that big of a deal.
We can figure the
content out later.
We pretty much know
what we want to say.
Our marketing team is
handling the content.
Kristina Halvorson, Brain Traffic 25

26. WHY CONTENT STRATEGY?
WHY NOW?
26

27. FROM TO
Static Dynamic
Centralized Decentralized
Walled Social
Costly Cheap
Geeky Mainstream
27

28. USER EXPERIENCE
Information
Architecture
CONTENT
STRATEGY
Social Media Content
Marketing Management
MARKETING TECHNOLOGY
28

29. • What are my business objectives?
• What do my users want to do?
• What does my brand stand for?
De te gy
sig tra
nS S
tra
teg te nt
y C on
Product Strategy
• How will users interact with it? • What do we want to say?
• How will it be structured? • Where will we get the content?
• What will it look like? • Who will maintain it?
Technology
Strategy
• How will we build it?
• Who will maintain it?
29

31. NAMING A PAIN POINT.
31

32. DEFINING A PROCESS.
32

33. 33

34. 34

35. Current Site Audit
Stakeholder & Competitive &
User Interviews Market Research
Vision
Insight
Design
Development
QA
Requirements IA Design Creative
Design
Usability Testing Post Launch
Paper Prototype & Creative Comps Analytics Report
Test, Measure, and Optimize

36. User Experience Design Process: Critical Path
Kickoff
Project Initiation Initial Design Cyc l e Design Iteration / Testing / Itera
Meeting
Project is
Product Marketing
Prod. Marketing does P&L, content evaluation, Product Team meets -
inititated by Product creates materials that describe needs, goals,
Marketing with Prod. Mktg. feeds team Design presents functional
objectives, dependencies, partnerships, user flow, potential user
Program business issues and any other relev a n t any results from Marke t
Management scenarios and high level
content or functionality issues, pulls together Resear c h
screens need e d
cross-functional tea m Approval cycle h e r e
Feasability Studies / Field
Resear c h Expert advice on
Usability
What do Users w a n t previous research a n d feedback cyc l e
How do they want to do it Meeting new research need e d
(Usability Conceptual Phase) (Usability 2nd Phase)
coordinated by
Program
feedback cy
Management
UE Team member
Create D e s i g n
assigned to
Spec/Creative Rapid prototype for
Experience Design
project
Brie f proof of concept
attends meeting UE Team
Material is from and early testing w /
brainstorm with
Initial concept MRP/PRD and Early functionality usability
brainstorms wit h Takes input from Usability - led by
brainstorming notes designs and
all members as project team
Product Marketing to and other definitions of Could be paper
UE Team member assigned related to UI member
collect and gather requirements, distills pages needed for prototype, functional
to project design
requirements and info, looks at developed static HTML, Flash
what's the best
understand competitive functionality interaction,
Receives Requirements scenario fo r
competitive landscape landscape, rev i e w s Mockups/
Document use r s
scope in context of Wireframes as
Needs:
network and sit e image maps
List of team
precedenc e
members,
contact info, initial
schedule,
approval process
Initial exposure to
(people)
scope of design and
functionality
HTML
Assess techn i c a l
limitations and
alternatives
Engineering
Engineering might
begin coding
work from initial
functionality
spe c s
Credits: Erin Malone: Designed for AltaVista November 10, 2000
36

37. An Example LEGEND MILESTONE
DELIVERABLE IDEA REVIEW CHECKPOINT
Product / Software / Web Design Process Guide KEY MEETING INFORM
PHASES concept discover definition refinement developmen
conceptual
MILESTONES start concept
approval
proposal approval and scheduling design
review
PRD
approval
UI design
approval
committed
schedule
Communicate business needs Communicate business needs Brand Positioning Review Promotional & Marketing Needs Business developm
& brand identity & brand identity
{
Mockups to marke
Note: In some companies these roles are
business
owners
encompassed by one person
Collect team input Product Roadmap Promotion plan
Describe problem or needs, Develop strategic rationale, business case,
proposed solution, and benefits. financial analysis, policy considerations,
implementation plans. Research: Solicit input from Business owners/ Point release plan
product Gather information for and
brands - contact other associated stakeholders
(legal, customer support, international)
manager create the Concept Document Gather supporting market research, etc.
Write Draft PRD and Review
Gather information for and create the Deliverables:
ROLES
Proposal Document
Project kickoff Product
Requirements
Document
Review user feedback on previous product Refine design concepts
(PRD) Wireframes and navigation maps
UI's and analyze competitive products. (authored by a
{
ui/id/ia Develop navigation model and Product Manager) Product prototype, e.g. paper, HTML, director, or flash
refine scenarios
design Provide input for level of effort
UI Design Approval
or two people. i.e. ui may do user research or visual designers may do ia, etc.
and
Idea Deliverable: Deliverable: Deliverable:
Define personas, usage scenarios, user Proposal Templates
Concept goals, and perform task analysis I T E R AT I O N S I T E R AT I O
Document Document Concept Design Review
&
Develop usage scenarios this step Navigation
and/or design concepts Concept
and / or may be (authored by
Note: In some companies these roles are blended into one
optional Design UI / ID / IA Design)
Provide input for level of effort Visual design explorations Refined Visual design explorations Art direction
Materials
Leads brainstorming Concept
(authored by
visual Prototype
blended design
design team)
Provide input for level of effort UCD research cont'd. (i.e. paper prototyping, Competitive usability testing Prototype usability test Prototype testing
participatory design, field studies, surveys,
etc.
Define personas, usage scenarios, user
user goals, and perform task analysis.
research
production Provide input for level of effort
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.
37

38. PHASE 1 PHASE 2
Design Analysis Design Solutions
TSDesign User Experience Audit SM
Product Strategy and Product Design Strategy Blueprint* Technology Audit
description:
• an expert design analysis from the user’s perspective
description:
• define ‘what the product should be’ and ‘how it
1 understand 2 investigate 3 define users 4 qualify features
should work’
benefits: corporate mission persona user profiles user, feature, objective matrix
• benchmarks the effectiveness of your site based upon stated benefits: core competencies
• the achievement of clearly articulated, agreed- user profiles
business objectives for the site and your users corporate goals
• analyzes the design of the site to find out if the benefits of use
upon and aligned mission, core competencies,
culture and values User Personae &
corporate goals, and objectives for the site
are actually being delivered
Profiling Module speculate &
+ interviews
SM
skills and methodologies
• the articulation and understanding of your users,
• recommends methods for substantially improving your users
experiences and meeting future business objectives
their needs and and your business objectives for
knowledge capital and experience (UP&P) innovate
people, processes & technology
establishing and extending relationships
with each one stakeholders and initiatives
Intentional User Experience table •
TSDesign Analysis FrameworkSM
• the definition of the organizational resources enterprise-wide challenges competitive and comparative analysis experience brief:
1 Delivery of User Benefits The intended value the organization
required to build and maintain the site Internet objectives strategy story
and positioning
delivers to users and customers through its site.
• the creation of a detailed blueprint for design or customers and users
redesign:
The sequence of questions, prompts, and results - site organization (footprint) competitive landscape
2 Transaction Flow that make up a task. - useful and usable features and functions
for the users * workbooks not shown
The degree to which a site affords the user to easily - descriptions of intended functionality scope or
3 Navigation & Hierarchy navigate the environment and efficiently locate rele-
- messaging strategy rescope
relationship
5 7
vant content.
The representation and support of the identity,
• the receipt of a phased implementation plan with
associated costs innovate 6 refine describe
4 Visual Language brand and information architecture through
visual elements and overall style.
new ideas new footprint and reclustered content Product Strategy Blueprint/Functional Description
existing
Audit comments: and new
• Users arriving at the front page of the
site may not understand what information
is there for them.
technology
• 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.
Identity and Visual Language Audit Visual Identity Systems visual language research
description: description:
• By collecting and reviewing print, other tangible artifacts and • establish, with the client, a shared
Web sites your company creates and disseminates, and understanding and common language for
corporate standards (if they exist) we can then distill the basis visual design and how it effectively
for the visual language to be developed that is consistent with communicates the brand
the company's identity and product brands. This work is • define a visual language for the site
continued in the Visual Systems Design phase. - logo, logotype systems
- typography
- grid system
- color palette
- imagery style and usage
benefits:
• provides the visual language components
with which to build the interface
38

39. THE CONTENT STRATEGY PROCESS
39

40. 1. THINK BEYOND THE TEMPLATE.
40

41. 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
Name: Ron Buckley from the list of room types, and is prompted to
Age: 47 enter his stay dates, which he does. From the
Family: Married, 2 children room detail page, he clicks “Reserve” to book a
Job: Manufacturing
Home: Port Washington, NY
room, enters his guest information and rewards
Income: $55,000/year number. When he prints out his confirmation to
Travel: 2-3 times per month conclude his transaction, he notes it took him
less than five minutes to complete.
41

42. Travel booking Boutique sites
engines deliver on style
aggressively preferences for
promote travelers in-the-
air + hotel deals know
Well-known
chains inspire Next-generation
loyalty through sites innovate to
brand experience provide an easier-
and rewards to-use interface
42

43. 43

44. 44

45. 45

46. We opted to go live
with the existing content.
46

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

48. We knew the content sucked.
We just believed there was
nothing we could do about it.
48

49. 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.
http://www.flickr.com/photos/schoppa/3148751414 49

50. 7000 pages. The upside is that the second
45 people. launch was very successful.
Six weeks. Still, I can't say that I'd choose to
5400+ hours. do it that way again.
50

51. HOW TO THINK PAST TEMPLATES
_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.
51

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

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

54. DON’T LET THIS BE THE FATE
OF YOUR WEB CONTENT
http://www.getittogetherinc.net/images/storage%20before.JPG 54

55. From Flickr User 2493™ 55

56. 56

57. 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.
Dan Brown, Letter to a Content Strategist 57

60. Mythbusters, Polishing a Turd 60

61. 61

62. From Flickr User 2493™ 62

63. HOW TO EVALUATE QUALITY
_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.
63

64. 1. THINK BEYOND THE TEMPLATE.
2. EVALUATE CONTENT QUALITY.
3. MAKE IT FUTURE FRIENDLY.
Learn more at
http://FutureFriend.ly
64

65. 65

66. 66

67. 67

69. 69

70. content content content
content content
content content
70

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

72. FRAGMENTED CMS TOOLS
FRAGMENTED INTERNAL PROCESSES
FRAGMENTED DEVICES + PLATFORMS
72

73. STRUCTURED CONTENT
73

74. MOBILE
WEB MOBILE
WEBSITE
APPS
SOCIAL TABLET
MEDIA APPS
CONTENT
MICROSITES PRINT
BLOGS EMAIL
INTRANET
74

75. “
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 Willis
http://dswillis.com/uxcrank/?p=378 75

76. MOBILE
WEB MOBILE
WEBSITE
APPS
SOCIAL TABLET
MEDIA APPS
PRINT
MICROSITES PRINT
BLOGS EMAIL
INTRANET
76

77. MOBILE
WEB MOBILE
WEBSITE
APPS
SOCIAL TABLET
MEDIA APPS
WEB
MICROSITES PRINT
BLOGS EMAIL
INTRANET
77

78. 78

79. 79

81. TRUNCATION IS NOT A
CONTENT STRATEGY
81

83. NPR’S
CMS
83

84. Content admins hate all the fields.
But the reason they hate all the fields
is the workflow is bad.
Jason Cammerer 84

85. CMS IS THE ENTERPRISE
SOFTWARE THAT UX FORGOT
85

86. 86

87. BETTER CMS WORKFLOW
87

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/ 88

89. FIRST:
GREAT CONTENT DOESN’T
JUST HAPPEN.

90. Enthusiasm and support typically derails when
examining the resources and commitment
required to produce regular content.
Brian Solis, @briansolis 90

91. SECOND:
WE’RE NOT MAKING CONTAINERS.
WE’RE CREATING USER
EXPERIENCES.

92. Build from the content out.
Not from the container in.
Jeremy Keith, @adactio 92

93. THIRD:
IT’S TIME TO TAKE OUT
THE GARBAGE.

94. 80% of your content is crap.
Paraphrase, @lukew 94

95. FOURTH:
THE FUTURE OF CONTENT
IS STRUCTURED.

96. The more structure you put into content
the freer it will become.
Rachel Lovinger, @rlovinger 96

97. THANKS!
ROCK ON!
@karenmcgrane
karen@bondartscience.com
www.bondartscience.com
+1 (917) 887-8149