Upgrade to Pro — share decks privately, control downloads, hide ads and more …

A New Toolbox: Artifact Conference, Providence 2013

Kevin Sharon
November 05, 2013

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.

Kevin Sharon

November 05, 2013
Tweet

More Decks by Kevin Sharon

Other Decks in Design

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

  39. None
  40. None
  41. None
  42. None
  43. None
  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

  66. None
  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?” “
  95. None
  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