A New Toolbox: Artifact Conference, Providence 2013

Kevin and Sophie reveal Happy Cog’s design process through their experience building a responsive site from beginning to end, including: kicking off the project, the collaborative design process, and the tools they tweaked along the way. Find out what worked and what they learned. In the end, it should be clear that this is a time for experimentation and finding new approaches for new tasks.

Transcript

1. A NEW
   TOOLBOX
   SOPHIE SHEPHERD & KEVIN SHARON
   

   View Slide

2. Howd
   

   View Slide

3. ATX
   

   View Slide

4. We don’t know what we’re doing.
   Disclaimer
   

   View Slide

5. Artifact:
   A New Toolbox
   

   View Slide

6. A New Toolbox
   Research
   

   View Slide

7. A New Toolbox
   Communication
   

   View Slide

8. A New Toolbox
   Design
   

   View Slide

9. Research:
   Why before what
   

   View Slide

10. Research
    …for design to truly be great, [research]
    needs to be built into your projects
    from the very beginning.”
    —Mike Montiero
    “
    

    View Slide

11. “How do you make a chair?”
    

    View Slide

12. “Go make mistakes”
    

    View Slide

13. This sucks.
    

    View Slide

14. We built it, launched it, it sucks,
    and no one cares. Fix it?
    

    View Slide

15. Rush to MVP
    

    View Slide

16. That’s a whole ‘nuther talk.
    

    View Slide

17. Design Research is easy.
    

    View Slide

18. Interviews
    

    View Slide

19. Interviews
    Stakeholders
    

    View Slide

20. Interviews
    Users
    

    View Slide

21. Ethnio
    ethn.io/
    

    View Slide

22. Design Values Survey
    

    View Slide

23. The Design Values Survey
    Start a conversation
    

    View Slide

24. The Design Values Survey
    Ask dumb questions
    

    View Slide

25. The Design Values Survey
    Reveal your preconceptions
    

    View Slide

26. The Design Values Survey
    Not everyone will agree
    

    View Slide

27. “Should the new site look like a
    magazine or a newspaper?”
    The Design Values Survey
    

    View Slide

28. “Should the new look reflect the
    aesthetics of [ ]?”
    The Design Values Survey
    

    View Slide

29. 10 Second Gut Check
    

    View Slide

30. 10 Second Gut Check
    Benchmark
    

    View Slide

31. 10 Second Gut Check
    

    View Slide

32. 10 Second Gut Check
    Define taste
    

    View Slide

33. 10 Second Gut Check
    Generate content ideas
    

    View Slide

34. Personality Test
    

    View Slide

35. Personality Test
    Finding out who your
    customers are is only half the
    question. You also have to
    understand who you are.”
    —Aarron Walter
    “
    

    View Slide

36. What is the personality of a site?
    Voice
    

    View Slide

37. What is the personality of a site?
    Tone
    

    View Slide

38. What is the personality of a site?
    Feel /Mood
    

    View Slide

39. View Slide

40. View Slide

41. View Slide

42. View Slide

43. View Slide

44. Communication:
    Playing nice with
    others
    

    View Slide

45. Design is a service
    

    View Slide

46. Business
    Goals User Needs
    Service
    

    View Slide

47. Business Needs
    Project goals
    

    View Slide

48. Business Needs
    Requirements
    

    View Slide

49. Business Needs
    Technology
    

    View Slide

50. User needs
    Who is the audience?
    

    View Slide

51. User needs
    Is there a new audience?
    

    View Slide

52. User needs
    How do other people reach
    this audience?
    

    View Slide

53. Client Capabilities
    Client design team
    

    View Slide

54. Client Capabilities
    Photography, Video, Infographics
    

    View Slide

55. Oh no, a dirty word:
    Clients
    

    View Slide

56. You get the clients you deserve
    

    View Slide

57. Client Communication
    “You can’t use that shade of blue… “
    

    View Slide

58. Client Communication
    “Let’s make the logo bigger“
    

    View Slide

59. Client Communication
    “Our CEO’s favorite font is Arial“
    

    View Slide

60. The Elusive “Fold”
    ✄
    

    View Slide

61. weenudge.com/thefold/
    

    View Slide

62. This sucks.
    

    View Slide

63. It’s not a collaboration
    if you don’t say “no.”
    

    View Slide

64. “When are you going to show me
    something to look at?”
    

    View Slide

65. Earl esig
    

    View Slide

66. View Slide

67. Client Feedback
    Restate the goals.
    

    View Slide

68. Client Feedback
    What answers to you need to
    move to the next step?
    

    View Slide

69. A Designer’s Job
    

    View Slide

70. Responsive
    Web Design
    

    View Slide

71. UX
    Concept Board
    Graphic Design Front-End Dev
    Sub Pages
    Traditional Process
    Research QA
    Designer
    

    View Slide

72. UX
    Graphic Design
    Front-End Dev
    Updated Process
    Research
    QA
    Style Guide
    Designer
    

    View Slide

73. Most of what I do
    doesn’t look like a website.
    

    View Slide

74. Atomic Design
    

    View Slide

75. Atomic Design
    

    View Slide

76. Start With Content
    • What did we learn from the research?
    • Define Content Needs
    

    View Slide

77. Start With Content
    • Sketch
    • Collaborate
    • Tool to prompt conversation amongst teams
    

    View Slide

78. Content as Modules
    

    View Slide

79. Modules as Hierarchy
    0
    4
    5
    3
    1
    2
    Delete
    Utmost Importance
    Not needed/
    Can’t Maintain
    Nice to Have
    Maybe, but not
    important
    Requested
    

    View Slide

80. Modules as Hierarchy
    0
    4
    2
    5
    3
    3
    1
    2
    5
    

    View Slide

81. Modules as Prototypes
    

    View Slide

82. Modules as Requirements
    • Functional Requirements
    • Technical Requirements
    • Content Requirements
    

    View Slide

83. Modules as Design Plan
    • Which pages have unique layouts?
    • Which modules can be designed
    independent of layout?
    

    View Slide

84. Graphic Design
    Styl Boards
    Full Page Comps
    Big Screen
    Small Screen
    PSD vs. Browser
    

    View Slide

85. “You Can’t Have Happy
    Accidents in the Browser
    — Mark Boulton
    

    View Slide

86. Design Tipping Point
    When is it more efficient to move over to
    working in the browser?
    

    View Slide

87. QA
    Designer finds bug ➔ Files bug in Sifter ➔
    Developer has question ➔ developer fixes
    bug ➔ assign back to designer ➔ designer
    looks at page to confirm ➔ designer closes
    ticket
    Designer Finds Bug ➔ Designer Fixes Bug
    

    View Slide

88. Style Guide
    Design
    System
    Front-End
    Code
    

    View Slide

89. Style Guide
    Allows designer to see design
    system through the lens of
    front end code.
    

    View Slide

90. Tool for Clients
    • Module Guide
    • Visual Reference
    • Technical Reference
    • Content Guide
    

    View Slide

91. Experiment
    

    View Slide

92. April 1st, 2012
    

    View Slide

93. You’re going to design this site
    using Keynote.”
    —Kevin Sharon
    “
    

    View Slide

94. —Sophie Shepherd (in her head)
    Is this an April Fool’s joke?”
    “
    He’s serious. Deep breathes.”
    “
    Like, Keynote Keynote?”
    “
    

    View Slide

95. View Slide

96. Photoshop ≠ Browser
    • Wrapping Text
    • Multiple Widths
    • Rounded Corners
    • Consistent Type
    

    View Slide

97. Tools ≠ Precious
    There is no “right” way of doing this stuff.
    

    View Slide

98. Design:
    The details matter
    

    View Slide

99. “Designers”
    

    View Slide

100. Don’t be the “designer (who codes).”
     Be a designer with a bigger toolbox.
     

     View Slide

101. This stuff ain’t easy
     

     View Slide

102. FAIL. You’re doing it wrong… “
     —the twitters
     The one truth
     “
     #jerks
     

     View Slide

103. That’
     Bullshit
     

     View Slide

104. No one knows what they’re doing.
     

     View Slide

105. Empath
     

     View Slide

106. UX is everyone’s job.
     

     View Slide

107. The one true process is…
     

     View Slide

108. It all depends.
     

     View Slide

109. Process is decided by
     • The required
     deliverables
     • The expected
     outcomes
     • The client’s needs
     • The client’s
     personality
     • Audience needs
     • Budget
     • Timeline
     • Project teams
     • Time zones
     • Hurricanes
     • The moon and
     tides
     

     View Slide

110. Wireframes
     

     View Slide

111. whiteboard
     Wireframes
     

     View Slide

112. Wireframes
     

     View Slide

113. Designer
     =
     Communicator
     

     View Slide

114. Don’t make easy the goal.
     

     View Slide

115. + +
     How do you scramble an egg?
     

     View Slide

116. youtu.be/PUP7U5vTMM0
     

     View Slide

117. Thanks!
     Kevin Sharon
     @kevinsharon
     Sophie Shepherd
     @sophshepherd
     

     View Slide