Content Strategy Will Make or Break Your Process

CONTENT STRATEGY WILL MAKE OR BREAK YOUR PROCESS Web Content 2010

Hi, I’m Jeff Eaton from Lullabot @eaton 2

Hi, I’m Karen McGrane from Bond Art + Science @karenmcgrane 3

Concept ruthlessly stolen from Heather Champ @hchamp Via Flickr User swirlspice under a Creative Commons License 4

There’s got to be a way to run a project so that I don’t get handed a mess of content at the last minute and I have to sort it out. 5

THE 11 HOUR SH*TSTORM PROBLEM TH 6

THE DAY 2 PROBLEM 7

REAL PEOPLE, REAL STORIES NAMES HAVE BEEN CHANGED TO PROTECT THE GUILTY

WE TELL OURSELVES THAT WE DON’T NEED GOOD CONTENT. WE JUST NEED TEMPLATES. 9

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. 10

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 11

We opted to go live with the existing content. 13

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

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

REFRAME THE CONVERSATION 16

REFRAME THE CONVERSATION 1. Speak up: the Emperor has no clothes 16

REFRAME THE CONVERSATION 1. Speak up: the Emperor has no clothes 2. Work with the worst content and the least compliant content providers 16

REFRAME THE CONVERSATION 1. Speak up: the Emperor has no clothes 2. Work with the worst content and the least compliant content providers 3. Do user research and usability testing with content providers (not just with end users) 16

REFRAME THE CONVERSATION 1. Speak up: the Emperor has no clothes 2. Work with the worst content and the least compliant content providers 3. Do user research and usability testing with content providers (not just with end users) 4. Document the paper trail (so you can back up your decision to use existing content) 16

WE DON’T PLAN TIME TO CREATE AND EDIT CONTENT. WE TREAT IT LIKE A BLACK BOX. 17

Design Process 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

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 any results from Marke t business issues and any other relev a n t scenarios and high level Management 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) coordinated by (Usability 2nd Phase) 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 / Initial concept brainstorm with 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 21

Refinement / Copy / Final Visual Design / Robust Testing Production Build / Reviews / Design Team Sign Offs Product Team meets - Product Team meets - Design meeting with Hand off to Product Marketing, Product Team production, Engineering, and Approval cycle here engineering and Usability to review operations mode of recommendations the product cycle Detailed Product testing - both for functionality and specific content and visual design iteration cycle iteration cycle Design works w i t h gn team Usability to provide Design team Final functionality & storms, iterates prototype and presents visual design signoff collaborates on guidance of what Refine Visual wireframes a n d User Ed. delivers all - Production l representation Visual Design Experience priorities of direction, copy, mockups to Help text and - Engineering nctionality and exploration, Design team discovery shoul d user instructions, production with full associate d - QA en design s copy writte n review Visual be - i.e. business help and UI set of style specs screenshots a n d - Partner (if applicable) can begin while and finetuned direction constraints, components as [font size & color, specs t o - Usability flow a n d technical necessary line spacing, Production - Creative Director ionality is constraints, colors, images, - Product Marketing ing optional versions to links, etc] - VP (as necessary) test Production receives Production builds approved mockups site and features and works w i t h working wi t h Design on product Engineering as area as needed applicable Engineering informs Design if there are changes, issues w i t h planned functionality 21

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. 22

DELIVERABLE IDEA REVIEW CHECKPOINT MILESTONE KEY MEETING INFORM inement development launch preparation post launch RD UI design committed visual design beta launch pproval approval schedule approval Review Promotional & Marketing Needs Business development / partnering Mockups to marketing Product Roadmap Promotion plan Point release plan L Evangelize A Post mortem U Wireframes and navigation maps Final product Product prototype, e.g. paper, HTML, director, or flash Begin writing functional spec specification Design fidelity checks and bug fixes UI maintenance & handoff to UI Design Approval UI Revisions based on testing build team N Deliverable: I T E R AT I O N S Templates I T E R AT I O N S & Navigation C (authored by UI / ID / IA Design) Refined Visual design explorations Art direction Visual Design Approval Handoff to build team Visual maintenance H Competitive usability testing Prototype usability test Prototype testing Write/update test plans for final usability Usability test release product capture issues for next release Focus Group, Field Studies, Survey Analysis, etc. Execute visual design Build/publish Build HTML QA 22

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 Proﬁling 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 information 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 beneﬁts: • provides the visual language components with which to build the interface 23

ation ng Interaction Design Information Architecture Interface Design Production description: description: description: description: echnology to • create seamless and consistent transaction flow • define site hierarchy • using the components, defined in the Visual Systems • create sample HTML files to illustrate page layout ith client's • define widgets and technologies to best support • define navigation scheme Design Phase, create design styles for each page-type and design styles the features and functionality • define hierarchy of information on pages needed to support interaction, navigation and hierarchy • deliver and present documentation s • identifies content workflow and organizational • apply these design styles to page schematics • Interface QA / training ical teams responsibilities and resources usability testing usability testing process overviews site maps schematic drawing digital sketches HTML interface files online styleguide innovate page schematics & content development Discount Usability scription: testing to discover usability problems to provide information to team to help detect and resolve transaction flow and navigation and techinal problems 23

THEN A MIRACLE OCCURS 24

Our new web strategy said “Organize the site around user needs rather than product types.” 25

Bank Go Checking Savings Credit Cards Loans & Lines Mortgages IRAs Insurance Investments

Your Bank! Go Managing Starting a Saving for Growing your your Money Family College Assets Paying Off Buying a Saving for Protecting Debt Home Retirement your Assets

The designs were signed off despite my strong recommendation that new sections not be included in the design if adequate time could not be provided to create the content. 28

The powers that be refused to acknowledge that good, quality content could not be slapped together at the 11th hour and should be properly planned for, created and revised. 29

Forced to “temporarily” massage existing content into new spaces. 30

Forced to “temporarily” massage existing content into new spaces. No marketing or SEO work can be done... because the content doesn’t exist. 30

Forced to “temporarily” massage existing content into new spaces. No marketing or SEO work can be done... because the content doesn’t exist. Negative user feedback saying the information provided isn’t specific enough. 30

Forced to “temporarily” massage existing content into new spaces. No marketing or SEO work can be done... because the content doesn’t exist. Negative user feedback saying the information provided isn’t specific enough. Web strategy FAIL. 30

REFRAME THE CONVERSATION 1. Don’t just try to persuade: start planning, writing, and editing 31

REFRAME THE CONVERSATION 1. Don’t just try to persuade: start planning, writing, and editing 2. Have a scope conversation with your project manager and the agency—bring your own project plan and sync up activities 31

REFRAME THE CONVERSATION 1. Don’t just try to persuade: start planning, writing, and editing 2. Have a scope conversation with your project manager and the agency—bring your own project plan and sync up activities 3. Demand to see real content in designs so you can see the missing pieces 31

WE DON’T CONNECT THE FRONT- END DISPLAY WITH THE CMS. AND WE DON’T THINK ABOUT THE ADMIN EXPERIENCE. 32

REFRAME THE CONVERSATION 1. Shift the discussion about the CMS away from “features” and towards “task flow” 40

REFRAME THE CONVERSATION 1. Shift the discussion about the CMS away from “features” and towards “task flow” 2. Don’t show designs without also showing the CMS input screen 40

REFRAME THE CONVERSATION 1. Shift the discussion about the CMS away from “features” and towards “task flow” 2. Don’t show designs without also showing the CMS input screen 3. Stress test your designs with worst case scenarios: most possible content and least possible 40

REFRAME THE CONVERSATION 1. Shift the discussion about the CMS away from “features” and towards “task flow” 2. Don’t show designs without also showing the CMS input screen 3. Stress test your designs with worst case scenarios: most possible content and least possible 4. Scope enough time for content migration—it will take longer than you think to get it right 40

GOOD CONTENT ISN’T MAGIC. IT TAKES PLANNING AND TIME. 41

PEOPLE DON’T GO TO WEBSITES TO LOOK AT YOUR TEMPLATES. THEY GO FOR THE CONTENT. 42

THE PEOPLE WHO MAINTAIN THE SITE DESERVE A GOOD USER EXPERIENCE TOO. 43

Thanks! @eaton & @karenmcgrane 44

http://www.slideshare.net	166
http://www.levidepoches.blogs.com	14
http://levidepoches.blogs.com	11
http://lanyrd.com	5
http://contentstrategy.posterous.com	3
http://static.slidesharecdn.com	2
http://luigicangiano.amplify.com	1
http://www.levidepoches.fr	1
http://facebook.slideshare.com	1
http://dailyinteractive.ca	1

Content Strategy Will Make or Break Your Process

by Karen McGrane

Accessibility

Categories

Upload Details

Usage Rights

10 Embeds 205

Statistics

Content Strategy Will Make or Break Your Process Presentation Transcript