Communicating Design Session @ IA Summit

Communicating Design An Astonishingly Close Look at IA Documentation Presented by Dan Brown Principal, EightShapes, LLC IA Summit 2007 Las Vegas, Nevada, USA

ENTERPRISE ANALYSIS Project Constan t s : TECHNICAL - Iterative Approach for all Ph a s e s AUDIT AND DEVELOPMENT - Knowledge Manageme n t - Client Servic e - Client Va l u e TECHNOL O G Y STRAT G Y E BRAND ANALYSIS BEGIN PROJE C T CREATIV E STRAT G Y E (Brand & U s e r USER ANALYSI S Experien c e ) RESOURCE & ORGANIZAT O N A L I STRATE G I C COMPETIT I V E ANALYSIS ANALYSIS CONT X T E CUSTOM E R & INTE N T ANALYSIS USER BUSINESS TRAINI N G STRAT G Y E INTERN A L COMMUNICAT I O N S METR I C S IMPAC T ANALYSIS PROJEC T WARRANT Y GOVERNANC E WOR K INTERN A L METR I C S PLAN COMMUNICAT I O N S PROBLE M STATE M E N T DEPLOYME N T ENTERPR I S E PLAN SCOPE & ANALYSI S METR I C S PLAN DOCUME N T VISIO N PLAN PURSU I T SCOPE & RO L E OPTION S ORGANIZAT O N A L I DOCUMENT T I O N A weak relationsh i p MODIFI E D CHANG E DELIVERABL E MANAGEM E N T SOLUT O N I REQUIREM N T S E MODEL N G , I MODIFI E D DESIGN, & DEPLOY E D TRANSIT I O N DELIVERABL E SOLUTIO N PLAN PLAN REQUIREM N T S E MODIFI E D envisioning the real-time enter p r i s e DELIVERABL E ENTERPRI S E implementing a solut i o n VISIONI NG REQUIREM N T S E MODIFIE D CHANG E SOLUTIO N RELEASE MANAGEM E N T SOLUTION NOTE S CHANG E MODELING MANAGEM E N T ENTERPRI S E TISANI TRANSITION METHODOLOGY REQUIREMEN T S USABILITY TEST S & RECOMMENDAT I O N S MEASUREME N T TEST E D PROCESS SURVEY SOLUTIO N modeling a solut i o n SOLUTION BUSINESS DESIGN USE CASE SPECIFICATI O N BUILT SOLUTIO N PERFOMA N C E TEST RESU L T S applying a soluti o n QA TEST & S TEST RESU L T S DOCUMENTATIO N DESIG N COMMUNICA T I O N USE CASES PROGRAM ( S ) MATERIA L S Delivera b l e USE CASES PROTOTY P E Project Managem e n t INTERF C E A PROTOTY P E DESIG N PROCESS STANDARD S INTERACT I O N DETAIL S DOCUMENT T I O N A INTERACT V E I MODE L APPLICATIO N S Strategy IMPLEMENT T I O N A PLANS STANDARD S DOCUMENT T I O N A SYSTE M S CONT X T E USABILIT Y DIAGRAM S Creativ e QA TEST P L A N TEST PL A N SYSTE M SOLUTION ANALYSIS ARCHITECT R E U PROCESS STANDARD S AND DEVELOPMENT DETAIL S DOCUMENT T I O N A DOMAIN & OB J E C T MODEL S Technolo g y

applying a soluti o n DESIG N USE CASES Delivera b l e USE CASES PROTOTY P E Project Managem e n t INTERF C E A PROTOTY P E DESIG N PROCESS INTERACT I O N DETAIL S MODE L Strategy SYSTE M S CONT X T E DIAGRAM S Creativ e SYSTE M SOLUTION AN ARCHITECT R E U PROCESS AND DEVELOP DETAIL S DOMAIN & OB J E C T MODEL S Technolo g y

project methodology activity/event static sites deliverable data baseline sample ongoing sample regular collection analysis study report studies report reports request metrics external meeting internal meeting client survey other kinds of usability activities (card sorting) requires sign-off ux meeting participants survey funding baseline wireframe recruiting analysis recruiting btl analysis approved test testing content management st cm usability usability us information architect ia business team lead follow-up recommen- final recommen- btl prototypes questions dations wireframes dations user experience lead ux copywriter cw strategy lead st ux btl business recommen- wireframe driver dations btl us review kick off review ia st ia btl ux btl ia ux btl ia cw us us cm draft user request revised draft wireframe revised revised page require- experience materials site map wireframes review wireframes wireframes inventory ments kick-off ia ux btl st ux btl require- existing task input source wireframe ments task inputs btl ia materials* review material review review st cw copy design cm ia revised metrics/ content assess cw high-level 508 copy require- scoping usability copy deck audit/ graphics cm site map review review ments plan strategy needs btl ux btl st st reqs launch teamsite new btl review email pages graphics ux ux lead strategy lead btl cm final filenames legal copy revised require- for review review copy deck ments tracking metrics ia cw cm btl * existing materials include baseline metrics reports, existing usability studies, customer satisfaction surveys.

ux ia ux ia us us cm user revised draft wireframe revised revised p xperience site map wireframes review wireframes wireframes inve kick-off source wireframe material review copy ia content cw 508 copy copy deck audit/ cm review review strategy btl teamsite new pages graphics btl cm filenames legal copy revised for review review copy deck tracking metrics ia cw cm btl

Web Design Methods in a Nutshell What do users want/need? ❖ What approach will we take to design a solution? ❖ What does the solution look like? ❖ Does the solution e ectively ll the need? ❖

A document captures an idea.

War is Bad

The Role of Documentation Consistency of Vision ❖ Documents help facilitate communication Accountability ❖ Documents represent project history Traceability ❖ Documents show progress

Di erent Kinds of Documents Usability Test Plan Usability Report Concept Model Screen Design Site Map Persona Flow Chart Competitive Analysis Wireframe Content Inventory

Di erent Kinds of Documents User Needs Strategy Design Persona Competitive Analysis Site Maps Usability Test Plan Concept Model Flow Charts Usability Reports Content Inventory Wireframes Screen Designs What do users want? What approach What does the Does it meet their needs? should we take? solution look like?

A Closer Look at Flow Charts

&"'()* +,(- !"#$%" &"'()* &"'()* !"./01. !"#$%& '()

!"#$ %&'&($ %&#)*(& =>C %&'&($ +&'*)&#, %&$ 6&(7##*08 6&1/')& +"$& %(9&.7'& !/03'*($1 =>= =>D =>D>C -..*$*/0"' %5&(*"' !/03*#: +"$&1 45$*/01 %(9&.7'& =>=>C =>D>D =>D>= -'(/9/' 2/$*(& =>E>C 2/$*3*("$*/0 ;&#*19"<'& !/03*#:"$*/0 45$*/01 45$*/01 =>E>= =>E =>F !"#$%& '()

!"#$%&'( )*#$'& +,#-.$/0'( 54+'0 ,0./'0 &'()'*+ ,'-./'01 &'2342.-' &'()'*+ 6/7.-78.-.+1 7&."& 8)94$&:/*$)9 9'4'07+' :2;'<)-' =34>.0? 6**.@4?'4+* =;74@' G0<'0 6<A)*+ :2;'<)-' 74< &'2342.-' =34>-.2+* B032'** :2;'<)-' !"#$%"&' ()*$+" C.47-.D' :2;'<)-' 9'4'07+' ,'-./'01 EF<7+'* !"#$%"&' ,-./*"0 !"#$% !"#$% 1+2".3#"0 4)& !&$%"& 5!60 !"#$% !"#$% !"#$%& '()

>? @#/(&#, +&'*)&#, 45$*/01 A'/B !"#$ %&'&($ %&#)*(& =>C '&%"(&)* +$,"-./ !"#$%& '&%"(&)* %&'&($ +&'*)&#, %&$ 6&(7##*08 6&1/')& +"$& %(9&.7'& !/03'*($1 0&12))".3 +$,"-./ =>= =>D =>D>C -..*$*/0"' %5&(*"' !/03*#: +"$&1 45$*/01 %(9&.7'& =>=>C =>D>D =>D>= 4-,"5"16,"-. 6.7 8-.5")#6,"-. -'(/9/' 2/$*(& =>E>C 2/$*3*("$*/0 ;&#*19"<'& !/03*#:"$*/0 45$*/01 45$*/01 =>E>= =>E =>F

!"#$ %&'&($ %&#)*(& C1&#1 .*. 0/$ 70.&#1$"0. $9& '"<&'*08 /3 $9& 3*&'.1 =>E /0 $9*1 5"8&> %&'&($ +&'*)&#, %&$ 6&(7##*08 6&1/')& +"$& %(9&.7'& !/03'*($1 =>= =>F =>F>E I9& "'(/9/' .&'*)&#, -..*$*/0"' %5&(*"' !/03*#: B"#0*08 "55&"#1 "1 " +"$&1 45$*/01 %(9&.7'& 1:"'' 5/5J75 B*0./B $9"$ =>=>E =>F>F =>F>= :"0, 71&#1 .*. 0/$ 1&&> C1&#1 B&#&0L$ 17#& B9"$ $/ ./ /0 $9*1 5"8&> -'(/9/' 2/$*(& =>G>E I9& 17<:*$ <7$$/0 3"''1 2/$*3*("$*/0 ;&#*19"<'& <&'/B $9& 3/'. /0 $9*1 !/03*#:"$*/0 45$*/01 45$*/01 5"8&K (/0371*08 71&#1 =>G>= "</7$ 9/B $/ (/0$*07& $9& 5#/(&11> =>G =>H !"#$%& '()*

Anchors Step Variations =>? @#/(&#, +&'*)&#, 45$*/01 A'/B Decision Step Groupings Points !"#$ %&'&($ %&#)*(& Step Details =>C Steps Error Paths %&'&($ +&'*)&#, %&$ 6&(7##*08 6&1/')& +"$& %(9&.7'& !/03'*($1 Triggers =>= =>D =>D>C Scenarios -..*$*/0"' %5&(*"' !/03*#: +"$&1 45$*/01 %(9&.7'& =>=>C =>D>D =>D>= Paths -'(/9/' 2/$*(& Step =>E>C 2/$*3*("$*/0 ;&#*19"<'& !/03*#:"$*/0 45$*/01 45$*/01 Distinctions =>E>= =>E =>F

Anchors Step Variations =>? @#/(&#, +&'*)&#, 45$*/01 A'/B Decision Step Groupings Points !"#$ %&'&($ %&#)*(& Step Details =>C Steps Error Paths %&'&($ +&'*)&#, %&$ 6&(7##*08 6&1/')& +"$& %(9&.7'& !/03'*($1 Triggers =>= =>D =>D>C Scenarios -..*$*/0"' %5&(*"' !/03*#: +"$&1 45$*/01 %(9&.7'& =>=>C =>D>D =>D>= Paths -'(/9/' 2/$*(& =>E>C Step 2/$*3*("$*/0 ;&#*19"<'& !/03*#:"$*/0 Distinctions 45$*/01 45$*/01 =>E>= =>E =>F

The Anatomy of a Document

Di erent Document Elements De ning Elements ❖ Making the document what it is Elaborating Elements ❖ Providing useful details -- “useful” varies by context Enhancing Elements ❖ Adding details to support broader agenda

Critical Thinking about Your Own Documentation

print version Code Link to Request shared URL c yes Pass Subscribers Three-Day Invitation Pass start here unique code no Program 2 Code Code Pass Unknown a yes Already Expired Overview Code Active ! ! ! 4 no 9 3 no No Passes email/IM version Left b yes ! unique URL 1 Decision Points Functional Notes a 1 Users can generate up to ve passes a day. Does the user have any passes left to distribute? b Is the unique URL valid? Users have two ways to distribute pass information: electronic 2 printing it out. c Is the code valid? d Is the guest registration information valid? There are three possible errors for the code/URL. It could be u 3 expired, or already active. The rst two error pages instruct us code from their friend. When a code is already active, the syste

Guest Activates Pass Guest Registers Guest U y. Guests with a printed pass will visit the code request Guests must go through a simple registration process. Guests use meo header. screen. Guests with a unique URL will, if valid, be taken Screennames created during this process do not carry some modi directly to the registration ow. over to regular registration. address for always see Code Guest User enters Cosmeo Request Registration unique URL Log-in Three-day pass account? Log-In Y N Registration ses? Activation code valid? Guest account a information valid? N Y N Y Code Username Account Guest Guest Expired in Use Expired Registration Welcome ! ! ! Unknown Invalid Code Password

Creating Deliverables Establish purpose ❖ Identify audience ❖ Inventory contents ❖ Prioritize contents ❖ Create visual language ❖

Using Deliverables Communicate purpose ❖ Relinquish control ❖ Note opportunities for improvement ❖ Estimate value of maintenance ❖

Thank You! Contact Me ❖ dan@eightshapes.com About the book ❖ www.communicatingdesign.com

http://www.thecontentwrangler.com	101
http://www.iasummit.org	77
http://www.slideshare.net	6
http://www.mycatalyze.org	5
http://staff.washington.edu	2
http://feeds.feedburner.com	1
http://www.netvibes.com	1
http://www.newshutch.com	1
http://networks.feedburner.com	1
http://www.newsalloy.com	1
http://www.soup.io	1

Communicating Design Session @ IA Summit

by Daniel Brown on Apr 12, 2007

Accessibility

Categories

Tags

Upload Details

Usage Rights

11 Embeds 197

Statistics

Communicating Design Session @ IA Summit — Presentation Transcript