CONTENT STRATEGYFOR THE WEBIceWeb 2010
Hi!   I’m Karen McGranefrom Bond Art + Science    @karenmcgrane                          2
Concept ruthlessly stolen from Heather Champ @hchampVia Flickr User swirlspice under a Creative Commons License   3
4
CONTENT?INFORMATIONARCHITECTURE                   VISUAL                               DESIGN               INTERACTION   ...
WHY CONTENT STRATEGY?WHY NOW?                        6
1. EVERYONE’S A PUBLISHER2. EVERYONE’S A PUBLISHER3. ACTION, NOT AWARENESS                            7
“All companies, no matter what the size, muststart to think more like publishers than everbefore. Consumer behavior has ch...
Is Nike a sneaker company, or is it a media  company? If you go on        their site,you may opt for the latter.          ...
Our content is our advertising.           Michael Davis, Chief Creative Officer at TabletHotels                           ...
“One of the greatest challenges I encounter todayis not the willingness of a brand to engage, but itsability to create.Whe...
We already have most of the content.         Copywriting just isn’t                               that big of a deal.     ...
CONSIDER THE MASTHEADWritersCopy editorsArt directorsProduction staff                             Publishing is complex.Va...
topics are we going to cover?What    formats are we going to use? (Blogs, video, charts…)        does anyone care?Why     ...
1. EVERYONE’S A PUBLISHER2. CONTENT (MIS)MANAGEMENT3. ACTION, NOT AWARENESS                         15
http://www.flickr.com/photos/carlaarena/3188139819/   16
DON’T LET THIS BE THE FATEOF YOUR WEB CONTENT    http://www.getittogetherinc.net/images/storage%20before.JPG   17
1. EVERYONE’S A PUBLISHER2. CONTENT (MIS)MANAGEMENT3. ACTION, NOT AWARENESS                         18
“The essence of the Web is action. We go tothe Web because we have a task; there issomething we need to do; there is a pro...
THE ANSWER TO “WHY?”IS AN ACTION                       20
We should have        a blog.                         Our goal is to be seen                            as a resource.It w...
JUST BECAUSE YOU CANDOESN’T MEAN YOU SHOULD                          22
Here I told a little story about clients figuringout that the name of their problem is“information architecture.”I didn’t ...
NAMING A PAIN POINT.                       24
DEFINING A PROCESS.                      25
26
27
Current Site AuditStakeholder &                                                      Competitive &User Interviews         ...
User Experience Design Process: Critical Path                                                                             ...
An Example                                                                                                                ...
PHASE              1                                                                                      PHASE           ...
THE CONTENT STRATEGY PROCESS                          32
1. THINK BEYOND THE TEMPLATE.                           33
This page was redacted so I don’t get yelled atby lawyers. Honestly, doesn’t that sound awful?You wouldn’t want that to ha...
This page showed a competitive audit. If youwant to recreate the experience for yourself, goclick around to some other web...
This here is a series of moodboards that showan approach to creating a design system,including photography, color palettes...
Sigh. Okay, this page shows some sketchingexercises we did.Except apparently no one on the team couldfigure out how to ope...
This page showed a wireframe.The lines were all straight and the font wasArial.Master of my craft, here.
We opted to go livewith the existing content.                             39
Buy-in for that decision stretchedto the highest levels of the organization.                                             40
We knew the content sucked. We just believed there wasnothing we could do about it.                                41
Within an hour, the angry calls started. Client receivedhundreds of angry calls from hotels the first day.Complaint call v...
7000 pages.      The upside is that the second45 people.        launch was very successful.Six weeks.     Still, I cant sa...
HOW?       44
HOW TO THINK PAST TEMPLATES_Talk about why it’s important to provide great content. Even when people don’t want to listen....
1. THINK BEYOND THETEMPLATE.2. EVALUATE CONTENT QUALITY.                           46
From Flickr User 2493™   47
I’m better at thinking about abstract     relationships between content types,classification frameworks, metadata elements...
This page showed a video. You’re not going tobe able to see it on Slideshare, so I took it out.It contained the phrase “fe...
52
From Flickr User 2493™   53
HOW?       54
HOW TO EVALUATE QUALITY_Don’t just inventory: analyze your content. Don’t just look at what you have, assess whether it’s ...
1. THINK BEYOND THE TEMPLATE.2. EVALUATE CONTENT QUALITY.3. PLAN FOR CONTENTCREATION.                           56
WRITERS ARE LIKE DEVELOPERS.THEY WORK BETTER WITHDIRECTION.                               57
Logo                     Features      Browse Our Sites        About Us           Sign Up   Login   Support               ...
Logo                      Features      Browse Our Sites        About Us        Sign Up   Login   Support                F...
60
HOW?       61
HOW TO SPEC CONTENT_Connect back to the overall brand and messaging architecture._Direct the writer to appropriate source ...
1. THINK BEYOND THE TEMPLATE.2. EVALUATE CONTENT QUALITY.3. PLAN FOR CONTENTCREATION.4. DON’T FEAR NEW ROLES.    Extra sup...
64
65
66
We dont need a                Any backend  project manager. The         developer should bedevelopers should be able     a...
Here I went off on a little rant about roles onprojects.
FIRST:YOU WILL ADVOCATEFOR CONTENT.
SECOND:YOU WILL USE YOUR NEWCONTENT STRATEGY TOOLS.
THIRD:YOU WILL PARTNER WITHA CONTENT STRATEGIST.
THANKS!@karenmcgranekaren@bondartscience.comwww.bondartscience.com+1 (917) 887-8149
Content Strategy for the Web
Content Strategy for the Web
Upcoming SlideShare
Loading in...5
×

Content Strategy for the Web

4,206

Published on

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.

Ever wonder why so many websites feature dense, unreadable prose? Force you to navigate through pages of brochure copy and legalese? Look like they backed up a truck full of PDFs and dumped them in the content management system?

No content strategy, that’s why.

When done the wrong way, creating new content and managing the approval process takes longer and is more painful than anyone expects. But planning for useful, usable content is possible-and necessary. It’s time to do it right.

Published in: Technology, Education, Business

Content Strategy for the Web

  1. 1. CONTENT STRATEGYFOR THE WEBIceWeb 2010
  2. 2. Hi! I’m Karen McGranefrom Bond Art + Science @karenmcgrane 2
  3. 3. Concept ruthlessly stolen from Heather Champ @hchampVia Flickr User swirlspice under a Creative Commons License 3
  4. 4. 4
  5. 5. CONTENT?INFORMATIONARCHITECTURE VISUAL DESIGN INTERACTION DESIGN 5
  6. 6. WHY CONTENT STRATEGY?WHY NOW? 6
  7. 7. 1. EVERYONE’S A PUBLISHER2. EVERYONE’S A PUBLISHER3. ACTION, NOT AWARENESS 7
  8. 8. “All companies, no matter what the size, muststart to think more like publishers than everbefore. Consumer behavior has changeddrastically over the past few years.Customers are more accepting of content ”from “non-media” sites and the barriers topublishing are now non-existent. — Joe Pulizzi 8
  9. 9. Is Nike a sneaker company, or is it a media company? If you go on their site,you may opt for the latter. Harris Millard, President and COO at MediaLink 9
  10. 10. Our content is our advertising. Michael Davis, Chief Creative Officer at TabletHotels 10
  11. 11. “One of the greatest challenges I encounter todayis not the willingness of a brand to engage, but itsability to create.When blueprinting a social media strategy,enthusiasm and support typically derails whenexamining the resources and commitmentrequired to produce regular content. —Brian Solis 11
  12. 12. 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 intern is handling the content. Kristina Halvorson, Brain Traffic 12
  13. 13. CONSIDER THE MASTHEADWritersCopy editorsArt directorsProduction staff Publishing is complex.Various editorsManaging editorEditor in chiefAd salesThe Publisher Publishers and Content Strategy from Jeffrey MacIntyre 13
  14. 14. topics are we going to cover?What formats are we going to use? (Blogs, video, charts…) does anyone care?Why does this provide business value? are we doing to deliver the message?How should we say it? (Tone of voice…) will we get the content?Where can we syndicate the content? (Feeds, social media…) will this be published?When will it need to be updated? is responsible for this content?Who will maintain it over time? 14
  15. 15. 1. EVERYONE’S A PUBLISHER2. CONTENT (MIS)MANAGEMENT3. ACTION, NOT AWARENESS 15
  16. 16. http://www.flickr.com/photos/carlaarena/3188139819/ 16
  17. 17. DON’T LET THIS BE THE FATEOF YOUR WEB CONTENT http://www.getittogetherinc.net/images/storage%20before.JPG 17
  18. 18. 1. EVERYONE’S A PUBLISHER2. CONTENT (MIS)MANAGEMENT3. ACTION, NOT AWARENESS 18
  19. 19. “The essence of the Web is action. We go tothe Web because we have a task; there issomething we need to do; there is a problemwe need to solve. ”What helps us do? What helps us act? — GERRY MCGOVERN 19
  20. 20. THE ANSWER TO “WHY?”IS AN ACTION 20
  21. 21. We should have a blog. Our goal is to be seen as a resource.It would be cool if we posted some videos on YouTube. We plan to create a series of educational articles. Twitter! 21
  22. 22. JUST BECAUSE YOU CANDOESN’T MEAN YOU SHOULD 22
  23. 23. Here I told a little story about clients figuringout that the name of their problem is“information architecture.”I didn’t think it needed a funny picture.
  24. 24. NAMING A PAIN POINT. 24
  25. 25. DEFINING A PROCESS. 25
  26. 26. 26
  27. 27. 27
  28. 28. Current Site AuditStakeholder & 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
  29. 29. 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 forExperience 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 whats 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 sCredits: Erin Malone: Designed for AltaVista November 10, 2000 29
  30. 30. 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 markeNote: In some companies these roles are business ownersencompassed 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 UIs 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 Approvalor 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 byNote: 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 contd. (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. 30
  31. 31. PHASE 1 PHASE 2Design 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 companys 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 31
  32. 32. THE CONTENT STRATEGY PROCESS 32
  33. 33. 1. THINK BEYOND THE TEMPLATE. 33
  34. 34. This page was redacted so I don’t get yelled atby lawyers. Honestly, doesn’t that sound awful?You wouldn’t want that to happen to me, right?If you’re really curious this was a persona. Itlooks pretty much like every other personayou’ve ever seen. So just imagine one of those.
  35. 35. This page showed a competitive audit. If youwant to recreate the experience for yourself, goclick around to some other websites and writedown a few comments about whether they’reany good or not.
  36. 36. This here is a series of moodboards that showan approach to creating a design system,including photography, color palettes, andtypography.
  37. 37. Sigh. Okay, this page shows some sketchingexercises we did.Except apparently no one on the team couldfigure out how to operate a pen, so somehow“sketches” wound up meaning “wireframesmade with wavy lines and handwritten fonts.”I’m embarrassed just admitting that. Can we goback to talking about how your content sucks?
  38. 38. This page showed a wireframe.The lines were all straight and the font wasArial.Master of my craft, here.
  39. 39. We opted to go livewith the existing content. 39
  40. 40. Buy-in for that decision stretchedto the highest levels of the organization. 40
  41. 41. We knew the content sucked. We just believed there wasnothing we could do about it. 41
  42. 42. Within an hour, the angry calls started. Client receivedhundreds of angry calls from hotels the first day.Complaint call volume held steady over the next weekas people called back to check on status.The client team was unprepared to make quickchanges to the content, and their slow response justadded fuel to the fire.Site had to be rolled back to the previous version whilethey came up with a plan to update the content.http://www.flickr.com/photos/schoppa/3148751414 42
  43. 43. 7000 pages. The upside is that the second45 people. launch was very successful.Six weeks. Still, I cant say that Id choose to5400+ hours. do it that way again.  43
  44. 44. HOW? 44
  45. 45. 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. 45
  46. 46. 1. THINK BEYOND THETEMPLATE.2. EVALUATE CONTENT QUALITY. 46
  47. 47. From Flickr User 2493™ 47
  48. 48. 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 48
  49. 49. This page showed a video. You’re not going tobe able to see it on Slideshare, so I took it out.It contained the phrase “fecal matter,” which tome is more offensive than saying “sh*tstorm.” Mythbusters, Polishing a Turd 51
  50. 50. 52
  51. 51. From Flickr User 2493™ 53
  52. 52. HOW? 54
  53. 53. 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. 55
  54. 54. 1. THINK BEYOND THE TEMPLATE.2. EVALUATE CONTENT QUALITY.3. PLAN FOR CONTENTCREATION. 56
  55. 55. WRITERS ARE LIKE DEVELOPERS.THEY WORK BETTER WITHDIRECTION. 57
  56. 56. Logo Features Browse Our Sites About Us Sign Up Login Support Feature Name Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad. Find out more about: Feature Name | Feature Name | Feature Name | Feature Name | Feature Name | Feature Name 58
  57. 57. Logo Features Browse Our Sites About Us Sign Up Login Support Feature Name PUT PRODUCT DESCRIPTION HERE esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad. Find out more about: Feature Name | Feature Name | Feature Name | Feature Name | Feature Name | Feature Name 59
  58. 58. 60
  59. 59. HOW? 61
  60. 60. HOW TO SPEC CONTENT_Connect back to the overall brand and messaging architecture._Direct the writer to appropriate source materials, both online and offline._Guide selection of images, videos, and data visualizations, if needed._Indicate how often each content element should be reviewed, edited, or deleted._Provide direction across channels: web, email, social. 62
  61. 61. 1. THINK BEYOND THE TEMPLATE.2. EVALUATE CONTENT QUALITY.3. PLAN FOR CONTENTCREATION.4. DON’T FEAR NEW ROLES. Extra super bonus fourth thing! 63
  62. 62. 64
  63. 63. 65
  64. 64. 66
  65. 65. We dont need a Any backend project manager. The developer should bedevelopers should be able able to crank out some to manage themselves. HTML. HTML is easy. Why do we even I don’t get why we need different roles need a content strategist. for interaction and Writers can make visual design? spreadsheets. 67
  66. 66. Here I went off on a little rant about roles onprojects.
  67. 67. FIRST:YOU WILL ADVOCATEFOR CONTENT.
  68. 68. SECOND:YOU WILL USE YOUR NEWCONTENT STRATEGY TOOLS.
  69. 69. THIRD:YOU WILL PARTNER WITHA CONTENT STRATEGIST.
  70. 70. THANKS!@karenmcgranekaren@bondartscience.comwww.bondartscience.com+1 (917) 887-8149
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×