This document discusses various problems that can occur when developing digital content and launching websites or projects. It describes common issues like having to sort through messy or incomplete content at the last minute, receiving angry customer calls due to poor quality content, and not allocating enough time to properly create and edit content. The document advocates reframing how content is approached by speaking up about quality issues, testing with worst case examples, researching user needs, and documenting decisions. Overall it aims to encourage allocating sufficient time for content creation and treating it as more than just a "black box" process.

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

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

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

5. THE 11 HOUR SH*TSTORM PROBLEM
TH
5

6. THE DAY 2 PROBLEM
6

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

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

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

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
10

11. 11

12. 12

13. We opted to go live
with the existing content.
13

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

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

16. http://www.flickr.com/photos/schoppa/3148751414 16

17. Within an hour, the angry calls started. Client received
hundreds of angry calls from franchisees the first day.
http://www.flickr.com/photos/schoppa/3148751414 16

18. Within an hour, the angry calls started. Client received
hundreds of angry calls from franchisees the first day.
Complaint call volume held steady over the next week
as people called back to check on status.
http://www.flickr.com/photos/schoppa/3148751414 16

19. Within an hour, the angry calls started. Client received
hundreds of angry calls from franchisees 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.
http://www.flickr.com/photos/schoppa/3148751414 16

20. Within an hour, the angry calls started. Client received
hundreds of angry calls from franchisees 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.
http://www.flickr.com/photos/schoppa/3148751414 16

21. 17

22. 7000 pages.
17

23. 7000 pages.
45 people.
17

24. 7000 pages.
45 people.
Six weeks.
17

25. 7000 pages.
45 people.
Six weeks.
5400+ hours.
17

26. 7000 pages.
45 people.
Six weeks.
5400+ hours.
17

27. 7000 pages. The upside is that the second
45 people. launch was very successful.
Six weeks. Still, I can't say that I'd choose to
do it that way again.
5400+ hours.
17

28. REFRAME THE CONVERSATION
18

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

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

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

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

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

34. 20

35. 21

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

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

38. 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
23

39. 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.
24

40. 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
24

41. 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
Profiling 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 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.
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
benefits:
• provides the visual language components
with which to build the interface
25

42. 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
25

43. THEN A MIRACLE OCCURS
26

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

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

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

47. 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.
30

48. 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.
31

49. 32

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

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

52. 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.
32

53. 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.
32

54. 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.
32

55. REFRAME THE CONVERSATION
33

56. REFRAME THE CONVERSATION
1. Emphasize the real goal: not new navigation
buckets, but better information for site visitors.
33

57. REFRAME THE CONVERSATION
1. Emphasize the real goal: not new navigation
buckets, but better information for site visitors.
2. Challenge the schedule: content before design!
33

58. REFRAME THE CONVERSATION
1. Emphasize the real goal: not new navigation
buckets, but better information for site visitors.
2. Challenge the schedule: content before design!
3. Don’t just try to persuade: start planning, writing,
and editing.
33

59. REFRAME THE CONVERSATION
1. Emphasize the real goal: not new navigation
buckets, but better information for site visitors.
2. Challenge the schedule: content before design!
3. Don’t just try to persuade: start planning, writing,
and editing.
4. Demand to see real content in designs so you can
see the missing pieces.
33

60. WE DON’T SYNC UP THE FRONT-
END DISPLAY WITH THE CMS.
AND WE DON’T THINK ABOUT
THE ADMIN EXPERIENCE.
34

61. Publisher.com Go
ADVERTISEMENT
Article Title Goes Here
Joe Bloggs, January 10, 2010
Lorem ipsum dolor sit amet, 300x250 Great! We
Medium Rectangle
consectetuer adipiscing elit, sed
diam nonummy nibh euismod
Love it!
tincidunt ut laoreet dolore magna
aliquam erat volutpat. Ut wisi
enim ad minim veniam, quis Related Articles
nostrud exerci tation ullamcorper • Article Title Goes Here
suscipit lobortis nisl ut aliquip ex • Article Title Goes Here
ea commodo consequat. Duis autem vel eum iriure dolor in • Article Title Goes Here
hendrerit in vulputate velit esse molestie consequat, vel illum • Article Title Goes Here
dolore eu feugiat nulla facilisis at vero eros et accumsan et • Article Title Goes Here
iusto odio dignissim qui blandit praesent luptatum zzril delenit • Article Title Goes Here
augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor
sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet.
35

62. Publisher.com CMS Oh, no.
We need a
Title Publish!
subhead, and a dek,
Save as Draft...
Author Publish on... and pull quotes,
Image Browse Categories and...
! Topic Category
Body ! Topic Category
! Topic Category
! Topic Category
! Topic Category
! Topic Category
! Topic Category
!
!
Topic Category
Topic Category
Okay. But where
!
!
Topic Category
Topic Category
are those going to
go in the design?
36

63. Recipes Galore Go
Style
Holiday
Seasonal
This makes
International Breakfast Brunch Lunch it easier for busy
Kid-Friendly
moms to make
Time to Make dinner!
30 minutes
45 minutes
60 minutes Dinner Snacks Drinks
Hours&Hours
Cost
Under $10
37

64. Recipe Management All you have to
Save
do is assign this
Recipe Title
metadata to every
Holiday Cuisine Season Categories
! Topic Category ! Topic Category ! Topic Category ! Topic Category
single recipe.
! Topic Category ! Topic Category ! Topic Category ! Topic Category
! Topic Category ! Topic Category ! Topic Category ! Topic Category
! Topic Category ! Topic Category ! Topic Category ! Topic Category
! Topic Category ! Topic Category ! Topic Category ! Topic Category
! Topic Category ! Topic Category ! Topic Category ! Topic Category
! Topic Category ! Topic Category ! Topic Category ! Topic Category
! Topic Category ! Topic Category ! Topic Category ! Topic Category
! Topic Category ! Topic Category ! Topic Category ! Topic Category
! Topic Category ! Topic Category ! Topic Category ! Topic Category
! Topic Category ! Topic Category ! Topic Category ! Topic Category
NOOOOO!!!!
38

70. REFRAME THE CONVERSATION
43

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

72. 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
43

73. 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
43

74. 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
43

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

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

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

78. Thanks!
@karenmcgrane
47