Embed Size (px)
Citation preview
Hi!I’m Karen McGrane
from Bond Art + Science
@karenmcgrane
1
2Concept ruthlessly stolen from Heather Champ @hchampVia Flickr User swirlspice under a Creative Commons License
3
4
CONTENT?
INFORMATION ARCHITECTURE VISUAL
DESIGN
INTERACTION DESIGN
5
WHY CONTENT STRATEGY?WHY NOW?
6
7
FROM TOStatic Dynamic
Centralized Decentralized
Walled Social
Costly Cheap
Geeky Mainstream
MARKETING TECHNOLOGY
USER EXPERIENCE
8
CONTENTSTRATEGY
Content Management
Social MediaMarketing
InformationArchitecture
NAMING A PAIN POINT.
10
DEFINING A PROCESS.
11
12
13
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
15
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
16
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
17
18
THE CONTENT STRATEGY PROCESS
1. THINK BEYOND THE TEMPLATE.
19
20
Name: Ron BuckleyAge: 47Family: Married, 2 children Job: ManufacturingHome: Port Washington, NY Income: $55,000/yearTravel: 2-3 times per month
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 from the list of room types, and is prompted to enter his stay dates, which he does. From the room detail page, he clicks “Reserve” to book a room, enters his guest information and rewards number. When he prints out his confirmation to conclude his transaction, he notes it took him less than five minutes to complete.
21
Boutique sites deliver on style preferences for travelers in-the-know
Next-generation sites innovate to provide an easier-to-use interface
Travel booking engines aggressively promote air + hotel deals
Well-known chains inspire loyalty through brand experience and rewards
22
23
24
We opted to go live with the existing content.
25
Buy-in for that decision stretched to the highest levels of the organization.
26
We knew the content sucked. We just believed there was
nothing we could do about it.
27
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.
28http://www.flickr.com/photos/schoppa/3148751414
7000 pages.45 people.Six weeks.5400+ hours.
29
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 TO THINK PAST TEMPLATES
30
_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.
31
32http://www.flickr.com/photos/carlaarena/3188139819/
33
DON’T LET THIS BE THE FATE OF YOUR WEB CONTENT
http://www.getittogetherinc.net/images/storage%20before.JPG
34From Flickr User 2493™
37Mythbusters, Polishing a Turd
38
HOW TO EVALUATE QUALITY
39
_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 THE FUTURE.
40
41
42
TRUNCATION IS NOT A CONTENT STRATEGY
44
BLOBS vs. CHUNKS
47
48
CONTENT
INTRANET
SOCIAL MEDIA
MICROSITES
MOBILE WEBWEBSITE
TABLET APPS
MOBILE APPS
BLOGS
49
INTRANET
SOCIAL MEDIA
MICROSITES
MOBILE WEBWEBSITE
TABLET APPS
MOBILE APPS
BLOGS
50
WEB
INTRANET
SOCIAL MEDIA
MICROSITES
MOBILE WEBWEBSITE
TABLET APPS
MOBILE APPS
BLOGS
51
MOBILE
INTRANET
SOCIAL MEDIA
MICROSITES
MOBILE WEBWEBSITE
TABLET APPS
MOBILE APPS
BLOGS
52
CONTENT
INTRANET
SOCIAL MEDIA
MICROSITES
MOBILE WEBWEBSITE
TABLET APPS
MOBILE APPS
BLOGS
53
Metadata is the new art direction.
Ethan Resnick, @studip101
MAKE IT FUTURE-FRIENDLY _We can’t afford to think about writing content for any one platform.
_If we’re going to be able to create tailored designs for different platforms, we need a reusable, structured store of content to work from.
_Designers need to understand how pages get constructed using metadata and business rules.
_What might seem constraining actually gives us more flexibility in the future.
54
FIRST:
YOU WILL ADVOCATE FOR CONTENT.
SECOND:
YOU WILL PARTNER WITH A CONTENT STRATEGIST.
THIRD:
YOU WILL PLAN FOR THE FUTURE OF CONTENT.
