Communication with Flexible Documentation For product designers concerned with reducing cognitive load and making life easier for people that use and interact with our products, we're making the process of interpreting, understanding and getting that product built, a rather bumpy road. Add in an increasingly fragmented browser and device market, and the once somewhat manageable communication problems we originally had as IA's have now been amplified. Flexible documentation speaks not only to the physically fluid nature of future IA artifacts but also the portability and scalability that we need to inherit as a means to communicate more effectively. Whether you work in a startup or fortune 500 company, this presentation will give you tools you can use today to increase your efficiency in design and effectiveness of design communication. Session Takeaways Learn effective and proven methods of communicating responsive design. Learn how to increase efficiency and reduce documentation waste within the product design process, focusing on: Content Modeling Ideation Wireframing / Prototyping Visual Design

1. Communication with
Flexible Documentation
Jon Hadden
@niceux
Effective communication and efficient
workflow for today’s web designers
NiceUX
#CollaborateBris
@CollaborateConf
Collaborate Bristol 2015

2. Hi, my name is Jon
@niceux
#CollaborateBris@niceux #flexdoc

3. I am a designer
Product Strategy, Information Architecture,
Interaction Design, Front-End Development
Founder of NiceUX
Founder of Simple CMMS
(Preventative Maintenance Software)
Advisory Board at Minneapolis Community & Technical College
Lecturer at University of Minnesota
#CollaborateBris@niceux #flexdoc

4. I am less interested in my title, more so
how I can contribute to creating something
that helps someone enjoy life?
#CollaborateBris@niceux #flexdoc

5. I am less interested in my title, more so
how can I make the journey of contributing
and the creating more enjoyable?
#CollaborateBris@niceux #flexdoc

17. =

18. Photo Credits: http://toparkornottopark.com/
Nikki Sylianteng

28. We need to start thinking about the amount of
cognitive load, or friction, throughout our process
and methods of communicating design.

29. Flexible documentation is all about making the
process more efficient and making communication
along the way more effective.

30. Communicating Experience

39. Portable Content Modeling

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

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

51. Utilizing JSON provides 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

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

53. Effectively Converging Towards A Concept

54. Facilitate design workshop with the
team to collaboratively as many ideas
as possible at high fidelity. Present.
Critique. Repeat.

59. Make decisions. Realize design against
constraints. Craft the details in sketch form,
informally present to team members individually.

63. Scalable Page Structure &
Reusable Interaction Design

64. “I’m always puzzled by designers who are dogmatic
about their documentation formats, tools, and
techniques. Designers need to build a toolbox of
techniques because every job needs a different
approach. The right approach for your job depends
on so many factors”
- Dan Brown
https://medium.com/eightshapes-llc/in-search-of-the-design-documentation-unicorn-3b35a6680202

68. Every degree of abstraction away from the product
in it’s finalized state carries cognitive cost.

73. Structural IA

74. Structural IA
Visual Design

75. Structural IA
Visual Design
Interaction Design

76. Structural IA
Visual Design
Interaction Design
Content

77. Structural IA
Visual Design
Interaction Design
Content

80. Efficient Visual Design Creation
and Effective Feedback

84. Design Wireframe / Dev

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

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

92. 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;

93. How can you make your team’s
journey more enjoyable?

94. Thank you!
@niceux
jon@niceux.com
“All I see is what I could have
done better. I can’t help it.”
- Frank Gehry