Many UX designers have a blind spot when it comes to creating useful, usable content. If our goal is a great experience for users, then UX designers need to go beyond creating page templates and interaction models and focus on content strategy.
This workshop used the familiar UX design process to talk about how content strategy contributes to activities and deliverables.
12. 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
13. 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
9
14. 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
9
15. 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.
10
16. 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
10
17. 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
11
18. 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
11
32. IMAGINE DEBRIEF
ENVISION LAUNCH
DEFINE DESIGN DEVELOP DEPLOY
Dubberly Design Office, How Do You Design? 21
33. ENGAGE IMAGINE DEBRIEF
DISCOVER ENVISION LAUNCH
DEFINE DESIGN DEVELOP DEPLOY
Dubberly Design Office, How Do You Design? 21
34. ENGAGE IMAGINE DEBRIEF ENHANCE
DISCOVER ENVISION LAUNCH MAINTAIN
DEFINE DESIGN DEVELOP DEPLOY
Dubberly Design Office, How Do You Design? 21
35. ENGAGE IMAGINE DEBRIEF ENHANCE
DISCOVER ENVISION LAUNCH MAINTAIN
DEFINE DESIGN DEVELOP DEPLOY
ANALYZE
PLAN
Dubberly Design Office, How Do You Design? 21
36. ENGAGE IMAGINE DEBRIEF ENHANCE
DISCOVER ENVISION LAUNCH MAINTAIN
DEFINE DESIGN DEVELOP DEPLOY
ANALYZE EVALUATE
PLAN TEST
Dubberly Design Office, How Do You Design? 21
37. ENGAGE IMAGINE DEBRIEF ENHANCE
DISCOVER ENVISION LAUNCH MAINTAIN
DEFINE DESIGN DEVELOP DEPLOY
INCEPTION ELABORATION CONSTRUCTION TRANSITION
ANALYZE EVALUATE
PLAN TEST
Dubberly Design Office, How Do You Design? 21
38. CONTENT?
ENGAGE IMAGINE DEBRIEF ENHANCE
DISCOVER ENVISION LAUNCH MAINTAIN
DEFINE DESIGN DEVELOP DEPLOY
INCEPTION ELABORATION CONSTRUCTION TRANSITION
ANALYZE EVALUATE
PLAN TEST
Dubberly Design Office, How Do You Design? 21
39. CONTENT!
ENGAGE IMAGINE DEBRIEF ENHANCE
DISCOVER ENVISION LAUNCH MAINTAIN
DEFINE DESIGN DEVELOP DEPLOY
INCEPTION ELABORATION CONSTRUCTION TRANSITION
ANALYZE EVALUATE
PLAN TEST
Dubberly Design Office, How Do You Design? 21
41. • What are my business objectives?
• What do my users want to do?
• What does my brand stand for?
STRATEGY
22
42. • What are my business objectives?
• What do my users want to do?
• What does my brand stand for?
DE
SIG
N
STRATEGY
• How will users interact with it?
• How will it be structured?
• What will it look like?
22
43. • What are my business objectives?
• What do my users want to do?
• What does my brand stand for?
DE
SIG
N
STRATEGY
• How will users interact with it?
• How will it be structured?
• What will it look like?
TECHNOLOGY
• How will we build it?
• Who will maintain it?
22
44. • What are my business objectives?
• What do my users want to do?
• What does my brand stand for?
DE E NT
SIG
N O NT
C
STRATEGY
• How will users interact with it? • What do we want to say?
• How will it be structured? • Where will we get the content?
• What will it look like? • Who will maintain it?
TECHNOLOGY
• How will we build it?
• Who will maintain it?
22
55. DEFINE DESIGN DEVELOP DEPLOY
PLAN
PROJECT ACTIVITIES CONTENT STRATEGY ACTIVITIES
_Business Strategy
_Brand Strategy
_Personas + Scenarios Content strategy
_Competitive Analysis can contribute to all
of these activities.
_Web Analytics
_Technical Assessment
_Creative/UX Brief
27
56. BUSINESS STRATEGY
_ Content strategy isn’t
What business about creating content
are we in?
“just because you can.”
_ It’s about aligning a
publishing model with
ENGAGEMENT COMPETENCY business goals.
_ Understanding how
content aligns with
business goals is the
“strategy” part of
Who are our ALIGNMENT How do we content strategy.
constituents? create value?
Marigo Raftopoulous,
Business Strategy Fundamentals 28
57. BRAND STRATEGY
Content strategy ensures
POSITIONING
that brand strategy carries
through to:
VISION
_Messaging
MISSION
_Tone of voice
_Content creation
_Content style guide
29
58. PERSONAS +
SCENARIOS
_ Personas document the
user’s information needs.
_ Content strategy goes
“the last mile” to make
sure we actually deliver
that information.
Steve Mulder and Ziv Yaar,
The User is Always Right 30
59. PERSONAS +
SCENARIOS
_ Personas document the
user’s information needs.
_ Content strategy goes
Learn more about the “the last mile” to make
home-buying process, sure we actually deliver
including jargon, that information.
realtors, mortgages,
insurance, and how to
evaluate houses.
Steve Mulder and Ziv Yaar,
The User is Always Right 30
60. COMPETITIVE
ANALYSIS
Competitive audits tend to
answer the following:
_What features do our
competitors offer?
_How are their sites
architected and designed?
Content strategy can
answer:
_What messages do they
communicate?
_How good is the content?
31
61. WEB ANALYTICS
Use analytics data to
inform:
_Content inventories
_Content audits
Search engine data is quite
useful in developing:
_Naming/Labeling systems
_SEO-friendly content
32
62. TECH ASSESSMENT
_ CMS evaluations in
particular tend to focus
on features and technical
architecture.
_ Content strategy looks at
the CMS like a user,
evaluating interfaces and
task flow.
cmsmatrix.org 33
63. CREATIVE/UX BRIEF
The brief summarizes the
project inputs and defines
the “vision” for the site.
Be sure content is
reflected:
_How content helps meet
business goals and user
needs
_How tone of voice and
messaging supports brand
strategy
_Who will own and
maintain content
BBH
via The Planning Lab 34
64. EXERCISE 1A:
USER NEEDS
_ Review the sample user persona and scenario on Page 3 of your
handout.
_ Write down a list of user needs on the worksheet on Page 2.
_ What does this user need or expect to find when he does his research?
35
65. EXERCISE 1B:
BUSINESS GOALS
_ Review the sample case study on Page 5 of your handout.
_ Write down a list of business goals on the worksheet on Page 4.
_ What does this company expect to achieve by putting information on
the web?
36
66. OUR TIME TOGETHER
MODULE 1: PLANNING 9:30–10:30
Exercise 1: User Needs and Business Goals
Break 10:30–11:00
MODULE 2: ANALYSIS 11:00–12:30
Exercise 2: Content Inventory and Audit
Lunch 12:30–2:00
MODULE 3: CREATION 2:00–3:30
Exercise 3: Messaging and Content Annotations
Break 3:30–4:00
MODULE 4: RESEARCH + TESTING 4:00–5:30
Exercise 4: User Interviews
37
68. DEFINE DESIGN DEVELOP DEPLOY
PLAN ANALYZE
PROJECT ACTIVITIES CONTENT STRATEGY ACTIVITIES
_Requirements _Content inventory
_Page inventory _Content audit
_Sitemap _Gap analysis
_Data model _Sourcing plan
39
69. CONTENT COMES
FIRST!
_ Content inventory
informs the page
inventory and sitemap
_ Content gap analysis and
sourcing plan are
analogous to the
functional requirements
40
70. GIANT
SPREADSHEET FTW!
Separate activities,
evolving document:
_Content inventory:
Quantitative list of all the
content on the site
_Content audit: Subjective
assessment of quality
_Gap analysis: What’s
missing that you need?
_Sourcing plan: Who, how
and where you’re going to
get new content
41
71. CONTENT INVENTORY
WHAT CONTENT DO YOU HAVE?
Look at (all) the pages of the site
Make choices about what content to evaluate:
_How deep do you need to go?
_How do you ensure you see examples of all the different content types?
_What are common pathways that users are likely to take?
_Can you find content that has been lost or hidden?
Assume this will be a living document you use throughout your process
72. EXERCISE 2A:
CONTENT INVENTORY
_ Go to http://www.cisco.com/
_ Inventory the content related to business collaboration and
videoconferencing
_ Make choices about what to evaluate and how to document it
_ A sample spreadsheet has been provided to get you started
43
73. EXERCISE 2A:
WRAP-UP
Why do a content inventory? When is it useful?
_To understand the story the site is trying to tell
_To get a sense of the range of pages that need to be designed
_To determine the range of content types the site will support
_To decide what content to eliminate or migrate
When is a content inventory unnecessary? Why not do this?
_You can learn 80% of what you need to know by sampling representative
content
_When the site is too large for a full inventory
_Consider automated tools to index the site
44
74. AUTOMATED INVENTORIES
Use tools to gather information Benefits of Automated Tools
_Power Mapper _When you just need a page count
_SiteOrbiter (for Macs) _Helps find “lost” pages
_HTTrack (For PCs) _Useful when scanning thousands
of similar pages (products, articles)
Get help from the CMS team
_Output data or metadata from the Limitations of Automated Tools
CMS _May only index to a certain depth
_Results may not be organized in a
meaningful way
_You don’t get firsthand insights
about the content
45
75. CONTENT QUALITY
HOW GOOD IS THE CONTENT?
Ask yourself:
_Do you have all the content that needs to be there?
_Is the content up-to-date? Are the examples presented fresh?
_Is it communicating clearly?
_Is the content relevant to its intended audience?
_Is the tone and style appropriate for your goals and reader? Is it
appropriate for your brand?
_Is it meeting your business needs?
There is no overall definition of content quality—only quality within your
business and user context.
46
76. EXERCISE 2B:
CONTENT AUDIT
_ Working off the inventory you just completed, assess the quality of this
content
_ Make decisions about how to assess “quality.” What evaluation criteria
will you use?
_ How will you document your findings? What columns would you add to
your spreadsheet?
_ How will you persuade your stakeholders that your findings are valid?
47
77. EXERCISE 2B:
WRAP-UP
Why do this?
_To determine what content needs to be eliminated or updated
_To evaluate if content is meeting business and user needs
_To establish an editorial calendar and messaging strategy
_To create a sustainable content strategy that can be supported by your
staff
_To set guidelines for tone and style
48
78. OUR TIME TOGETHER
MODULE 1: PLANNING 9:30–10:30
Exercise 1: User Needs and Business Goals
Break 10:30–11:00
MODULE 2: ANALYSIS 11:00–12:30
Exercise 2: Content Inventory and Audit
Lunch 12:30–2:00
MODULE 3: CREATION 2:00–3:30
Exercise 3: Messaging and Content Annotations
Break 3:30–4:00
MODULE 4: RESEARCH + TESTING 4:00–5:30
Exercise 4: User Interviews
49
81. SCHEMATICS +
WIREFRAMES
728x90
Leaderboard Content strategy partners
Home About Us Contact Us Newsletter Change the World
WOW Header
(includes time and temp and women)
find something... Search
with information
men • art • money • fashion • sex • careers • politics • beauty • friends • gossip • age • travel • business • health • love architecture to answer:
Conversation | Today 9:39 am
Welcome back, Mamacita!
Growing Up, I Was Bored
'Quite Often' ... Today,
Nobody Is Bored
Let’s talk about the way kids grow up
Edit your profile
Update your picture
Read your horoscope
_Where will we get all the
today versus the way we grew up.
with Lesley Stahl, Liz Smith and Mary
Wells and 37 readers
Check your weather
ADVERTISEMENT
content to fill each region
Question | Today 8:00 am
What lasting effect did the
murder of Dr. Martin Luther
Fiction | Thursday April 3
She Lied About Her Age of the page?
King, Jr. have on this country? Posts | Thursday April 3
_Who will provide and
Gypsy’s Personal Guide 336x280
Large Rectangle
to Doctors, Drivers,
Taxis, Shippers and
Helicopters in the Med
with Lesley Stahl, Liz Smith and Mary
Wells and 37 readers
Question | Weekday Month ##
"South Pacific" returns to
Broadway — what musical
comedy from your or your
maintain that content?
parent's youth still
_How will “related” items
resonates with you today?
Poll | Friday April 4
Do You Earn More than Your Conversation | Weekday Month ##
A Secret to Success:
Mate? 'Make Every Boss's
Yes
No
What Mate?
Problem Your Problem'
Posts | Weekday Month ##
Come Walk With Me:
be associated?
Remembering Dr.
_What happens if we have
See 107 votes and
Vote 37 comments Martin Luther King, Jr. 300x600
Half Page
more or less content for a
Mother Earth Care-
toons
What the Hell
Happened to Lara
wOw on FOX
Business Network
How to Become A
Millionaire ... If You
Meg Whitman on
What's Next After
given section?
Flynn Boyle? Aren't Born Rich eBay
Talk To Us
52
Hinweis der Redaktion
To determine what web initiatives would create the biggest impact, we completed an assessment project with three components:
A Market Overview to determine competitor best practices and industry benchmarks
Analytics of current site usage
Usability Audit of the site with philosophy's target demographic performing tasks on the site
During the design phase we continued with usability research, testing and optimizing the design.
Finally we followed up with a post launch analysis to see how we did and provide further recommendations.
Any content that doesn’t meet these needs is just getting in the way.
Avoid wasting money on designing, creating and maintaining unnecessary content.
Any content that doesn’t meet these needs is just getting in the way.
Avoid wasting money on designing, creating and maintaining unnecessary content.
Any content that doesn’t meet these needs is just getting in the way.
Avoid wasting money on designing, creating and maintaining unnecessary content.
Any content that doesn’t meet these needs is just getting in the way.
Avoid wasting money on designing, creating and maintaining unnecessary content.
Any content that doesn’t meet these needs is just getting in the way.
Avoid wasting money on designing, creating and maintaining unnecessary content.
Any content that doesn’t meet these needs is just getting in the way.
Avoid wasting money on designing, creating and maintaining unnecessary content.
Any content that doesn’t meet these needs is just getting in the way.
Avoid wasting money on designing, creating and maintaining unnecessary content.
Any content that doesn’t meet these needs is just getting in the way.
Avoid wasting money on designing, creating and maintaining unnecessary content.