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

www.ﬂickr.com/photos/gcfairch/4385543669/

what you don’t
know will hurt you
DESIGNING WITH & FOR EXISTING
CONTENT

sara wachter-
boettcher
bdconf
orlando 2013

www.ﬂickr.com/photos/islaclairvaux/3457249348

MOBILE

FIRST

we sure
are eager

gotta get
implementing
www.ﬂickr.com/photos/dandeluca/3083945050/

www.ﬂickr.com/photos/cedwardmoran/3649399678

is this it?

Mad Men / AMC

same old
same old

Robert Libetti / Business Insider

or, we
get out

‘‘
Making something look simple is
easy; making something simple to
use is much harder—especially when
the underlying systems are complex
—but that’s what we should be doing.
Design Principle #4,
UK Government Digital Service

www.ﬂickr.com/photos/kzirkel/8161123197/

this is not

2012-13 First-year Application
For Spring 2013 or Fall 2013 Enrollment

APPLIC ANT
Legal Name ___________________________________________________________________________________________________________________
Last/Family/Sur (Enter name exactly as it appears on official documents.) First/Given Middle (complete) Jr., etc.

Preferred name, if not ﬁrst 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 FAFSA

Preferred Telephone ć Home ć Cell Home (_______) __________________________________ Cell (_______) __________________________________
Area/Country/City Code Area/Country/City Code

E-mail Address ________________________________________________ IM Address _____________________________________________
_______

Permanent home address _________________________________________________________________________________________________
_______
__
Number Street Apartment #

____________________________________________________________________________________________________________________________
City/Town County or Parish State/Province Country ZIP/Postal Code

If 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 Code
If your current mailing address is a boarding school, include name of school here: ______________________________________________________________
_ __

FUTURE PLANS
Your 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 college
chose 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 ﬁnancial aid? ć Yes ć No
Decision Plan___________________________________________________ Do you intend to apply for merit-based scholarships? ć Yes ć No
Academic Interests _____________________________________________ Do you intend to be a full-time student? ć Yes ć No


and deﬁnitely
not this

content gets
messy

www.123rf.com

Complex topics
Changing laws
Years of additions
Endless modiﬁcations
Aging platforms

www.123rf.com

toss on some
media queries?

What we really need is some
structure.

Trim, compact writing
Modular content
Logically broken into parts
Clearly labeled
Cleanly stored

‘‘
Structuring content requires synthesizing a
swath of sources, designing usable systems,
changing organizations, training personnel,
soothing egos, adjusting priorities, allaying
fears, reallocating resources... This is big
“S” strategy.
Rachel Lovinger,
“Strategy on the Inside”

www.ﬂickr.com/photos/snappa2006/2770979727

it takes time

If you want to get inside an
organization, get inside its content.

Sub- HC
Location Section Subsection subsection Page Name IA Notes Content Notes Update Plan Pr
http://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 Visitor's Center Calendar: Tours InformationTours this is offsite;Sessions be integrated into the College site?
Visitor's Center Calendar: Sessions
Currently Information should this Calendar for when visits are happening. Keep Hig
http://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 Hig
http://college.harvard.edu/icb/icb.do
College College Homepage - Page doesn't have much content unique KeepIs primarily a feedHig
to it. of
http://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 ; doesn't Hig
Keep see
http://freshmanseminars.college.harvard.edu/icb/icb.do?keyword=k61681pageid=icb.page270690 Welcome
Freshman Seminars About the Program Director's WelcomeDirector's 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 Low
http://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 Mid
http://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 Low
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 Low
http://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 Low
http://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 Mid
Freshman Seminars For Freshmen Apply to Seminars Apply to Seminars - Duplicates http://freshmanseminars.college.harvard.edu/icb/icb.do?
Merge with other Applicatio
Mid
http://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. Low
http://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 Low
http://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. Low
http://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 it's not where Low
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 Mid
http://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 - Hig
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 Mid
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 Mid
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 Mid
http://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 Low
http://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 Low
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. Low
http://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. Low
http://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 Low
http://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 serviceLow
Wintersession Campus Services Library Hours Library Hours - Blurb just says click HERE for library calendar and sends user to th
http://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
http://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.
http://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 the
Wintersession On-Campus Housing On-Campus Housing - Content is clear and well organized. LinkKeep
to https://starrez.fas.harva
Low
http://wintersession.college.harvard.edu/icb/icb.do?keyword=winterbreakpageid=icb.page385332
Wintersession For Faculty For Faculty Content talks about President's January Innovation Fund, but does
Keep Low
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 gre
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
Keep
http://wintersession.college.harvard.edu/icb/icb.do?keyword=winterbreakpageid=icb.page477831 with Alumni
Wintersession Connect with Alumni Connect - Long page but doesn't need to be updated until next year.
Keep Low
Wintersession Campus Services Library Hours Gym Hours - No content and page is set up as subpage of library. student service
Merge with Low
http://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 content
Wintersession 2013 WintersessionSubmit an Activity Submit an Activity
Programs Sends user offsite to login-only Wintersession activities portal
Offsite - login page Keep Low
http://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 Low
http://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 Mid
http://admissions.college.harvard.edu/about/beyond/athletics.html
Admissions About Harvard Beyond the ClassroomAthletics - Content is good, direct tone, clear. Keep Mid
http://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 uMid
http://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

audit
http://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 Mid
http://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 Mid
http://admissions.college.harvard.edu/about/beyond/politics.html
Admissions About Harvard Beyond the ClassroomGovernment Politics - Content is passive and impersonal but informative.
Keep Mid
http://admissions.college.harvard.edu/about/beyond/studyabroad.html Beyond the Classroom Abroad
Admissions About Harvard Study - Content is passive and impersonal but informative.
Keep Mid
http://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 en
http://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 en
http://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

‘‘
A mind-numbingly detailed odyssey
through your web site.
Jeffrey Veen, Adaptive Path, 2002

3 REASONS TO
GET TO KNOW
YOUR CONTENT

1 LESS CRAP, NOT
SHOEHORNED CRAP

FROM
70k
TO 3k PAGES

WHAT DO YOU HAVE?
✦ Quantity
✦ Location
✦ Topics

DOES IT FIT YOUR STRATEGY?
✦ Useful for users
✦ Drives business goals
✦ Supports your brand

IS IT ANY GOOD?
✦ Up to date
✦ Well written
✦ Organized
✦ Accessible

www.ﬂickr.com/photos/stevendepolo/5190591885

redundant
outdated
trivial

www.ﬂickr.com/photos/atomicjeep/22208897/

meaningless

the SHORT-TERM win:
Designing for—and supporting—only
the content that actually matters means
less time on content migration.
(Oh, and less crap for users, too.)

the LONG-TERM win:
This opens up conversations about
priorities, roles, and responsibilities
well before launch—rather than
waiting until it’s too late.

2 REPRESENTATIVE
CONTENT

‘‘
Instead of creating [layouts] from the
edges in, create them from the content
out. For example, derive columns of a grid
from elements of your content.
Mark Boulton, .net

so...which
content?

www.ﬂickr.com/photos/tdd/4493216417

www.ﬂickr.com/photos/28478778@N05/5728474385/

representative
content

Representative content
is a set that includes one example of
each content type you need to support.

Representative content
is your new bicycle.

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.

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.

the SHORT-TERM win:
Content works with your templates,
rather than rotting in generic pages.
Priorities and calls to action stay
intact.

the LONG-TERM win:
When every content type clearly
supports strategy, you’re less likely to
end up with content you don’t need.

3 RELY ON SYSTEMS,
NOT JUST PAGES

‘‘
Fitting a complex, multi-level navigation
onto small screens is difﬁcult no matter
what way you slice it.
Brad Frost, “Complex Navigation Patterns for
Responsive Design”

Structured content can help you.

more interconnection,
less nav

CONTENT MODEL
✦ Deﬁnes a system of content.
✦ Establishes relationships between
content types.
✦ Deﬁnes shared attributes.

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.

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.

Makes related content
actually relevant.

the SHORT-TERM win:
Content is easier to access in range
of natural, useful ways—without
having to lay out every damn page.

the LONG-TERM win:
When content is a system that
supports the business, it’s not tied to
just one destination.
Plus, people collaborate—rather than
post whatever, wherever.

let’s get
selﬁsh

www.ﬂickr.com/photos/clanlife/4948367381

www.ﬂickr.com/photos/pedrosimoes7/190673196/

you work
hard, right?

this looks
nothing like the
comps!

Don’t let broken content
break you.

they’re all
relying on us
www.123rf.com

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

Recommended

Recommended

More Related Content

What's hot

What's hot (17)

Viewers also liked

Viewers also liked (17)

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

Similar to What you don't know will hurt you: designing with and for existing content (20)

More from Sara Wachter-Boettcher

More from Sara Wachter-Boettcher (20)

Recently uploaded

Recently uploaded (20)

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