What you don't know will hurt you: designing with and for existing content


Published on

Are you trying to make responsive design scale for a complex site? Building an app, but your organization doesn't have an API yet? If so, you've probably got legacy content—content that already exists, and that doesn't fit neatly into your new project.

What do you do? You could ignore it and end up with one of those responsive homepages that devolve into big content blobs after just one tap, or a one-off mobile site that no one can remember to maintain. You could put it off until it becomes the bane of your existence: the thing that "breaks" your design, because it's way messier than you’ve planned for.

Or, you could deal with it. If you take the time to make existing content work for you—by understanding what you've got, identifying patterns and relationships in its structure, and cutting the cruft along the way—you'll end up with a system that will not just support your content, but _enhance_ its meaning, message, and power.

Published in: Technology, Economy & Finance

What you don't know will hurt you: designing with and for existing content

  1. www.flickr.com/photos/gcfairch/4385543669/what you don’tknow will hurt youDESIGNING WITH & FOR EXISTINGCONTENTsara wachter-boettcherbdconforlando 2013
  2. www.flickr.com/photos/islaclairvaux/3457249348MOBILE
  3.  FIRST we sure are eager
  4. gotta get implementing www.flickr.com/photos/dandeluca/3083945050/
  6. free app!?
  7. I’ve been there, too.
  8. www.flickr.com/photos/cedwardmoran/3649399678 is this it?
  9. What are we doing about it?
  10. Mad Men / AMCsame old same old
  11. Robert Libetti / Business Insideror, we get out
  13. ‘‘Making something look simple iseasy; making something simple touse is much harder—especially whenthe underlying systems are complex—but that’s what we should be doing. Design Principle #4, UK Government Digital Service
  14. this is simple
  15. www.flickr.com/photos/kzirkel/8161123197/ this is not
  16. www.flickr.com/photos/kzirkel/8161123197/ 2012-13 First-year Application For Spring 2013 or Fall 2013 Enrollment APPLIC ANTLegal Name ___________________________________________________________________________________________________________________ Last/Family/Sur (Enter name exactly as it appears on official documents.) First/Given Middle (complete) Jr., etc.Preferred name, if not first name (only one) ____________________________ Former last name(s) _____________________________________________Birth Date ____________________________________________________ ć Female ć Male US Social Security Number, if any ___________________________________ mm/dd/yyyy Required for US Citizens and Permanent Residents applying for financial aid via FAFSAPreferred Telephone ć Home ć Cell Home (_______) __________________________________ Cell (_______) __________________________________ Area/Country/City Code Area/Country/City CodeE-mail Address ________________________________________________ IM Address _____________________________________________ _______Permanent home address _________________________________________________________________________________________________ _______ __ Number Street Apartment #____________________________________________________________________________________________________________________________City/Town County or Parish State/Province Country ZIP/Postal CodeIf different from above, please give your current mailing address for all admission correspondence. (from ___________ to ___________) (mm/dd/yyyy) (mm/dd/yyyy)Current mailing address __________________________________________________________________________________________________________ Number Street Apartment #____________________________________________________________________________________________________________________________City/Town County or Parish State/Province Country ZIP/Postal CodeIf your current mailing address is a boarding school, include name of school here: ______________________________________________________________ _ __ FUTURE PLANSYour answers to these questions will vary for different colleges. If the online system did not ask you to answer some of the questions you see in this section, this collegechose not to ask that question of its applicants.College ________________________________________________________Entry Term: ć Fall (Jul-Dec) ć Spring (Jan-Jun) nor is this Deadline ______________________________________________________ mm/dd/yyyy Do you intend to apply for need-based financial aid? ć Yes ć NoDecision Plan___________________________________________________ Do you intend to apply for merit-based scholarships? ć Yes ć NoAcademic Interests _____________________________________________ Do you intend to be a full-time student? ć Yes ć No
  17. www.flickr.com/photos/kzirkel/8161123197/and definitely not this
  18. content gets messywww.123rf.com
  19. Complex topicsChanging lawsYears of additionsEndless modificationsAging platforms
  20. www.123rf.com toss on somemedia queries?
  21. What we really need is somestructure.
  22. Trim, compact writingModular contentLogically broken into partsClearly labeledCleanly stored
  23. This doesn’t just happen.
  24. ‘‘Structuring content requires synthesizing aswath of sources, designing usable systems,changing organizations, training personnel,soothing egos, adjusting priorities, allayingfears, reallocating resources... This is big“S” strategy. Rachel Lovinger, “Strategy on the Inside”
  25. www.flickr.com/photos/snappa2006/2770979727it takes time
  27. If you want to get inside anorganization, get inside its content.
  28. Sub- HCLocation Section Subsection subsection Page Name IA Notes Content Notes Update Plan Prhttp://calexport.fas.harvard.edu/cgi-bin/calendar/exporter.cgi?view=monthviewcal=117046template_url=http%3A%2F%2Fwww.admissions.college.harvard.edu%2Fvisit%2Fcalendar.html Admissions Visit Harvard Visitors Center Calendar: Tours InformationTours this is offsite;Sessions be integrated into the College site? Visitors Center Calendar: Sessions Currently Information should this Calendar for when visits are happening. Keep Highttp://www.college.harvard.edu/icb/icb.do?keyword=k61161tabgroupid=icb.tabgroup84423 Academics College Academics Most subpages go offsite, except for academic multiparagraphBut should that be the case? Seems like some Long, requirements. page of content without a clear purpose. Nee Keep Highttp://college.harvard.edu/icb/icb.do College College Homepage - Page doesnt have much content unique KeepIs primarily a feedHig to it. ofhttp://events.college.harvard.edu/ Events Events Events Calendar Will this be part of our build? Current design is completely include attributes for: Event Name, Start Time/Dat Individual events different from the rest of the site and ; doesnt Hig Keep seehttp://freshmanseminars.college.harvard.edu/icb/icb.do?keyword=k61681pageid=icb.page270690 Welcome Freshman Seminars About the Program Directors WelcomeDirectors Completely different design and nav than Collegeis finePull is, but not College IA? Could likely be consolidate Content site. as into main that useful. Merge Lowhttp://freshmanseminars.college.harvard.edu/icb/icb.do?keyword=k61681pageid=icb.page270693 Freshman Seminars About the Program In the News In the News Completely different design and nav than Collegeis out Pull into(posts College IA? Delete Content site. of date main are about professors research making Midhttp://freshmanseminars.college.harvard.edu/icb/icb.do?keyword=k61681pageid=icb.page270691 Us Freshman Seminars Contact Us Contact Completely different design and nav than Collegeis straightforward and page is simple. Content site. Pull into main College IA? Keep Lowhttp://freshmanseminars.college.harvard.edu/icb/icb.do?keyword=k61681pageid=icb.page298788 Freshman Seminars For Faculty Committee For Faculty Committee Completely different design and nav than Collegeis straightforward and page is simple. Content site. Pull into main College IA? Keep Lowhttp://freshmanseminars.college.harvard.edu/icb/icb.do?keyword=k61681tabgroupid=icb.tabgroup94471 Freshman Seminars For Faculty For Faculty Completely different design and nav than Collegeis written like a letter, signedIA? the program director. Does Content site. Pull into main College by Keep Lowhttp://freshmanseminars.college.harvard.edu/icb/icb.do?keyword=k61681pageid=icb.page506998 and Faculty Feedback Freshman Seminars For Freshmen Student and Faculty Feedback Student Completely different design and nav than Collegeseems to be formatted with a different create modules layo Content site. Pull into main College IA? Split - font and custom Midhttp://freshmanseminars.college.harvard.edu/icb/icb.do?keyword=k61681tabgroupid=icb.tabgroup86241 Freshman Seminars For Freshmen Apply to Seminars Apply to Seminars - Duplicates http://freshmanseminars.college.harvard.edu/icb/icb.do? Merge with other Applicatio Midhttp://freshmanseminars.college.harvard.edu/icb/icb.do?keyword=k61681pageid=icb.page295201 a Seminar Freshman Seminars For Faculty Propose a SeminarPropose Completely different design and nav than College site. Pull into main College IA? Keep Would be nice if co Info on how to propose a seminar, eligibility, etc. Lowhttp://freshmanseminars.college.harvard.edu/icb/icb.do?keyword=k61681pageid=icb.page270197 Information for Instructors different design and nav than CollegeoffsitePull into main College IA? Keep Freshman Seminars For Faculty Helpful Information Helpful for Instructors Completely Links to site. resources and downloadable forms Lowhttp://freshmanseminars.college.harvard.edu/icb/icb.do?keyword=k61681pageid=icb.page477858 Changes/Cancellations Freshman Seminars Seminars Seminar Changes/Cancellations Seminar Completely different design and nav than College site. Pull into main College IA? Keep Lists cancelled seminars. Lowhttp://freshmanseminars.college.harvard.edu/icb/icb.do?keyword=k61681pageid=icb.page270199 Applications Freshman Seminars For Faculty Review Applications Review Completely different design and nav than Collegeof page seemsmain College IA? Rename you review app Naming site. Pull into strange since its not where Lowhttp://freshmanseminars.college.harvard.edu/icb/icb.do?keyword=k61681tabgroupid=icb.tabgroup145480 Freshman Seminars About the Program About the Program Completely different design and nav than College of contentinto main College IA? Keep Not a lot site. Pull about the program—seems to mostly talk abo Midhttp://freshmanseminars.college.harvard.edu/icb/icb.do Freshman Seminars Freshman Seminars Completely different design and nav than College site. Pull and video College IA? Keep tone of copy could be Overview content into main are very helpful - Highttp://freshmanseminars.college.harvard.edu/icb/icb.do?keyword=k61681tabgroupid=icb.tabgroup86240 Freshman Seminars Seminars Application Information Application Information Completely different design and nav than College site. Pullcontent, but the apply button is prominent, which Page has a lot of into main College IA? Keep Midhttp://freshmanseminars.college.harvard.edu/icb/icb.do?keyword=k61681tabgroupid=icb.tabgroup99155 Freshman Seminars For Freshmen For Freshmen Completely different design and nav than College site. Pull and download at the top that are quite large. Cop Page has a video into main College IA? Keep Midhttp://freshmanseminars.college.harvard.edu/icb/icb.do?keyword=k61681tabgroupid=icb.tabgroup138909 Freshman Seminars Seminars Seminars Completely different design and nav than College content isinto main College IA?freshsem.fas.harvard.edu. C Seminar site. Pull being pulled in from Keep Midhttp://freshmanseminars.college.harvard.edu/icb/icb.do?keyword=k61681pageid=icb.page556258Meeting Times and Locations Freshman Seminars Seminars Spring Meeting Times and Locations Spring Completely different design and nav than Collegeseminars and times.College IA? Keep Table of site. Pull into main Lowhttp://freshmanseminars.college.harvard.edu/icb/icb.do?keyword=k61681tabgroupid=icb.tabgroup94173Meeting Times and Locations design and nav than Collegeseminars and times.College IA? Keep Freshman Seminars Seminars Fall Seminar Meeting Times and Locations Completely different Fall Seminar Table of site. Pull into main Lowhttp://freshmanseminars.college.harvard.edu/icb/icb.do?keyword=k61681pageid=icb.page263169 Freshman Seminars For Freshmen Freshman FAQs Freshman FAQs Completely different design and nav than College site. Pull into main College IA? Keep Content of individu Would be nice to use an FAQ module for these. Lowhttp://freshmanseminars.college.harvard.edu/icb/icb.do?keyword=k61681pageid=icb.page270226 FAQs Freshman Seminars For Faculty Faculty FAQs Faculty Completely different design and nav than College site. Pull into main College IA? Keep Content of individu Would be nice to use an FAQ module for these. Lowhttp://wintersession.college.harvard.edu/icb/icb.do?keyword=winterbreakpageid=icb.page391128January Programs Wintersession Other January Programs Other The other nomenclature is not very useful:contentthanthis page is about trips students can join. Should the All Other on what? Rename Lowhttp://wintersession.college.harvard.edu/icb/icb.do?keyword=winterbreaktabgroupid=icb.tabgroup151676 Wintersession Campus Services Campus Services - Blank page - should have content and be a wayfinder for subpages Merge with student serviceLowhttp://wintersession.college.harvard.edu/icb/icb.do?keyword=winterbreaktabgroupid=icb.tabgroup151678 Wintersession Campus Services Library Hours Library Hours - Blurb just says click HERE for library calendar and sends user to th Merge with student serviceLowhttp://wintersession.college.harvard.edu/icb/icb.do?keyword=winterbreakpageid=icb.page315737 Services Wintersession Campus Services Shuttle Services Shuttle - Content could be streamlined and more concise, and send users to Merge with student serviceLowhttp://wintersession.college.harvard.edu/icb/icb.do?keyword=winterbreakpageid=icb.page315739 Locations and Hours Wintersession Campus Services Dining Locations and Hours Dining - Content could be streamlined and more concise. Merge with student serviceLowhttp://wintersession.college.harvard.edu/icb/icb.do Wintersession Wintersession Homepage Same design as College pages, but navigation changes completely. This site content explaining Wintersessi Content hierarchy is strange—basic is not easily available from Mid Keep thehttp://wintersession.college.harvard.edu/icb/icb.do?keyword=winterbreaktabgroupid=icb.tabgroup158438 Wintersession On-Campus Housing On-Campus Housing - Content is clear and well organized. LinkKeep to https://starrez.fas.harva Lowhttp://wintersession.college.harvard.edu/icb/icb.do?keyword=winterbreakpageid=icb.page385332 Wintersession For Faculty For Faculty Content talks about Presidents January Innovation Fund, but does Keep Lowhttp://wintersession.college.harvard.edu/icb/icb.do?keyword=winterbreaktabgroupid=icb.tabgroup158475 Wintersession 2013 Wintersession Programs 2013 Wintersession Programs Calendar of Wintersession events seems to be pulled in from a Google calendar—is warmth. Would beLow Lead-in content is sparse—could use some this right? Keep grehttp://wintersession.college.harvard.edu/icb/icb.do?keyword=winterbreakpageid=icb.page305618 Wintersession Frequently Asked Questions Frequently Asked Questions of different FAQs on the site. Could Light editing for into structured modules moretagged tolanguage. Mid Lots these be made voice/tone and clearer, and concise appear in FA Keephttp://wintersession.college.harvard.edu/icb/icb.do?keyword=winterbreakpageid=icb.page477831 with Alumni Wintersession Connect with Alumni Connect - Long page but doesnt need to be updated until next year. Keep Lowhttp://wintersession.college.harvard.edu/icb/icb.do?keyword=winterbreakpageid=icb.page315736 Wintersession Campus Services Library Hours Gym Hours - No content and page is set up as subpage of library. student service Merge with Lowhttp://wintersession.college.harvard.edu/icb/icb.do?keyword=winterbreakpageid=icb.page563620 Alumni Book Talks Wintersession Faculty Alumni Book Talks Faculty - No content on the page. Should pages like this exist without conten Keep Low the contenthttp://wintersession.college.harvard.edu/icb/icb.do?keyword=winterbreaktabgroupid=icb.tabgroup151677 Wintersession 2013 WintersessionSubmit an Activity Submit an Activity Programs Sends user offsite to login-only Wintersession activities portal Offsite - login page Keep Lowhttp://wintersession.college.harvard.edu/icb/icb.do?keyword=winterbreakpageid=icb.page478659 Travel Tools Wintersession Harvard Travel Tools Harvard Unclear at first what this page is for. Copy has typos and could use Keep Lowhttp://admissions.college.harvard.edu/about/beyond/arts.html Admissions About Harvard Beyond the Classroom Arts The - Content is good, but could use a tone refresh and more breakdown Keep Midhttp://admissions.college.harvard.edu/about/beyond/athletics.html Admissions About Harvard Beyond the ClassroomAthletics - Content is good, direct tone, clear. Keep Midhttp://admissions.college.harvard.edu/about/beyond/research.html Admissions About Harvard Beyond the ClassroomResearch - Content is high quality and broken down Keep nicely—very clear. Could uMidhttp://admissions.college.harvard.edu/about/beyond/index.html Admissions About Harvard Beyond the ClassroomBeyond the Classroom - Content is lengthier than needed for a page used to drive visitors in Keep Hig audithttp://admissions.college.harvard.edu/about/beyond/community.html Admissions About Harvard Beyond the ClassroomCommunity Outreach - Content is light and could use more specifics and details. Keep Midhttp://admissions.college.harvard.edu/about/beyond/cultural.html Admissions About Harvard Beyond the ClassroomCultural Ethnic Activities. - Content is light and could use more specifics and details. Keep Midhttp://admissions.college.harvard.edu/about/beyond/politics.html Admissions About Harvard Beyond the ClassroomGovernment Politics - Content is passive and impersonal but informative. Keep Midhttp://admissions.college.harvard.edu/about/beyond/studyabroad.html Beyond the Classroom Abroad Admissions About Harvard Study - Content is passive and impersonal but informative. Keep Midhttp://admissions.college.harvard.edu/about/beyond/clubs.html Admissions About Harvard Beyond the ClassroomStudent Clubs Activities- Intro content is passive and could use a refresh to be direct and Mid Keep enhttp://admissions.college.harvard.edu/about/beyond/environmental.html Beyond the Classroom Admissions About Harvard Sustainability. Environmental Action, and Research - Intro content is passive and could use a refresh to be direct and Mid Keep enhttp://admissions.college.harvard.edu/about/beyond/rotc.html Admissions About Harvard Beyond the ClassroomROTC - Intro content is passive and could use a refresh to be direct and Mid Keep en
  29. ‘‘A mind-numbingly detailed odysseythrough your web site. Jeffrey Veen, Adaptive Path, 2002
  32. FROM 70kTO 3k PAGES
  33. WHAT DO YOU HAVE?✦ Quantity✦ Location✦ Topics
  34. DOES IT FIT YOUR STRATEGY?✦ Useful for users✦ Drives business goals✦ Supports your brand
  35. IS IT ANY GOOD?✦ Up to date✦ Well written✦ Organized✦ Accessible
  36. www.flickr.com/photos/stevendepolo/5190591885 redundant outdated trivial
  37. www.flickr.com/photos/atomicjeep/22208897/meaningless
  38. the SHORT-TERM win:Designing for—and supporting—onlythe content that actually matters meansless time on content migration.(Oh, and less crap for users, too.)
  39. the LONG-TERM win:This opens up conversations aboutpriorities, roles, and responsibilitieswell before launch—rather thanwaiting until it’s too late.
  41. ‘‘Instead of creating [layouts] from theedges in, create them from the contentout. For example, derive columns of a gridfrom elements of your content. Mark Boulton, .net
  42. infinite designers?
  43. so...which content?www.flickr.com/photos/tdd/4493216417
  44. www.flickr.com/photos/28478778@N05/5728474385/ representative content
  45. Representative contentis a set that includes one example ofeach content type you need to support.
  46. Representative contentis your new bicycle.
  47. CONTENT TYPES✦ Based on patterns in content’s shape, purpose, and “chunks.”✦ Categorize like content (services, bios, people, events, etc.)✦ Can be more or less granular, depending on your scope.
  48. CONTENT REQUIREMENTS✦ Define which attributes a content type needs.✦ Set formats, character limits, and optional fields.✦ Define what you’ll have to work with—and design for.
  49. the SHORT-TERM win:Content works with your templates,rather than rotting in generic pages.Priorities and calls to action stayintact.
  50. the LONG-TERM win:When every content type clearlysupports strategy, you’re less likely toend up with content you don’t need.
  52. ‘‘Fitting a complex, multi-level navigationonto small screens is difficult no matterwhat way you slice it. Brad Frost, “Complex Navigation Patterns for Responsive Design”
  53. Structured content can help you.
  54. more interconnection, less nav
  55. CONTENT MODEL✦ Defines a system of content.✦ Establishes relationships between content types.✦ Defines shared attributes.
  56. METADATA✦ Provides additional information about content (e.g. its topic or when it was authored).✦ Can be exposed, but the real magic is behind the scenes.
  57. RULE-BASED LAYOUTS✦ Rules use metadata to decide how and where to display content✦ Can control combinations of content modules, related items, excerpts, prioritization, etc.
  58. Allows for facetedsearch.
  59. Makes related contentactually relevant.
  60. the SHORT-TERM win:Content is easier to access in rangeof natural, useful ways—withouthaving to lay out every damn page.
  61. the LONG-TERM win:When content is a system thatsupports the business, it’s not tied tojust one destination.Plus, people collaborate—rather thanpost whatever, wherever.
  63. let’s get selfishwww.flickr.com/photos/clanlife/4948367381
  64. www.flickr.com/photos/pedrosimoes7/190673196/you work hard, right?
  65. this looksnothing like the comps!
  66. Don’t let broken contentbreak you.
  67. look, really look
  68. they’re all relying on uswww.123rf.com
  69. thank you, ORLANDO! sarawb.com // @sara_ann_marie Content Everywhere is available now: http://rfld.me/content-everywhereFlickr images used via CC-Attribution license unless otherwise noted.Illustrations used with the permission of Eva-Lotta Lamm.