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
2. Howd
3. ATX
4. We don’t know what we’re doing. Disclaimer
5. Artifact: A New Toolbox
6. A New Toolbox Research
7. A New Toolbox Communication
8. A New Toolbox Design
9. Research: Why before what
10. Research …for design to truly be great, [research] needs to be built into your projects from the very beginning.” —Mike Montiero “
11. “How do you make a chair?”
12. “Go make mistakes”
13. This sucks.
14. We built it, launched it, it sucks, and no one cares. Fix it?
15. Rush to MVP
16. That’s a whole ‘nuther talk.
17. Design Research is easy.
18. Interviews
19. Interviews Stakeholders
20. Interviews Users
21. Ethnio ethn.io/
22. Design Values Survey
23. The Design Values Survey Start a conversation
24. The Design Values Survey Ask dumb questions
25. The Design Values Survey Reveal your preconceptions
26. The Design Values Survey Not everyone will agree
27. “Should the new site look like a magazine or a newspaper?” The Design Values Survey
28. “Should the new look reflect the aesthetics of [ ]?” The Design Values Survey
29. 10 Second Gut Check
30. 10 Second Gut Check Benchmark
31. 10 Second Gut Check
32. 10 Second Gut Check Define taste
33. 10 Second Gut Check Generate content ideas
34. Personality Test
35. Personality Test Finding out who your customers are is only half the question. You also have to understand who you are.” —Aarron Walter “
36. What is the personality of a site? Voice
37. What is the personality of a site? Tone
38. What is the personality of a site? Feel /Mood
44. Communication: Playing nice with others
45. Design is a service
46. Business Goals User Needs Service
47. Business Needs Project goals
48. Business Needs Requirements
49. Business Needs Technology
50. User needs Who is the audience?
51. User needs Is there a new audience?
52. User needs How do other people reach this audience?
53. Client Capabilities Client design team
54. Client Capabilities Photography, Video, Infographics
55. Oh no, a dirty word: Clients
56. You get the clients you deserve
57. Client Communication “You can’t use that shade of blue… “
58. Client Communication “Let’s make the logo bigger“
59. Client Communication “Our CEO’s favorite font is Arial“
60. The Elusive “Fold” ✄
61. weenudge.com/thefold/
62. This sucks.
63. It’s not a collaboration if you don’t say “no.”
64. “When are you going to show me something to look at?”
65. Earl esig
67. Client Feedback Restate the goals.
68. Client Feedback What answers to you need to move to the next step?
69. A Designer’s Job
70. Responsive Web Design
71. UX Concept Board Graphic Design Front-End Dev Sub Pages Traditional Process Research QA Designer
72. UX Graphic Design Front-End Dev Updated Process Research QA Style Guide Designer
73. Most of what I do doesn’t look like a website.
74. Atomic Design
75. Atomic Design
76. Start With Content • What did we learn from the research? • Define Content Needs
77. Start With Content • Sketch • Collaborate • Tool to prompt conversation amongst teams
78. Content as Modules
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
80. Modules as Hierarchy 0 4 2 5 3 3 1 2 5
81. Modules as Prototypes
82. Modules as Requirements • Functional Requirements • Technical Requirements • Content Requirements
83. Modules as Design Plan • Which pages have unique layouts? • Which modules can be designed independent of layout?
84. Graphic Design Styl Boards Full Page Comps Big Screen Small Screen PSD vs. Browser
85. “You Can’t Have Happy Accidents in the Browser — Mark Boulton
86. Design Tipping Point When is it more efficient to move over to working in the browser?
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
88. Style Guide Design System Front-End Code
89. Style Guide Allows designer to see design system through the lens of front end code.
90. Tool for Clients • Module Guide • Visual Reference • Technical Reference • Content Guide
91. Experiment
92. April 1st, 2012
93. You’re going to design this site using Keynote.” —Kevin Sharon “
94. —Sophie Shepherd (in her head) Is this an April Fool’s joke?” “ He’s serious. Deep breathes.” “ Like, Keynote Keynote?” “
96. Photoshop ≠ Browser • Wrapping Text • Multiple Widths • Rounded Corners • Consistent Type
97. Tools ≠ Precious There is no “right” way of doing this stuff.
98. Design: The details matter
99. “Designers”
100. Don’t be the “designer (who codes).” Be a designer with a bigger toolbox.
101. This stuff ain’t easy
102. FAIL. You’re doing it wrong… “ —the twitters The one truth “ #jerks
103. That’ Bullshit
104. No one knows what they’re doing.
105. Empath
106. UX is everyone’s job.
107. The one true process is…
108. It all depends.
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
110. Wireframes
111. whiteboard Wireframes
112. Wireframes
113. Designer = Communicator
114. Don’t make easy the goal.
115. + + How do you scramble an egg?
116. youtu.be/PUP7U5vTMM0
117. Thanks! Kevin Sharon @kevinsharon Sophie Shepherd @sophshepherd