Avoiding the 11th Hour Sh*storm at SxSW

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

HOW’D WE GET HERE?

6

NAMING A PAIN POINT.

7

DEFINING A PROCESS.

8

9

10

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

12

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




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

13

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

14

15

THE CONTENT STRATEGY PROCESS

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.

17

18

THE 11TH HOUR SH*TSTORM PROBLEM

WHY ARE WE TALKING ABOUT THIS NOW?

19

MARKETING TECHNOLOGY

USER EXPERIENCE

20

CONTENTSTRATEGY

Content Management

Social MediaMarketing

InformationArchitecture

1. EVERYONE’S A PUBLISHER2. EVERYONE’S A PUBLISHER3. ACTION, NOT AWARENESS

21

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

22

— Joe Pulizzi

”

23

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

24

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

25

We pretty much know what we want to say.

26

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.

27

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.

28

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

29

30http://www.flickr.com/photos/carlaarena/3188139819/

31

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

32

“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?

33

— GERRY MCGOVERN”

THE ANSWER TO “WHY?” IS AN ACTION

34

35

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.

36

FROM TOStatic Dynamic

Centralized Decentralized

Walled Social

Costly Cheap

Geeky Mainstream

AVOIDING THE 11TH HOUR SH*TSTORM

37

1. THINK BEYOND THE TEMPLATE.

38

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.

44

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

45

We knew the content sucked. We just believed there was

nothing we could do about it.

46

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.

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

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

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

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

48

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?

49

HOW TO THINK PAST TEMPLATES

50

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

51

52From Flickr User 2493™

http://www.flickr.com/photos/2493/2252942368/

http://www.flickr.com/photos/2493/2252942368/

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.

53Dan Brown, Letter to a Content Strategist

http://blog.greenonions.com/2010/06/05/letter-to-a-content-strategist/

http://blog.greenonions.com/2010/06/05/letter-to-a-content-strategist/

56Mythbusters, 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.”

http://dsc.discovery.com/videos/mythbusters-polishing-a-turd.html

http://dsc.discovery.com/videos/mythbusters-polishing-a-turd.html

57

HOW?

58

HOW TO EVALUATE QUALITY

59

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

60

61

WRITERS ARE LIKE DEVELOPERS.THEY WORK BETTER WITH DIRECTION.

62

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.




63

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





64

HOW?

65

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.

66

1. THINK BEYOND THE TEMPLATE.2. EVALUATE CONTENT QUALITY.3. PLAN FOR CONTENT CREATION.4. DON’T FEAR NEW ROLES.

67

Extra super bonusfourth thing!

68

69

70

I don’t get why we need a content strategist.

Writers can make spreadsheets.

71

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.

I try to avoid talking about roles and job titles; I agree with Jared Spool that we should be talking about skills.

I was actually afraid to talk about this but it seemed to go over well. I might try talking about it again someday.

FIRST:

YOU WILL ADVOCATE FOR CONTENT.

SECOND:

YOU WILL USE YOUR NEWCONTENT STRATEGY TOOLS.

THIRD:

YOU WILL COLLABORATE WITH A CONTENT STRATEGIST.

FOURTH:

YOU WILL JOIN THE DISCUSSION:TUESDAY, MARCH 15 11:00AMDRISKILL, VICTORIAN ROOM604 BRAZOS STREET

THANKS!

@[email protected]+1 (917) 887-8149

mailto:[email protected]

mailto:[email protected]

http://www.bondartscience.com

http://www.bondartscience.com