Communicating Design In a Multiscreen World

Transcript

1. Communicating
   Design
   in a MULTISCREEN World
   Dennis Kardys, Design Director, WSOL | @dkardys #wvpdx
   

   View Slide

2. “We want a
   responsive design!”
   

   View Slide

3. “We want a
   responsive design!”
   ...So that our site will work
   on my [boss’s] iPhone...
   

   View Slide

4. NO! NOT JUST ONE SCREEN—
   

   View Slide

5. ALLS THE SCREENS!
   

   View Slide

6. It’s a good time to
   be a designer...
   

   View Slide

7. But WILL the
   People know
   to click it?
   

   View Slide

8. View Slide

9. ...a good time to be in
   the deliverables
   business?
   

   View Slide

10. Makers wanna
    make...
    not document
    

    View Slide

11. How much
    of the design process
    is expendable?
    

    View Slide

12. “The purpose of a design
    artifact, whether a
    wireframe, prototype or
    sketch, is to illustrate our
    thinking.”
    —Robert Hoekman
    

    View Slide

13. designing for lots of screens...
    IT’S COMPLICATED, YO!
    

    View Slide

14. A single user task,
    represented by a series
    of actions across time
    

    View Slide

15. A single user task,
    represented by a series
    of actions across time
    

    View Slide

16. 65% 60% 4%
    source: Think With Google, “The New Multi Screen World” - http://bit.ly/Qivs98
    multiscreen behavior
    ~ search ~
    

    View Slide

17. A single user task,
    represented by a series
    of actions across
    screens and time
    

    View Slide

18. A single user task,
    represented by a series
    of actions across
    screens and time
    

    View Slide

19. new challenges demand
    a Flexible Workflow
    & Adaptive Process
    

    View Slide

20. Facilitation
    Setting expectations
    

    View Slide

21. CC licence: flickr Mitchell Joyce https://flic.kr/p/6TYNf1
    Alleviate concerns...
    

    View Slide

22. CC licence: flickr Mitchell Joyce https://flic.kr/p/6TYNf1
    Foster healthy mindsets.
    

    View Slide

23. Designing in
    the open...
    http://foodbank.bradfrostweb.com/timeline/
    

    View Slide

24. Provides a
    line of sight
    

    View Slide

25. Provides a
    line of sight
    

    View Slide

26. Setting Guidelines
    • Design Studio Methods
    • Design Mini Brief
    • Structured Rules for Critique
    

    View Slide

27. View Slide

28. View Slide

29. Totally arbitrary
    re-prioritization of
    objectives incoming!
    

    View Slide

30. The purpose of a design
    artifact can also be to
    transform our thinking
    

    View Slide

31. Participatory Sketching
    Getting stubborn ideas out of people’s
    heads and onto paper.
    

    View Slide

32. View Slide

33. View Slide

34. View Slide

35. Don’t Pause for Perfection
    (iterate for improvement)
    

    View Slide

36. Experiential
    Prototyping
    

    View Slide

37. Comics & Storyboards
    Great for getting to people focus on goals and
    scenarios instead of features and screens.
    

    View Slide

38. Experience Maps
    Outlining the various points where users interact with a
    product or service, across channels. Can weave together
    personas, scenarios, and tasks.
    

    View Slide

39. Role Playing / Bodystorming
    Performing the experience
    http://www.flickr.com/photos/xian/3763797756/in/photostream/
    http://www.flickr.com/photos/nlireland/5963130143/
    

    View Slide

40. http://signalvnoise.com/posts/1926-a-shorthand-for-designing-ui-flows
    A Shorthand for UI Flows
    Build a sense of place across screens by building
    consistency in what the user can see and do.
    

    View Slide

41. Stories help you find
    gaps in the experience.
    http://www.flickr.com/photos/osucommons/3385601567/
    

    View Slide

42. 1. Consistent
    2. Convenient
    3. Connected
    4. Contextual
    

    View Slide

43. Tactical
    Prototyping
    

    View Slide

44. Systems can be
    deconstructed.
    Systems have rules.
    

    View Slide

45. Design Systems Breed
    • Structured Content
    • Modular Markup & CSS
    • More consistent UI
    

    View Slide

46. Friction in the process between
    design and dev teams are often
    the result of poorly defined
    design systems.
    

    View Slide

47. Style Exploration
    (UI lead)
    Content / Layout/IxD
    Exploration
    (interaction/IA lead/front end)
    High Fidelity
    (all hands on deck)
    Explore in tandem
    Discuss In Isolation Discuss In Isolation
    Evaluate in Context
    

    View Slide

48. Visual Inventory
    Component Audit
    Element Collage
    Style Guide
    Explore in tandem
    Content Inventory
    Page Tables
    Content Reference
    Low-fi Prototypes
    Component Library
    High Fidelity
    Prototype
    Refine in context
    

    View Slide

49. KJ Method
    An efficient way to exhaust content ideas or goals and
    arrive at consensus when dealing with large or divided
    groups.
    http://www.netmagazine.com/features/how-run-effective-meeting
    

    View Slide

50. Paper Prototypes
    Quickly validate and adjust ideas while considering
    considering context and ergonomics
    

    View Slide

51. Page Tables / Content Outlines
    Worksheets for evaluating, prioritizing and structuring
    content. Can map to how content will be structured
    within a content management system.
    

    View Slide

52. Component Audit
    What components are existing? What components are
    needed? What components are redundant?
    

    View Slide

53. View Slide

54. Content Reference Wireframes
    Plotting template structure and content zones.
    

    View Slide

55. Content Reference Wireframes
    Plotting template structure and content zones.
    BETTER
    IN
    THE BROW
    SER!
    

    View Slide

56. Low Fidelity HTML Prototypes
    

    View Slide

57. Annotations for HTML
    Wireframes
    Elliance Metaframe: https://github.com/elliance/metaframe
    

    View Slide

58. View Slide

59. evaluating decisions in their
    actual medium
    

    View Slide

60. Visual Inventory - concept
    Inspirational screenshots to help gauge art direction
    

    View Slide

61. Visual Inventory - concept
    Inspirational screenshots to help gauge art direction
    

    View Slide

62. Visual Inventory - color
    

    View Slide

63. Visual Inventory - color
    

    View Slide

64. Visual Inventory - type
    

    View Slide

65. Visual Inventory - type
    

    View Slide

66. Element Collage
    Vignettes that explore style in context of key components
    

    View Slide

67. Element Collage
    Vignettes that explore style in context of key components
    

    View Slide

68. Style Prototype / Guide
    Basic elements with applied visual style
    

    View Slide

69. Component Guide
    Components + design system rules
    

    View Slide

70. Component Guide
    Components + design system rules
    

    View Slide

71. View Slide

72. View Slide

73. High Fidelity Prototype
    

    View Slide

74. High Fidelity Prototype
    

    View Slide

75. Learn only what you need
    to learn to move on...
    

    View Slide

76. Facilitation
    Pacing & Preparation
    

    View Slide

77. View Slide

78. Crossing the
    Chasm
    

    View Slide

79. Pace The
    Conversation
    Focus on one thing at a time
    http://www.flickr.com/photos/nlireland/5963130143/
    

    View Slide

80. Build Momentum
    distinguish between
    learning & reviewing.
    

    View Slide

81. Project paralysis...
    

    View Slide

82. Prime Time
    continually priming and
    reinforcing expectations
    _____________
    the right conversation the right
    time
    

    View Slide

83. PREPARING
    for what’s to come
    

    View Slide

84. How much
    documentation?
    

    View Slide

85. Lifespan (disposable or living)
    Proximity (immediate, long term)
    Purpose (learning or specify)
    

    View Slide

86. Create Props
    NOT
    Paperwork
    

    View Slide

87. UX is a result...
    not a document.
    

    View Slide

88. YOU GOT THIS, DUDE!
    

    View Slide

89. THANKS!
    Dennis Kardys
    design director |
    book: mobile-web-triage.com
    @dkardys
    

    View Slide