Designer, author and entrepreneur Lisa Sabin-Wilson walks through the critical step of documenting design with your client and how it will save you time and help your clients.

1. documenting design
a critical step in any developers work flow
9/19/2012 - LISA SABIN-WILSON

2. Lisa Sabin-Wilson
•DESIGNER SINCE 1998
•“DEVELOPER” SINCE 2003
•DEVELOPER SINCE 2007
•AUTHOR: WORDPRESS FOR DUMMIES
•OWNER: EWEBSCAPES DESIGN STUDIO
9/19/2012 - LISA SABIN-WILSON

3. documenting design ...
9/19/2012 - LISA SABIN-WILSON

4. lives within that precious
space between
design &
development
9/19/2012 - LISA SABIN-WILSON

5. Let’s call it
assumption alley - -
because this is where
MOST of the assumptions
begin and then stick.
9/19/2012 - LISA SABIN-WILSON

6. Eliminate
Assumptions
• Saves time
• Reduces headaches
• Avoids hard feelings
• Happy client
• Happy developer
9/19/2012 - LISA SABIN-WILSON

7. Set
Expectations
Early
• Keeps project realistic
• Keeps projects on time
• Avoids miscommunication
• Happy client
• Happy developer
9/19/2012 - LISA SABIN-WILSON

8. Document
Project
Requirements
• Ready reference point for all
• Eliminates “he said/she said”
• Provides a work flow
• Happy client
• Happy developer
9/19/2012 - LISA SABIN-WILSON

9. NOT YOUR AVERAGE JOES
PROJECT
HTTP://NYAJ.COM
DATE CLIENT
JULY 2012 NOT YOUR AVERAGE JOES

10. NOT YOUR AVERAGE JOE’S
PROJECT
HTTP://NYAJ.COM
DATE CLIENT
JULY 2012 NOT YOUR AVERAGE JOE’S

11. INITIAL CLIENT CONTACT
|
PRE-SALES DISCUSSIONS
|
INITIAL REQUIREMENTS
|
Typical STATEMENT OF WORK
|
work flow DESIGN PROCESS
|
DESIGN APPROVAL
|
DEVELOPMENT
|
TESTING
|
GO LIVE!
9/19/2012 - LISA SABIN-WILSON

12. INITIAL CLIENT CONTACT
|
PRE-SALES DISCUSSIONS
|
INITIAL REQUIREMENTS
|
New-Typical
STATEMENT OF WORK
|
DESIGN PROCESS
work flow |
DESIGN DOCUMENTATION
|
DESIGN APPROVAL
|
DEVELOPMENT
|
TESTING
|
GO LIVE!

13. documenting the design
files eliminates the guess
work.
9/19/2012 - LISA SABIN-WILSON

14. WE BUILT A SITEMAP - WHICH WAS HELPFUL...
BUT IT WASN’T ENOUGH 9/19/2012 - LISA SABIN-WILSON

15. WE HAD A 16 PAGE STATEMENT OF WORK
BUT IT STILL WASN’T ENOUGH 9/19/2012 - LISA SABIN-WILSON

16. PSD Files Acquired.
DESIGN APPROVAL DONE!
9/19/2012 - LISA SABIN-WILSON

17. A TOTAL OF 26 DIFFERENT PAGE VIEWS/LAYOUTS
BELIEVE IT OR NOT ... THIS WAS STILL NOT ENOUGH 9/19/2012 - LISA SABIN-WILSON

18. at this point?
it is really tempting to dig
right in and start
developing this bad boy.
9/19/2012 - LISA SABIN-WILSON

19. the sooner you get it done...
the sooner you get paid.
the sooner you can update your portfolio.
the sooner the client is happy.
9/19/2012 - LISA SABIN-WILSON

20. right?
9/19/2012 - LISA SABIN-WILSON

21. What they wanted... ?
LISA NEEDS TO START DEVELOPMENT NOW
BECAUSE
WE WANT THIS DONE & LIVE IN LESS THAN 30 DAYS.
9/19/2012 - LISA SABIN-WILSON

22. What they needed... ?
STOP ... TAKE A BREATH ...
LISA NEEDS TO DEFINE THE DEVELOPMENT
IN A WAY THAT TAKES QUESTIONS OUT OF THE ENTIRE
DEVELOPMENT PROCESS.
9/19/2012 - LISA SABIN-WILSON

23. eliminate
remove
obliterate assumptions.

24. as a developer - I can
make assumptions with
the BEST of them

25. assumptions are based on
a persons own frame of
reference.

26. what i see in my head will
be different from what you
see in your head.

27. interpretations will vary.

28. For example . . .

29. THE LANDING PAGE
THERE IS A LOT GOING ON HERE

30. i made some assumptions
:(
9/19/2012 - LISA SABIN-WILSON

31. THE LANDING PAGE
MORE PHOTOS? IT’S A SIDEBAR CAROUSEL - IT FLIPS THROUGH STAFF PHOTOS

32. THE LANDING PAGE
THE REALITY .... THE CLIENT’S INTENTION ? ...

33. THE LANDING PAGE
THE REALITY .... IT’S A SLIDESHOW/CAROUSEL OF PHOTOS IN THE MAIN BODY

34. a sidebar carousel
is HUGELY different
than a slideshow in the
main content area.
9/19/2012 - LISA SABIN-WILSON

35. if i had gone with my
initial assumption without
discovering the clients
intention ...
9/19/2012 - LISA SABIN-WILSON

36. i would have wasted time.
9/19/2012 - LISA SABIN-WILSON

37. i would have presented
incorrect work to the
client.
9/19/2012 - LISA SABIN-WILSON

38. i would risk the client
losing confidence in me.
9/19/2012 - LISA SABIN-WILSON

39. especially if i had made
my next assumption . . .
9/19/2012 - LISA SABIN-WILSON

40. THE LANDING PAGE
REMEMBER THIS? 9/19/2012 - LISA SABIN-WILSON

41. THE LANDING PAGE
JOIN OUR EMAIL CLUB - - LINKS TO A PAGE WITH A SUBSCRIPTION FORM - RIGHT?

42. THE LANDING PAGE
NOT EXACTLY - CLICK IT AND IT OPENS INLINE - NO NEW PAGE LOAD. 9/19/2012 - LISA SABIN-WILSON

43. THE NAVIGATION MENU
LINKS TO INTERNAL PAGES? 9/19/2012 - LISA SABIN-WILSON

44. THE LANDING PAGE
NOPE! IT CONTAINS A FLY OUT MENU WITH SUB NAVIGATION 9/19/2012 - LISA SABIN-WILSON

45. none of this was indicated
•INITIAL REQUIREMENTS
•STATEMENT OF WORK
•SITE MAP
•PSD FILES
9/19/2012 - LISA SABIN-WILSON

46. a smart developer
•RECOGNIZES GAPS
•ASKS QUESTIONS
•SEEKS ANSWERS
•REQUIRES CLARIFICATION
9/19/2012 - LISA SABIN-WILSON

47. i have not always been a
smart developer
•WASTED HOURS UPON HOURS
•FRUSTRATING BACK AND FORTH
•LOST MONEY
•FRUSTRATED CLIENTS
•SCOPE CREEP
•NEVER ENDING PROJECT
9/19/2012 - LISA SABIN-WILSON

48. when you have your hands
on the approved design
files - get into the mind of
the user
9/19/2012 - LISA SABIN-WILSON

49. you know ....
the person who is actually
going to use the web site
9/19/2012 - LISA SABIN-WILSON

50. you will do yourself and
your client a favor if you
start asking questions
like...
9/19/2012 - LISA SABIN-WILSON

51. what
happens
when I click
this?
9/19/2012 - LISA SABIN-WILSON

52. how many photos
are loaded into this
carousel?
what happens when i
click “more photos?”
does clicking on an
individual photo take
me anywhere?
9/19/2012 - LISA SABIN-WILSON

53. asking questions like
these gives the client
the chance to correct
your assumptions...
“oh no, that’s not for those photos ...
it’s for the main photos on the left!”
9/19/2012 - LISA SABIN-WILSON

54. so then you can
clarify....
•HOW MANY PHOTOS?
•ARE THEY LINKED TO ANYTHING?
•ARE THESE POSTS WITH
FEATURED IMAGES?
•DOES THIS HAPPEN ON OTHER
PAGES?
•OR JUST THE HOME PAGE?
9/19/2012 - LISA SABIN-WILSON

55. wherever
there is an
action
indicated ...
clarify it
9/19/2012 - LISA SABIN-WILSON

56. Never be
afraid to...
ask questions
get clarification
correct your assumptions

57. Doing so
shows ...
initiative
motivation to do it right
confidence
thoroughness

58. but wait ....
don’t stop at simply having
the conversation
9/19/2012 - LISA SABIN-WILSON

59. document it.
9/19/2012 - LISA SABIN-WILSON

60. make it part of the
contract.
9/19/2012 - LISA SABIN-WILSON

61. before you lay down one
single piece of code - get
your client to sign off on it.
9/19/2012 - LISA SABIN-WILSON

62. find a
method you
prefer - but
definitely
document it
9/19/2012 - LISA SABIN-WILSON

63. •AUDIO: RECORD THE CONVERSATION
•OLD SCHOOL: SPREADSHEET
•CONCEPT SHARE
•HTTP://WWW.CONCEPTSHARE.COM
•CAGE APP
•HTTP://WWW.CAGEAPP.COM
9/19/2012 - LISA SABIN-WILSON

64. whatever method you
choose to use - make sure
you document the process
9/19/2012 - LISA SABIN-WILSON

65. Documenting each
element in the project
added approximately
2 hours.
9/19/2012 - LISA SABIN-WILSON

66. if it wasn’t documented
...
it didn’t happen
9/19/2012 - LISA SABIN-WILSON

67. The End.
9/19/2012 - LISA SABIN-WILSON