Embed Size (px)
Citation preview
CONTENT STRATEGYFOR THE WEBIceWeb 2010
Hi!I’m Karen McGrane
from Bond Art + Science
@karenmcgrane
2
3Concept ruthlessly stolen from Heather Champ @hchampVia Flickr User swirlspice under a Creative Commons License
4
5
CONTENT?
INFORMATION ARCHITECTURE VISUAL
DESIGN
INTERACTION DESIGN
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, 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.
8
— Joe Pulizzi
”
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
10
Michael Davis, Chief Creative Officer at TabletHotels
Our content is our advertising.
“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.
—Brian Solis
11
We pretty much know what we want to say.
12
Our marketing intern is handling the content.
Kristina Halvorson, Brain Traffic
Copywriting just isn’t that big of a deal.
We can figure the content out later.
We already have most of the content.
13
CONSIDER THE MASTHEAD
Publishers and Content Strategy from Jeffrey MacIntyre
WritersCopy editorsArt directors Production staffVarious editors Managing editorEditor in chiefAd salesThe Publisher
Publishing is complex.
14
topics are we going to cover?formats are we going to use? (Blogs, video, charts…)
does anyone care?does this provide business value?
are we doing to deliver the message?should we say it? (Tone of voice…)
will we get the content?can we syndicate the content? (Feeds, social media…)
will this be published?will it need to be updated?
is responsible for this content?will maintain it over time?
Why
How
Where
When
Who
What
1. EVERYONE’S A PUBLISHER2. CONTENT (MIS)MANAGEMENT3. ACTION, NOT AWARENESS
15
16http://www.flickr.com/photos/carlaarena/3188139819/
17
DON’T LET THIS BE THE FATE OF YOUR WEB CONTENT
http://www.getittogetherinc.net/images/storage%20before.JPG
1. EVERYONE’S A PUBLISHER2. CONTENT (MIS)MANAGEMENT3. ACTION, NOT AWARENESS
18
“The essence of the Web is action. We go to the Web because we have a task; there is something we need to do; there is a problem we need to solve.
What helps us do? What helps us act?
19
— GERRY MCGOVERN”
THE ANSWER TO “WHY?” IS AN ACTION
20
21
Our goal is to be seen as a resource.
We should have a blog.
Twitter!
We plan to create a series of
educational articles.
It would be cool if we posted some videos
on YouTube.
22
JUST BECAUSE YOU CANDOESN’T MEAN YOU SHOULD
Here I told a little story about clients figuring out that the name of their problem is “information architecture.”
I didn’t think it needed a funny picture.
NAMING A PAIN POINT.
24
DEFINING A PROCESS.
25
26
27
Test, Measure, and Optimize
Requirements IA Design Development
Creative Design
Design QA
Insight
Current Site AuditStakeholder &
User InterviewsCompetitive &
Market Research
Vision
Usability TestingPaper Prototype & Creative Comps
Post Launch Analytics Report
En
gin
eerin
gH
TML
Ex
pe
rie
nc
e D
es
ign
Usa
bili
tyP
rod
uct
Ma
rket
ing
User Experience Design Process: Critical Path
Meetingcoordinated byProgramManagement
UE Team memberassigned toprojectattends meeting
Takes input fromall members asrelated to UIdesign
Receives RequirementsDocument
Needs:List of teammembers,contact info, initialschedule,approval process(people)
Prod. Mktg. feeds teamany results from Marke tResearch
Functionality/Conceptual modeltesting with earlyprototypes
Discussion with engineeringabout any potential newtechnology and its impact onschedule and desired usertasks
Design teambrainstorms, iteratesand collaborates onvisual representationof functionality andscreen designsWork can begin whileuser flow a n dfunctionality isiterating
Visual Designexploration,copy writte nand finetuned
Design works wi thUsability to provideprototype andguidance of whatpriorities ofdiscovery shoul dbe - i.e. businessconstraints,technicalconstraints,optional versions totest
Design teampresentswireframes a n dmockups toproduction with fullset of style specs[font size & color,line spacing,colors, images,links, etc]
ExperienceDesign teamreview Visualdirection
Detailed Producttesting - both forfunctionality andspecific content andvisual design
Product Team meets -Design meeting withProduct Marketing,Engineering, andUsability to reviewrecommendations
Refine Visualdirection, copy,user instructions,help and UIcomponents asnecessary
Final functionality &visual design signoff- Production- Engineering- QA- Partner (if applicable)- Usability- Creative Director- Product Marketing- VP (as necessary)
Production receivesapproved mockupsand works wi thDesign on productarea as needed
Production buildssite and featuresworking wi t hEngineering asapplicable
Engineering informsDesign if there arechanges, issues w i thplanned functionality
Product Team meets -Hand off toproduction,engineering andoperations mode ofthe product cycle
Project Initiation
Prod. Marketing does P&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
Feasability Studies / FieldResearchWhat do Users wantHow do they want to do it(Usability Conceptual Phase)
UE Team member assignedto project
KickoffMeeting
Initial conceptbrainstorms withProduct Marketing tocollect and gatherrequirements andunderstandcompetitive landscape
Initial Design Cyc le
Engineering mightbegin codingwork from initialfunctionalityspecs
Initial exposure toscope of design andfunctionality
Assess techn i c a llimitations andalternatives
Create DesignSpec/CreativeBrie fMaterial is fromMRP/PRD andbrainstorming notesand otherrequirements, distillsinfo, looks atcompetitivelandscape, rev iewsscope in context ofnetwork and sit eprecedence
UE Teambrainstorm withUsability - led byproject teammember
what's the bestscenario fo rusers
Early functionalitydesigns anddefinitions ofpages needed fordevelopedfunctionality
Rapid prototype forproof of conceptand early testing w/usability
Could be paperprototype, functionalstatic HTML, Flashinteraction,Mockups/Wireframes asimage maps
User Ed developsuser education plan
Design works wi thUser Education tobegin any Help andFAQs and otherinstructional textand all errormessages
Design takesrecommendedchanges and inputfrom Team -including ProductMarketing,Engineering, Exp.Design Team andUsability Research
Revises user fl o wand works thro u g hgreater detail ofindividual screens
Product Team meets -Design presents functionaluser flow, potential userscenarios and high levelscreens need e dApproval cycle here
Product Team meets -Reviewrecommendations fromtesting
Expert advice onprevious research a n dnew research need e d(Usability 2nd Phase)
Design Iteration / Testing / Iteration / Early Refinement
Project isinititated by ProductMarketing withProgramManagement
feedback cyc l e
feedback cyc l e
Revises user fl o wand worksthrough greaterdetail of individualscreens
Product Team meets -Review revisions
iteration cycle
iteration cycle
Refinement / Copy / Final Visual Design / Robust Testing
iteration cycle
iteration cycle
Production Build / Reviews / Design Team Sign Offs
Product TeamApproval cycle here
User Ed. delivers allHelp text andassociate dscreenshots a n dspecs toProduction
Credits: Erin Malone: Designed for AltaVista November 10, 2000
29
An ExampleProduct / Software / Web Design Process Guide
L E G E N D MILESTONEDELIVERABLE IDEA REVIEW CHECKPOINT
KEY MEETING INFORM
discover definition refinement development
I T E R A T I OI T E R A T I O N S
business owners
productmanager
ui/id/iadesign
visualdesign
user research
production
Deliverable:
ConceptDocument
and / or
ConceptPrototype
Deliverable:
ProposalDocument
this stepmay be
optional
Deliverables:
ProductRequirements
Document(PRD)
(authored by a
Product Manager)
and
Concept Design
Materials(authored by
blended design
team)
Deliverable:
Templates &
Navigation(authored by
UI / ID / IA Design)
concept approval
PRDapproval
UI designapproval
committedschedule
proposal approval and schedulingconceptual design review
Communicate business needs & brand identity
Gather supporting market research, etc.
Provide input for level of effort
Gather information for and create theProposal Document
Develop strategic rationale, business case, financial analysis, policy considerations,implementation plans.
Brand Positioning
Collect team input
Write Draft PRD and Review
Project kickoff
Visual design explorations
UCD research cont'd. (i.e. paper prototyping,participatory design, field studies, surveys,etc.
Research: Solicit input from Business owners/brands - contact other associated stakeholders(legal, customer support, international)
Refine design concepts
Develop navigation model and refine scenarios
Review Promotional & Marketing Needs
Product Roadmap
Point release plan
Refined Visual design explorations
Competitive usability testing Prototype usability test
Wireframes and navigation maps
UI Design Approval
Product prototype, e.g. paper, HTML, director, or flash
Business developm
Mockups to marke
Promotion plan
Art direction
Prototype testing
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.
Concept Design Review
Provide input for level of effort
Provide input for level of effort
Provide input for level of effort
Define personas, usage scenarios, usergoals, and perform task analysis
Review user feedback on previous productUI's and analyze competitive products.
Define personas, usage scenarios, usergoals, and perform task analysis.
Not
e: In
som
e co
mpa
nie
s th
ese
role
s ar
e en
com
pass
ed b
y on
e pe
rson{
Not
e: In
som
e co
mpa
nie
s th
ese
role
s ar
e b
len
ded
into
on
e or
tw
o pe
ople
. i.e
. ui m
ay d
o us
er r
esea
rch
or
visu
al d
esig
ner
s m
ay d
o ia
, etc
.
{
concept
start
Communicate business needs & brand identity
Gather information for andcreate the Concept Document
Describe problem or needs,proposed solution, and benefits.
Develop usage scenariosand/or design concepts
Leads brainstorming
Idea
RO
LE
SPHASESMILESTONES
30
C O N F I D E N T I A LCopyright © TSDesign 1998-9
digital sketches online styleguideHTML interface files
TSDesign Analysis FrameworkSM
1 Delivery of User Benefits
2 Transaction Flow
3 Navigation & Hierarchy
4 Visual Language
Design Analysis
PHASE 1 PHASE 2 PHASE 3
Design Solutions
description:• an expert design analysis from the user’s perspective
benefits:• benchmarks the effectiveness of your site based upon stated
business objectives for the site and your users
• analyzes the design of the site to find out if the benefits of use
are actually being delivered
• recommends methods for substantially improving your users
experiences and meeting future business objectives
description:• By collecting and reviewing print, other tangible artifacts and
Web sites your company creates and disseminates, and
corporate standards (if they exist) we can then distill the basis
for the visual language to be developed that is consistent with
the company's identity and product brands. This work is
continued in the Visual Systems Design phase.
TSDesign User Experience AuditSM
User Personae & Profiling ModuleSM
(UP&P)
Product Strategy and Product Design Strategy Blueprint*
Visual Identity SystemsIdentity and Visual Language Audit
description:• define ‘what the product should be’ and ‘how it
should work’
benefits:• the achievement of clearly articulated, agreed-
upon and aligned mission, core competencies,
corporate goals, and objectives for the site
• the articulation and understanding of your users,
their needs and and your business objectives for
establishing and extending relationships
with each one
• the definition of the organizational resources
required to build and maintain the site
• the creation of a detailed blueprint for design or redesign:
- site organization (footprint)- useful and usable features and functions
for the users- descriptions of intended functionality- messaging strategy
• the receipt of a phased implementation plan with associated costs
Interaction DesignTechnology ConsultingTechnology Audit Information Architecture Interface Design Production
description:• create seamless and consistent transaction flow• define widgets and technologies to best support
the features and functionality
description:• works with client to determine best technology to
implement the product that aligns with client's technology strategy
• creates and evaluates technical RFP's• interfaces between design and technical teams
description:• define site hierarchy• define navigation scheme• define hierarchy of information on pages• identifies content workflow and organizational
responsibilities and resources
description:• using the components, defined in the Visual Systems
Design Phase, create design styles for each page-typeneeded to support interaction, navigation and hierarchy
• apply these design styles to page schematics
description:• create sample HTML files to illustrate page layout
and design styles• deliver and present documentation• Interface QA / training
description:• establish, with the client, a shared
understanding and common language for
visual design and how it effectively
communicates the brand
• define a visual language for the site
- logo, logotype systems- typography- grid system- color palette- imagery style and usage
benefits:• provides the visual language components
with which to build the interface
persona
+ in
terview
s
competitive and comparative analysis
user profiles
user profiles
corporate missioncore competenciescorporate goalsculture and valuesskills and methodologiesknowledge capital and experiencepeople, processes & technologystakeholders and initiativesenterprise-wide challengesInternet objectivescustomers and userscompetitive landscape
user, feature, objective matrix
new footprint and reclustered contentnew ideas
visual language research
The intended value the organization
delivers to users and customers through its site.
The sequence of questions, prompts, and results
that make up a task.
The degree to which a site affords the user to easily
navigate the environment and efficiently locate rele-
vant content.
The representation and support of the identity,
brand and information architecture through
visual elements and overall style.
schematic drawing
Intentional User Experience table
2 investigate 3 define users 4 qualify features
usability testing
T S D E S I G N M E T H O D O L O G Y
design for
Intentional
User ExperiencesSM
5 innovate
1 understand
6 refine 7 describe
Product Strategy Blueprint/Functional Description
Audit comments:• Users arriving at the front page of the
site may not understand what information is there for them.
• 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.
* workbooks not shown
scope or
rescope
relationship
usability testing
speculate &
innovate
•
existing
and new
technology
experience brief:
strategy story
and positioning
innovate
Design Implementation
site mapsprocess overviews
innovate
Discount Usability
description:• testing to discover usability problems to provide
information to team to help detect and resolve transaction flow and navigation and techinal problems
page schematics & content development
31
32
THE CONTENT STRATEGY PROCESS
1. THINK BEYOND THE TEMPLATE.
33
This page was redacted so I don’t get yelled at by 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. It looks pretty much like every other persona you’ve ever seen. So just imagine one of those.
This page showed a competitive audit. If you want to recreate the experience for yourself, go click around to some other websites and write down a few comments about whether they’re any good or not.
This here is a series of moodboards that show an approach to creating a design system, including photography, color palettes, and typography.
Sigh. Okay, this page shows some sketching exercises we did.
Except apparently no one on the team could figure out how to operate a pen, so somehow “sketches” wound up meaning “wireframes made with wavy lines and handwritten fonts.”
I’m embarrassed just admitting that. Can we go back to talking about how your content sucks?
This page showed a wireframe.
The lines were all straight and the font was Arial.
Master of my craft, here.
We opted to go live with the existing content.
39
Buy-in for that decision stretched to the highest levels of the organization.
40
We knew the content sucked. We just believed there was
nothing we could do about it.
41
Within an hour, the angry calls started. Client received hundreds of angry calls from hotels the first day.
Complaint call volume held steady over the next week as people called back to check on status.
The client team was unprepared to make quick changes to the content, and their slow response just added fuel to the fire.
Site had to be rolled back to the previous version while they came up with a plan to update the content.
42http://www.flickr.com/photos/schoppa/3148751414
7000 pages.45 people.Six weeks.5400+ hours.
43
The upside is that the second launch was very successful.
Still, I can't say that I'd choose to do it that way again.
HOW?
44
HOW TO THINK PAST TEMPLATES
45
_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.
1. THINK BEYOND THE TEMPLATE.2. EVALUATE CONTENT QUALITY.
46
47From Flickr User 2493™
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.
48Dan Brown, Letter to a Content Strategist
51Mythbusters, Polishing a Turd
This page showed a video. You’re not going to be able to see it on Slideshare, so I took it out.
It contained the phrase “fecal matter,” which to me is more offensive than saying “sh*tstorm.”
52
53From Flickr User 2493™
HOW?
54
HOW TO EVALUATE QUALITY
55
_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.
1. THINK BEYOND THE TEMPLATE.2. EVALUATE CONTENT QUALITY.3. PLAN FOR CONTENT CREATION.
56
57
WRITERS ARE LIKE DEVELOPERS.THEY WORK BETTER WITH DIRECTION.
58
Logo About Us Sign UpBrowse Our Sites Login SupportFeatures
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.
Find out more about:Feature Name | Feature Name | Feature Name | Feature Name | Feature Name | Feature Name
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.
59
Logo About Us Sign UpBrowse Our Sites Login SupportFeatures
Feature NamePUT 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.
Find out more about:Feature Name | Feature Name | Feature Name | Feature Name | Feature Name | Feature Name
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.
60
HOW?
61
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
1. THINK BEYOND THE TEMPLATE.2. EVALUATE CONTENT QUALITY.3. PLAN FOR CONTENT CREATION.4. DON’T FEAR NEW ROLES.
63
Extra super bonusfourth thing!
64
65
66
I don’t get why we need a content strategist.
Writers can make spreadsheets.
67
Any backend developer should be
able to crank out some HTML. HTML is easy.
We don't need a project manager. The
developers should be able to manage themselves.
Why do we even need different roles for interaction and
visual design?
Here I went off on a little rant about roles on projects.
FIRST:
YOU WILL ADVOCATE FOR CONTENT.
SECOND:
YOU WILL USE YOUR NEWCONTENT STRATEGY TOOLS.
THIRD:
YOU WILL PARTNER WITH A CONTENT STRATEGIST.
