The fundamental process we follow of how we understand design problems, users, and content hasn’t changed much, but the documentation we deliver and how we deliver it is a bit in flux. We’re experts in cognitive science, usability, and solving problems with design. However, device fragmentation forces us to think through flexible experiences with portable content and in turn, to rethink how we communicate to our clients throughout the process. In this session, you will learn how to adapt your workflow and process to make communicating responsive design easier and how to create and deliver more portable and flexible design artifacts.

1. Communication with
Flexible Documentation
Effective communication and efficient
workflow for today’s web designers
Jon Hadden
#UXCamp
@niceux niceux.com

2. 33 years ago…

3. Birth of A Legend designed by Jakub Gruber (Buy this t-shirt)
33 years ago…

4. Birth of A Legend designed by Jakub Gruber (Buy this t-shirt)

6. Hi, my name is Jon.
I am an American

7. Hi, my name is Jon.
I am an Minnesotan-American

8. Hi, my name is Jon.
I love information architecture,
observing human behavior, front-end
development and helping
people enjoy the web.
NiceUX

9. Hi, my name is Jon.
I love information architecture,
observing human behavior, front-end
development and helping
people enjoy the web.
NiceUX

10. 1. Be efficient.
Photo Credits: http://www.smashingmagazine.com/wp-content/uploads/2011/12/7.jpg

11. 1. Be efficient.
2. Remain flexible and adapt to
surroundings.
Photo Credits: http://www.smashingmagazine.com/wp-content/uploads/2011/12/7.jpg

12. 1. Be efficient.
2. Remain flexible and adapt to
surroundings.
3. Find the best way to effectively
communicate to your audience.
Photo Credits: http://www.smashingmagazine.com/wp-content/uploads/2011/12/7.jpg

13. The approach and manner in which you tell a story, influences an
audience’s perception of that story’s value.
@niceux #UXCamp
Photo Credits: http://www.bbc.co.uk/blogs/legacy/bbcinternet/2012/06/bbc_tv_channel_homepages_redes.html

14. Story time
The project that broke the narwhal’s back

15. Approve an invoice
• Performed multiple times per day, every day.
• User’s end of the year bonus depended upon
number of non-error approvals.
• Used by 40-60 year olds who don’t use their
computers besides to check in over email or
Facebook with their college aged kids.
• Primarily used at a desktop PC, using IE7
• Originally built as desktop application, and 10 yr
old code was “dropped” into a web version.

16. 4 things needed to approve
an invoice without error
1. Invoice Amount
2. Bill Amount
3. Route Details
4. Associated Notes

17. 4 things needed to approve
an invoice without error
1. Invoice Amount
2. Bill Amount
3. Route Details
4. Associated Notes
Invoice List

18. 4 things needed to approve
an invoice without error
1. Invoice Amount
2. Bill Amount
3. Route Details
4. Associated Notes
Invoice List
3-5 seconds
Invoice Amount

19. 4 things needed to approve
an invoice without error
1. Invoice Amount
2. Bill Amount
3. Route Details
4. Associated Notes
Invoice List
3-5 seconds
Invoice Amount

20. 4 things needed to approve
an invoice without error
1. Invoice Amount
2. Bill Amount
3. Route Details
4. Associated Notes
Invoice List
Invoice Amount
3-5 seconds
Bill Amount

21. 4 things needed to approve
an invoice without error
1. Invoice Amount
2. Bill Amount
3. Route Details
4. Associated Notes
Invoice List
Invoice Amount
3-5 seconds
Bill Amount

22. 4 things needed to approve
an invoice without error
1. Invoice Amount
2. Bill Amount
3. Route Details
4. Associated Notes
Invoice List
Invoice Amount
3-5 seconds
Bill Amount Route Details

23. 4 things needed to approve
an invoice without error
1. Invoice Amount
2. Bill Amount
3. Route Details
4. Associated Notes
Invoice List
Invoice Amount
3-5 seconds
Bill Amount Route Details

24. 4 things needed to approve
an invoice without error
1. Invoice Amount
2. Bill Amount
3. Route Details
4. Associated Notes
Transactions
~ 6 seconds
Notes

25. 4 things needed to approve
an invoice without error
1. Invoice Amount
2. Bill Amount
3. Route Details
4. Associated Notes
Transactions
Notes
3-5 seconds
Invoice Notes

26. 4 things needed to approve
an invoice without error
1. Invoice Amount
2. Bill Amount
3. Route Details
4. Associated Notes
Transactions
Notes
3-5 seconds
Invoice Notes

27. 4 things needed to approve
an invoice without error
1. Invoice Amount
2. Bill Amount
3. Route Details
4. Associated Notes
Transactions Notes
Invoice Notes
~ 6 seconds

28. 4 things needed to approve
an invoice without error
1. Invoice Amount
2. Bill Amount
3. Route Details
4. Associated Notes
Transactions Notes
Invoice Notes
~ 2 minutes per
approved invoice

32. User Research & Analysis Personas Information Architecture Measurement & Iteration Build & Maintain

34. Concept Direction 1
30 Wireframes
Concept Direction 2 Concept Direction 3
20 PSDs
Large
20 Wireframes 10 PSDs
Medium
30 Wireframes 5 PSDs
Small
20 Wireframes 5 PSDs
X-Small
30 Wireframes 20 PSDs
20 Wireframes 10 PSDs
30 Wireframes 5 PSDs
20 Wireframes 5 PSDs
30 Wireframes 20 PSDs
20 Wireframes 10 PSDs
30 Wireframes 5 PSDs
20 Wireframes 5 PSDs

35. Concept Direction 1
30 Wireframes
Concept Direction 2 Concept Direction 3
20 PSDs
Large
20 Wireframes 10 PSDs
Medium
30 Wireframes 5 PSDs
Small
20 Wireframes 5 PSDs
X-Small
30 Wireframes 20 PSDs
20 Wireframes 10 PSDs
30 Wireframes 5 PSDs
20 Wireframes 5 PSDs
30 Wireframes 20 PSDs
20 Wireframes 10 PSDs
30 Wireframes 5 PSDs
20 Wireframes 5 PSDs

36. Concept Direction 1
30 Wireframes
Concept Direction 2 Concept Direction 3
20 PSDs
Large
20 Wireframes 10 PSDs
Medium
30 Wireframes 5 PSDs
Small
20 Wireframes 5 PSDs
X-Small
30 Wireframes 20 PSDs
20 Wireframes 10 PSDs
30 Wireframes 5 PSDs
20 Wireframes 5 PSDs
30 Wireframes 20 PSDs
20 Wireframes 10 PSDs
30 Wireframes 5 PSDs
20 Wireframes 5 PSDs

37. Concept Direction 1
30 Wireframes
Concept Direction 2 Concept Direction 3
20 PSDs
Large
20 Wireframes 10 PSDs
Medium
30 Wireframes 5 PSDs
Small
20 Wireframes 5 PSDs
X-Small
30 Wireframes 20 PSDs
20 Wireframes 10 PSDs
30 Wireframes 5 PSDs
20 Wireframes 5 PSDs
30 Wireframes 20 PSDs
20 Wireframes 10 PSDs
30 Wireframes 5 PSDs
20 Wireframes 5 PSDs

38. Concept Direction 1
30 Wireframes
Concept Direction 2 Concept Direction 3
20 PSDs
Large
20 Wireframes 10 PSDs
Medium
30 Wireframes 5 PSDs
Small
20 Wireframes 5 PSDs
X-Small
30 Wireframes 20 PSDs
20 Wireframes 10 PSDs
30 Wireframes 5 PSDs
20 Wireframes 5 PSDs
30 Wireframes 20 PSDs
20 Wireframes 10 PSDs
30 Wireframes 5 PSDs
20 Wireframes 5 PSDs

39. Concept Direction 1
30 Wireframes
Concept Direction 2 Concept Direction 3
20 PSDs
Large
20 Wireframes 10 PSDs
Medium
30 Wireframes 5 PSDs
Small
20 Wireframes 5 PSDs
X-Small
30 Wireframes 20 PSDs
20 Wireframes 10 PSDs
30 Wireframes 5 PSDs
20 Wireframes 5 PSDs
30 Wireframes 20 PSDs
20 Wireframes 10 PSDs
30 Wireframes 5 PSDs
20 Wireframes 5 PSDs

40. Concept Direction 1
30 Wireframes
Concept Direction 2 Concept Direction 3
20 PSDs
Large
20 Wireframes 10 PSDs
Medium
30 Wireframes 5 PSDs
Small
20 Wireframes 5 PSDs
X-Small
30 Wireframes 20 PSDs
20 Wireframes 10 PSDs
30 Wireframes 5 PSDs
20 Wireframes 5 PSDs
30 Wireframes 20 PSDs
20 Wireframes 10 PSDs
30 Wireframes 5 PSDs
20 Wireframes 5 PSDs

41. Concept Direction 1
30 Wireframes
Concept Direction 2 Concept Direction 3
20 PSDs
Large
20 Wireframes 10 PSDs
Medium
30 Wireframes 5 PSDs
Small
20 Wireframes 5 PSDs
X-Small
30 Wireframes 20 PSDs
20 Wireframes 10 PSDs
30 Wireframes 5 PSDs
20 Wireframes 5 PSDs
30 Wireframes 20 PSDs
20 Wireframes 10 PSDs
30 Wireframes 5 PSDs
20 Wireframes 5 PSDs

42. Concept Direction 1
30 Wireframes
Concept Direction 2 Concept Direction 3
20 PSDs
Large
20 Wireframes 10 PSDs
Medium
30 Wireframes 5 PSDs
Small
20 Wireframes 5 PSDs
X-Small
30 Wireframes 20 PSDs
20 Wireframes 10 PSDs
30 Wireframes 5 PSDs
20 Wireframes 5 PSDs
30 Wireframes 20 PSDs
20 Wireframes 10 PSDs
30 Wireframes 5 PSDs
20 Wireframes 5 PSDs

44. Concept Direction 1
30 Wireframes
Concept Direction 2 Concept Direction 3
20 PSDs
Large
20 Wireframes 10 PSDs
Medium
30 Wireframes 5 PSDs
Small
20 Wireframes 5 PSDs
X-Small
30 Wireframes 20 PSDs
20 Wireframes 10 PSDs
30 Wireframes 5 PSDs
20 Wireframes 5 PSDs
30 Wireframes 20 PSDs
20 Wireframes 10 PSDs
30 Wireframes 5 PSDs
20 Wireframes 5 PSDs
1. Nights and weekends.

45. Concept Direction 1
30 Wireframes
Concept Direction 2 Concept Direction 3
20 PSDs
Large
1. Nights and weekends.
2. 20 Changing Wireframes 10 PSDs
the same thing a billion
Medium
30 Wireframes 5 PSDs
Small
20 Wireframes 5 PSDs
X-Small
30 Wireframes 20 PSDs
20 Wireframes 10 PSDs
30 Wireframes 5 PSDs
20 Wireframes 5 PSDs
30 Wireframes 20 PSDs
20 Wireframes 10 PSDs
30 Wireframes 5 PSDs
20 Wireframes 5 PSDs
times … just because.

46. Concept Direction 1
30 Wireframes
Concept Direction 2 Concept Direction 3
20 PSDs
Large
1. Nights and weekends.
2. 20 Changing Wireframes 10 PSDs
the same thing a billion
Medium
30 Wireframes 5 PSDs
Small
20 Wireframes 5 PSDs
X-Small
30 Wireframes 20 PSDs
20 Wireframes 10 PSDs
30 Wireframes 5 PSDs
20 Wireframes 5 PSDs
30 Wireframes 20 PSDs
20 Wireframes 10 PSDs
30 Wireframes 5 PSDs
20 Wireframes 5 PSDs
times … just because.
3. File names like:
204_OH_PortalRedesign_wireframes_FINAL_DRAFT_FINAL.graffle

47. Concept Direction 1
30 Wireframes
Concept Direction 2 Concept Direction 3
20 PSDs
Large
1. Nights and weekends.
2. 20 Changing Wireframes 10 PSDs
the same thing a billion
Medium
30 Wireframes 5 PSDs
Small
20 Wireframes 5 PSDs
X-Small
30 Wireframes 20 PSDs
20 Wireframes 10 PSDs
30 Wireframes 5 PSDs
20 Wireframes 5 PSDs
30 Wireframes 20 PSDs
20 Wireframes 10 PSDs
30 Wireframes 5 PSDs
20 Wireframes 5 PSDs
times … just because.
3. File names like:
204_OH_PortalRedesign_wireframes_FINAL_DRAFT_FINAL.graffle
4. Sucking at life.

48. NOPE
Photo Credits: http://catswallpaperhd.us/cat/grumpy-cat-clipart-hd/attachment/grumpy-cat-clipart-hd-download-new-grumpy-cat-cartoon-free-wallpaper-x-full-hd-pictures/

49. Considering the variables:
1. Where are opportunities to reduce misinterpretation
when viewing a design?

50. Considering the variables:
1. Where are opportunities to reduce misinterpretation
when viewing a design?
2. How can I make my process more efficient, or reduce
the amount of work I need to do in order to get
everyone from point A to B?

51. Considering the variables:
1. Where are opportunities to reduce misinterpretation
when viewing a design?
2. How can I make my process more efficient, or reduce
the amount of work I need to do in order to get
everyone from point A to B?
3. Can I increase the portability of my documentation?

52. Approach the cognitive load of consuming
and creating your documentation like you
would the usability of an app.
@niceux #UXCamp
Photo Credits: http://www.bbc.co.uk/blogs/legacy/bbcinternet/2012/06/bbc_tv_channel_homepages_redes.html

53. As a designer
1. Conceptual Design
• Strategy & Concept Convergence
2. Content Strategy & IA
• Substance & Structure of Content
• Environment, Organization, Portability and Structural Layout
3. Interaction Design
• Types of Interactions, States and Transitions
4. Visual Design
• Element Design
As a developer
1. Environments
2. Data Binding
3. Content Delivery
4. Modular Elements

54. As a designer
1. Conceptual Design
• Strategy & Concept Convergence
2. Content Strategy & IA
• Substance & Structure of Content
• Environment, Organization, Portability and Structural Layout
3. Interaction Design
• Types of Interactions, States and Transitions
4. Visual Design
• Element Design
As a developer
1. Environments
2. Data Binding
3. Content Delivery
4. Modular Elements

55. Participatory Conceptual Design means involving
non-designers to the designer tea party.
Consider trying the 6-8-5 Sketch Workshop on your next project during the requirements
gathering and conceptual brainstorming phase with stakeholders and other team members.
Photo Credits: http://www.slideshare.net/runger/big-d-sketchingkey

56. 1. Define strategy, context of use and content.

57. 1. Define strategy, context of use and content.
2. Rapidly produce many variations.

58. 1. Define strategy, context of use and content.
2. Rapidly produce many variations.
3. Critique and repeat.

59. Separate features, assumptions, risks and
potential usability points of friction.

60. Think through high level page flows and the
conversation the user will have throughout their
experience.

61. Individually focus on UI elements, potential
options for handling information and interaction.

62. Put it all together.

63. Tell your story.

64. Collaborative, cross-functional sketch
sessions are the s
new post-it notes of
experience design.
@niceux #UXCamp
Photo Credits: http://spin.atomicobject.com/2012/04/22/more-takeaways-from-cooper-ux-bootcamp/

65. As a designer
1. Conceptual Design
• Strategy & Concept Convergence
2. Content Strategy & IA
• Substance & Structure of Content
• Environment, Organization, Portability and Structural Layout
3. Interaction Design
• Types of Interactions, States and Transitions
4. Visual Design
• Element Design
As a developer
1. Environments
2. Data Binding
3. Content Delivery
4. Modular Elements

66. As a designer
1. Conceptual Design
• Strategy & Concept Convergence
2. Content Strategy & IA
• Substance & Structure of Content
• Environment, Organization, Portability and Structural Layout
3. Interaction Design
• Types of Interactions, States and Transitions
4. Visual Design
• Element Design
As a developer
1. Environments
2. Data Binding
3. Content Delivery
4. Modular Elements

67. Content strategists in the digital age need to
become data philosophers and explore the
metaphysics of content, starting with the
question “What is content?”
Rachel Lovinger in 2007: http://boxesandarrows.com/content-strategy-the-philosophy-of-data/
Photo Credits: http://www.bbc.co.uk/blogs/legacy/bbcinternet/2012/06/bbc_tv_channel_homepages_redes.html

68. Content Modeling
1. Structure and Relationships.
Photo Credits: http://alistapart.com/article/content-modelling-a-master-skill

69. Content Modeling
1. Structure and Relationships.
2. Volume and Details.
Photo Credits: http://alistapart.com/article/content-modelling-a-master-skill

70. Content Modeling
1. Structure and Relationships.
2. Volume and Details.
3. Potential Issues Posed to Design and Development.
Photo Credits: http://alistapart.com/article/content-modelling-a-master-skill

72. Photo Credits: http://alistapart.com/article/content-modelling-a-master-skill

74. • Artist
• Album
• Title
• Cover Art
• Genres
• Songs
• Title
• Time
• Explicit

78. Utilizing JSON gives me and rest of the team a
flexible, structured, and sharable information
set to distribute in various environments.
Photo Credits: http://www.bbc.co.uk/blogs/legacy/bbcinternet/2012/06/bbc_tv_channel_homepages_redes.html

84. Utilizing JSON gives me and rest of the team a
flexible, structured, and sharable information
set to distribute in various environments.
Photo Credits: http://www.bbc.co.uk/blogs/legacy/bbcinternet/2012/06/bbc_tv_channel_homepages_redes.html

85. Information Architecture is the structural
design of shared information environments
Wikipedia: http://en.wikipedia.org/wiki/Information_architecture
Photo Credits: http://www.bbc.co.uk/blogs/legacy/bbcinternet/2012/06/bbc_tv_channel_homepages_redes.html

86. As a designer
1. Conceptual Design
• Strategy & Concept Convergence
2. Content Strategy & IA
• Substance & Structure of Content
• Environment, Organization, Portability and Structural Layout
3. Interaction Design
• Types of Interactions, States and Transitions
4. Visual Design
• Element Design
As a developer
1. Environments
2. Data Binding
3. Content Delivery
4. Modular Elements

88. Realistic Screen Real Estate

89. Responsive Design
Source Ordering
Major vs. Minor Breakpoints
Photo Credits: http://zurb.com/word/source-order

90. Edge Cases

91. Using code for your wireframes gives you realistic detail
control. Transitions lasting 250 ms feel a lot different than
750 ms.
@niceux #UXCamp
Photo Credits: http://www.bbc.co.uk/blogs/legacy/bbcinternet/2012/06/bbc_tv_channel_homepages_redes.html

92. If you’re using code to prototype, plan ahead for the
inevitable request to have it represent the end product.
@niceux #UXCamp
Photo Credits: http://www.bbc.co.uk/blogs/legacy/bbcinternet/2012/06/bbc_tv_channel_homepages_redes.html

93. Stephen Hay
…using the implicit
psychology at work in
design presentations to our
advantage … don’t let the
client think you’re further
ahead than you actually
are.
http://www.amazon.com/Responsive-Design-Workflow-
Stephen-Hay/dp/0321887867

94. Plan ahead to supplement a coded prototype with
annotations, a static PDF of key screens or a how-to guide.
@niceux #UXCamp
Photo Credits: http://www.bbc.co.uk/blogs/legacy/bbcinternet/2012/06/bbc_tv_channel_homepages_redes.html

96. As a designer
1. Conceptual Design
• Strategy & Concept Convergence
2. Content Strategy & IA
• Substance & Structure of Content
• Environment, Organization, Portability and Structural Layout
3. Interaction Design
• Types of Interactions, States and Transitions
4. Visual Design
• Element Design
As a developer
1. Environments
2. Data Binding
3. Content Delivery
4. Modular Elements

97. Samantha Warren
[Style tiles are] a catalyst
for discussions around the
preferences and goals of
the client.
http://styletil.es/

98. Dan Mall
Wireframes and moodboards tend to be
too abstract. Perhaps it’s just that I’ve
never perfected the art of articulating
their purpose, but I find it akin to
showing someone a blueprint of their
dream house and asking them what
curtains would fit well in the space
http://danielmall.com/articles/rif-element-collages/

99. Me
Now is my happy time
with CSS. In-browser
visual tweaks using the
inspector and console.

101. Design Wireframe / Dev

102. Too much spacing
Text isn’t bold,
wrong typeface
Too much spacing
Incorrect Typeface
Text is too big
Not enough “leading”

104. Too much spacing
Text isn’t bold,
wrong typeface
Too much spacing
Incorrect Typeface
Text is too big
Not enough “leading”

105. Reduce #header’s
top-padding to 10px
Add font-weight:
bold to nav
Increase padding-top to 300px
and reduce margin-top to 100px
Reduce line-height to 1.25em
Add font-family: “Open
sans”, Helvetica, sans-serif;

106. • Involve stakeholders throughout design process so they
understand critical thinking
• High level concept creation using sketches
• Utilize JSON to make your content modeling portable.
• Wireframe in your products natural environment, the
browser, in order to educate your client, identify design
nuances and jump start your build.
• Stop with all the Wireframe and PSD decks
• Utilize the browser’s inspector to give proper design
direction

107. • Involve stakeholders throughout design process so they
understand critical thinking
• High level concept creation using sketches
• Utilize JSON to make your content modeling portable.
• Wireframe in your products natural environment, the
browser, in order to educate your client, identify design
nuances and jump start your build.
• Stop with all the Wireframe and PSD decks
• Utilize the browser’s inspector to give proper design
direction

108. • Involve stakeholders throughout design process so they
understand critical thinking
• High level concept creation using sketches
• Utilize JSON to make your content modeling portable.
• Wireframe in your products natural environment, the
browser, in order to educate your client, identify design
nuances and jump start your build.
• Stop with all the Wireframe and PSD decks
• Utilize the browser’s inspector to give proper design
direction

109. • Involve stakeholders throughout design process so they
understand critical thinking
• High level concept creation using sketches
• Utilize JSON to make your content modeling portable.
• Wireframe in your products natural environment, the
browser, in order to educate your client, identify design
nuances and jump start your build.
• Stop with all the Wireframe and PSD decks
• Utilize the browser’s inspector to give proper design
direction

110. • Involve stakeholders throughout design process so they
understand critical thinking
• High level concept creation using sketches
• Utilize JSON to make your content modeling portable.
• Wireframe in your products natural environment, the
browser, in order to educate your client, identify design
nuances and jump start your build.
• Stop with all the Wireframe and PSD decks
• Utilize the browser’s inspector to give proper design
direction

111. • Involve stakeholders throughout design process so they
understand critical thinking
• High level concept creation using sketches
• Utilize JSON to make your content modeling portable.
• Wireframe in your products natural environment, the
browser, in order to educate your client, identify design
nuances and jump start your build.
• Stop with all the Wireframe and PSD decks
• Utilize the browser’s inspector to give proper design
direction

112. Measuring success of a workflow change means answering one
question: Does this change make everyone on the team happier?
@niceux #UXCamp
Photo Credits: http://www.bbc.co.uk/blogs/legacy/bbcinternet/2012/06/bbc_tv_channel_homepages_redes.html

113. Thank you!