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

    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