Content Strategy: The Missing Piece of the UX Puzzle

Download Content Strategy: The Missing Piece of the UX Puzzle

Post on 15-Apr-2017




0 download

Embed Size (px)


<ul><li><p>Welcome!</p><p>1@karenmcgrane</p></li><li><p>2</p></li><li><p>3</p></li><li><p>4</p></li><li><p>5</p></li><li><p>6</p></li><li><p>7</p><p>what about </p><p>the art?</p></li><li><p>8</p></li><li><p>9</p></li><li><p>10</p><p>when do we see the art?</p></li><li><p>12</p></li><li><p>13</p><p>WHERE IS THE ART?</p></li><li><p>14</p></li><li><p>15</p></li><li><p>16</p><p>DISASTER STRIKES!</p></li><li><p>17</p></li><li><p>18</p></li><li><p>19</p></li><li><p>20</p></li><li><p>21</p><p>YOU WOULDNT BUILDA GALLERY THIS WAY.</p></li><li><p>WHY WOULD YOU BUILD A WEBSITE THIS WAY?</p><p>22</p></li><li><p>23</p><p>TWO BIG PROBLEMS</p></li><li><p>Organizations invest tremendous resources on developing the framework for a great user experience fabulous design, robust content management infrastructure.</p><p>Yet when it comes to the content itself, there's often a gap.</p><p>The end result is that the value proposition for customers can't be delivered because the content is insufficient, inadequate, and inappropriate.</p><p>24</p><p> RAHEL BAILIE</p></li><li><p>We pretty much know what we want to say.</p><p>25</p><p>Our marketing team is handling the content. </p><p>Kristina Halvorson, Brain Traffic</p><p>Copywriting just isnt that big of a deal.</p><p>We can figure the content out later.</p><p>We already have most of the content.</p></li><li><p>27Melissa Rach, Brain Traffic</p><p>Here be dragons</p></li><li><p>28</p><p>1.11 Features Detail 4 of 9</p><p>Codename Logo About Us Sign UpBrowse Our Sites Login SupportFeatures</p><p>Feature NameDuis 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.</p><p>Find out more about:Feature Name | Feature Name | Feature Name | Feature Name | Feature Name | Feature Name</p><p>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. </p><p>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. </p><p>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. </p><p>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. </p></li><li><p>ITS TIME TO GIVE CONTENT THE ATTENTION IT DESERVES.</p><p>29</p></li><li><p>OUR TIME TOGETHERWhats Content Strategy?</p><p>Why Content Strategy?</p><p>How Does One Do Content Strategy?Exercise 1: Product StrategyExercise 2: Content PlanningExercise 3: Content AuditExercise 4: Content Modeling</p><p>30</p></li><li><p>WHAT WE TALK ABOUT WHEN WE TALK ABOUT CONTENT</p></li><li><p>TEXT</p><p>32</p></li><li><p>33</p><p>IMAGES</p></li><li><p>AUDIO</p><p>34</p></li><li><p>35</p><p>VIDEO</p></li><li><p>36</p><p>DATA VISUALIZATION</p></li><li><p>37</p><p>BLOGS</p></li><li><p>COMMENTS</p><p>38</p></li><li><p>via Margot Bloomstein 39</p><p>ERROR MESSAGES</p></li><li><p>CONTENT IS DATA + METADATAData is the core part of the contentFor example: a photographic image</p><p>Metadata is information about the contentFor example: </p><p>Title: Laduree PastriesDescription: We wanted to eat them all!Tags: macaron, macaroon, Laduree, Paris, France, Champs-lysesCreated by: Robert StribleyTaken on: November 21, 2009Taken with: Nikon D200Usage Rights: (c) All rights reservedSource URL:</p><p>40</p><p></p></li><li><p>Photo by zandperl 41</p><p>CONTENT IS THE REASON PEOPLE GO TO YOUR SITE.</p><p></p></li><li><p>Content Strategy plans for the creation, publication, and governance of useful, usable content.Content strategy helps you understand not only what content needs to be created and published, but why.</p><p>42</p><p> KRISTINA HALVORSON</p></li><li><p>WHY CONTENT STRATEGY?WHY NOW? </p></li><li><p>1. CONTENT (MIS)MANAGEMENT2. EVERYONES A PUBLISHER3. UX HAS EXPANDED</p><p>44</p></li><li><p>45</p></li><li><p>46</p><p>DONT LET THIS BE THE FATE OF YOUR WEB CONTENT</p><p></p></li><li><p>1. CONTENT (MIS)MANAGEMENT2. EVERYONES A PUBLISHER3. UX HAS EXPANDED</p><p>47</p></li><li><p>All companies, no matter what the size, must start to think more like publishers than ever before. Consumer behavior has changed drastically over the past few years. Customers are more accepting of content from non-media sites and the barriers to publishing are now non-existent. </p><p>48</p><p> JOE PULIZZI</p></li><li><p>49</p><p>Is Nike a sneaker company, or is it a media company? </p><p>If you go on their site, you may opt for the latter.</p><p>Harris Millard, President and COO at MediaLink</p></li><li><p>50</p><p>CONSIDER THE MASTHEAD</p><p>Publishers and Content Strategy from Jeffrey MacIntyre</p><p>WritersCopy editorsArt directors Production staffVarious editors Managing editorEditor in chiefAd salesThe Publisher</p><p>Publishing is complex.</p></li><li><p>We plan to create a series of </p><p>educational articles.</p><p>51</p><p>Our goal is to be seen as a resource.</p><p>We should be on Twitter.</p><p>Twitter!</p></li><li><p>52</p><p>ITS NOT JUST THE CONTENT.</p><p>ITS ALSO THE STRATEGY.</p></li><li><p>One of the greatest challenges I encounter today is not the willingness of a brand to engage, but its ability to create. When blueprinting a social media strategy, enthusiasm and support typically derails when examining the resources and commitment required to produce regular content.</p><p>Brian Solis</p><p>53</p></li><li><p>54</p><p>JUST BECAUSE YOU CANDOESNT MEAN YOU SHOULD</p></li><li><p>1. CONTENT (MIS)MANAGEMENT2. EVERYONES A PUBLISHER3. UX HAS EXPANDED</p><p>55</p></li><li><p>56</p><p>But I already do this and I call myself... Information architect</p><p>Web editorContent managerInformation designerTechnical writerProducerCopywriter</p></li><li><p>57</p><p>THIS ISNT A JOB TITLE LANDGRAB.</p><p>ITS ABOUT THE WORK THAT NEEDS TO GET DONE.</p></li><li><p>58</p></li><li><p>59</p></li><li><p>Test, Measure, and Optimize</p><p>Design Process</p><p>Requirements IA Design Development</p><p>Creative Design</p><p>Design QA</p><p>Insight</p><p>Current Site AuditStakeholder &amp; </p><p>User InterviewsCompetitive &amp; </p><p>Market Research</p><p>Vision</p><p>Usability TestingPaper Prototype &amp; Creative Comps</p><p>Post Launch Analytics Report</p></li><li><p>En</p><p>gin</p><p>eerin</p><p>gH</p><p>TML</p><p>Ex</p><p>pe</p><p>rie</p><p>nc</p><p>e D</p><p>es</p><p>ign</p><p>Usa</p><p>bili</p><p>tyP</p><p>rod</p><p>uct</p><p> Ma</p><p>rket</p><p>ing</p><p> User Experience Design Process: Critical Path</p><p>Meetingcoordinated byProgramManagement</p><p>UE Team memberassigned toprojectattends meeting</p><p>Takes input fromall members asrelated to UIdesign</p><p>Receives RequirementsDocument</p><p>Needs:List of teammembers,contact info, initialschedule,approval process(people)</p><p>Prod. Mktg. feeds teamany results from Marke tResearch</p><p>Functionality/Conceptual modeltesting with earlyprototypes</p><p>Discussion with engineeringabout any potential newtechnology and its impact onschedule and desired usertasks</p><p>Design teambrainstorms, iteratesand collaborates onvisual representationof functionality andscreen designsWork can begin whileuser flow a n dfunctionality isiterating</p><p>Visual Designexploration,copy writte nand finetuned</p><p>Design works wi thUsability to provideprototype andguidance of whatpriorities ofdiscovery shoul dbe - i.e. businessconstraints,technicalconstraints,optional versions totest</p><p>Design teampresentswireframes a n dmockups toproduction with fullset of style specs[font size &amp; color,line spacing,colors, images,links, etc]</p><p>ExperienceDesign teamreview Visualdirection</p><p>Detailed Producttesting - both forfunctionality andspecific content andvisual design</p><p>Product Team meets -Design meeting withProduct Marketing,Engineering, andUsability to reviewrecommendations</p><p>Refine Visualdirection, copy,user instructions,help and UIcomponents asnecessary</p><p>Final functionality &amp;visual design signoff- Production- Engineering- QA- Partner (if applicable)- Usability- Creative Director- Product Marketing- VP (as necessary)</p><p>Production receivesapproved mockupsand works wi thDesign on productarea as needed</p><p>Production buildssite and featuresworking wi t hEngineering asapplicable</p><p>Engineering informsDesign if there arechanges, issues w i thplanned functionality</p><p>Product Team meets -Hand off toproduction,engineering andoperations mode ofthe product cycle</p><p>Project Initiation</p><p>Prod. Marketing does P&amp;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</p><p>Feasability Studies / FieldResearchWhat do Users wantHow do they want to do it(Usability Conceptual Phase)</p><p>UE Team member assignedto project</p><p>KickoffMeeting</p><p>Initial conceptbrainstorms withProduct Marketing tocollect and gatherrequirements andunderstandcompetitive landscape</p><p>Initial Design Cyc le</p><p>Engineering mightbegin codingwork from initialfunctionalityspecs</p><p>Initial exposure toscope of design andfunctionality</p><p>Assess techn i c a llimitations andalternatives</p><p>Create DesignSpec/CreativeBrie fMaterial is fromMRP/PRD andbrainstorming notesand otherrequirements, distillsinfo, looks atcompetitivelandscape, rev iewsscope in context ofnetwork and sit eprecedence</p><p>UE Teambrainstorm withUsability - led byproject teammember</p><p>what's the bestscenario fo rusers</p><p>Early functionalitydesigns anddefinitions ofpages needed fordevelopedfunctionality</p><p>Rapid prototype forproof of conceptand early testing w/usability</p><p>Could be paperprototype, functionalstatic HTML, Flashinteraction,Mockups/Wireframes asimage maps</p><p>User Ed developsuser education plan</p><p>Design works wi thUser Education tobegin any Help andFAQs and otherinstructional textand all errormessages</p><p>Design takesrecommendedchanges and inputfrom Team -including ProductMarketing,Engineering, Exp.Design Team andUsability Research</p><p>Revises user fl o wand works thro u g hgreater detail ofindividual screens</p><p>Product Team meets -Design presents functionaluser flow, potential userscenarios and high levelscreens need e dApproval cycle here</p><p>Product Team meets -Reviewrecommendations fromtesting</p><p>Expert advice onprevious research a n dnew research need e d(Usability 2nd Phase)</p><p>Design Iteration / Testing / Iteration / Early Refinement</p><p>Project isinititated by ProductMarketing withProgramManagement</p><p>feedback cyc l e</p><p>feedback cyc l e</p><p>Revises user fl o wand worksthrough greaterdetail of individualscreens</p><p>Product Team meets -Review revisions</p><p>iteration cycle</p><p>iteration cycle</p><p>Refinement / Copy / Final Visual Design / Robust Testing</p><p>iteration cycle</p><p>iteration cycle</p><p>Production Build / Reviews / Design Team Sign Offs</p><p>Product TeamApproval cycle here</p><p>User Ed. delivers allHelp text andassociate dscreenshots a n dspecs toProduction</p><p>Credits: Erin Malone: Designed for AltaVista November 10, 2000</p><p>61</p></li><li><p>C O N F I D E N T I A L</p><p>Copyright TSDesign 1998-9</p><p>digital sketches online styleguideHTML interface files</p><p>TSDesign Analysis FrameworkSM</p><p>1 Delivery of User Benefits</p><p>2 Transaction Flow</p><p>3 Navigation &amp; Hierarchy</p><p>4 Visual Language</p><p>Design Analysis</p><p>PHASE 1 PHASE 2 PHASE 3</p><p>Design Solutions</p><p>description: an expert design analysis from the users perspective</p><p>benefits: benchmarks the effectiveness of your site based upon stated </p><p>business objectives for the site and your users</p><p> analyzes the design of the site to find out if the benefits of use </p><p>are actually being delivered</p><p> recommends methods for substantially improving your users </p><p>experiences and meeting future business objectives</p><p>description: By collecting and reviewing print, other tangible artifacts and </p><p>Web sites your company creates and disseminates, and </p><p>corporate standards (if they exist) we can then distill the basis </p><p>for the visual language to be developed that is consistent with </p><p>the company's identity and product brands. This work is </p><p>continued in the Visual Systems Design phase.</p><p>TSDesign User Experience AuditSM</p><p>User Personae &amp; Profiling ModuleSM</p><p>(UP&amp;P)</p><p>Product Strategy and Product Design Strategy Blueprint*</p><p>Visual Identity SystemsIdentity and Visual Language Audit</p><p>description: define what the product should be and how it </p><p>should work</p><p>benefits: the achievement of clearly articulated, agreed-</p><p>upon and aligned mission, core competencies, </p><p>corporate goals, and objectives for the site</p><p> the articulation and understanding of your users, </p><p>their needs and and your business objectives for </p><p>establishing and extending relationships </p><p>with each one</p><p> the definition of the organizational resources </p><p>required to build and maintain the site</p><p> the creation of a detailed blueprint for design or </p><p>redesign:</p><p>- site organization (footprint)</p><p>- useful and usable features and functions</p><p>for the users</p><p>- descriptions of intended functionality</p><p>- messaging strategy</p><p> the receipt of a phased implementation plan with </p><p>associated costs</p><p>Interaction DesignTechnology ConsultingTechnology Audit Information Architecture Interface Design Production</p><p>description: create seamless and consistent transaction flow</p><p> define widgets and technologies to best support </p><p>the features and functionality</p><p>description: works with client to determine best technology to </p><p>implement the product that aligns with client's </p><p>technology strategy</p><p> creates and evaluates technical RFP's</p><p> interfaces between design and technical teams</p><p>description: define site hierarchy</p><p> define navigation scheme</p><p> define hierarchy of information on pages</p><p> identifies content workflow and organizational </p><p>responsibilities and resources</p><p>description: using the components, defined in the Visual Systems </p><p>Design Phase, create design styles for each page-typeneeded to support interaction, navigation and hierarchy </p><p> apply these design styles to page schematics</p><p>description: create sample HTML files to illustrate page layout </p><p>and design styles deliver and present documentation</p><p> Interface QA / training</p><p>description: establish, with the client, a shared </p><p>understanding and common language for </p><p>visual design and how it effectively </p><p>communicates the brand</p><p> define a visual language for the site</p><p>- logo, logotype systems</p><p>- typography</p><p>- grid system</p><p>- color palette</p><p>- imagery style and usage</p><p>benefits: provides the visual language components </p><p>with which to build the interface</p><p>persona</p><p>+ in</p><p>terv</p><p>iew</p><p>s</p><p>competitive and comparative analysis</p><p>user profiles</p><p>user profiles</p><p>corporate missioncore competenciescorporate goalsculture and valuesskills and methodologiesknowledge capital and experiencepeople, processes &amp; technologystakeholders and initiativesenterprise-wide challengesInternet objectivescustomers and userscompetitive landscape</p><p>user, feature, objective matrix</p><p>new footprint and reclustered contentnew ideas</p><p>visual language research</p><p>The intended value the organization </p><p>delivers to users and customers through its site.</p><p>The sequence of questions, prompts, and results</p><p>that make up a task.</p><p>The degree to which a site affords the user to easily</p><p>navigate the environment and efficiently locate rele-</p><p>vant content.</p><p>The representation and support of the identity,</p><p>brand and information architecture through </p><p>visual elements and overall style.</p><p>schematic drawing</p><p>Intentional User Experience table</p><p>2 investigate 3 define users 4 qualify features</p><p>usability testing</p><p>T S D E S I G N M E T H O D O L O G Y</p><p>design for</p><p>IntentionalUser ExperiencesSM</p><p>5 innovate</p><p>1 understand</p><p>6 refine 7 describeProduct Strategy Blueprint/Functional Description</p><p>Audit comments: Users arriving at the front page of the </p><p>site may not understand what information </p><p>is there for them. </p><p> The names of the sections do not give </p><p>users a path to follow to find the informa-</p><p>tion they need. </p><p> No specific path has been established for </p><p>each user type. Users must use their best </p><p>judgement to find the inform...</p></li></ul>