The Other Side of Empathy

Given at EmpireJS 2015, this talk expands the original idea of The Other Side of Empathy spoken about at previous meetups and gives real life examples of using empathy as we work together on making awesome products for the web and beyond.

The original essay can be read here: https://the-pastry-box-project.net/nick-hehr/2014-july-5

Transcript

1. The Other Side of Empathy
   

   View Slide

2. View Slide

3. Who Am I?
   

   View Slide

4. Who Am I?
   • Nick Hehr
   • Front-End Developer
   • Disney Fan
   • Bouldering Enthusiast
   • Human
   

   View Slide

5. View Slide

6. Why Do I Care?
   

   View Slide

7. Why Do I Care?
   Psychology & Leadership Degree
   Constant Collaboration w/ Designers & Devs
   I Community
   

   View Slide

8. View Slide

9. Who Should Care?
   

   View Slide

10. Everybody
    

    View Slide

11. View Slide

12. What Is Empathy?
    

    View Slide

13. What Is Empathy?
    “The ability to understand and share the feelings of another.”
    - New Oxford American Dictionary
    

    View Slide

14. What Is Empathy?
    “Putting yourself in someone else’s shoes.”

    

    View Slide

15. What Is Empathy?
    “Seeing the world through the eyes of someone else.”

    

    View Slide

16. Where Did
    The Other Side of Empathy
    Come From?
    

    View Slide

17. Where Did It Come From?
    • Using Twitter
    • Snap Judgements
    • Mob Mentality
    • Design Orlando
    • The Pastry Box Project
    

    View Slide

18. Breakdown
    

    View Slide

19. Breakdown
    Context
    Constructive Feedback
    Communication
    Caring
    

    View Slide

20. Context
    

    View Slide

21. – dictionary.com
    “The interrelated conditions in which something exists.”
    

    View Slide

22. The internal and external factors that influence
    the decisions we make and actions we take.
    

    View Slide

23. How It Relates
    

    View Slide

24. How It Relates
    • No One is Un-Opinionated
    • We All Have Biases
    • Listening is Key
    • “Why?”
    

    View Slide

25. View Slide

26. Set The Example
    

    View Slide

27. Example
    User Stories with Gherkin
    

    View Slide

28. –Wikipedia
    “It captures the ‘who’, ‘what’, and ‘why’ of a
    requirement in a simple, concise way…”
    

    View Slide

29. Remembering Context
    

    View Slide

30. Remembering Context
    • Take A Deep Breath
    • Clear Your Mind
    • Ask “Why?” (sincerely)
    • Listen
    

    View Slide

31. Constructive Feedback
    

    View Slide

32. - dictionary.com
    “The return of information about the result of a
    process that helps to develop or improve that
    process or product.”
    

    View Slide

33. How It Relates
    

    View Slide

34. How It Relates
    “If you don’t have anything nice to say, then don’t
    say anything at all.”
    

    View Slide

35. View Slide

36. How It Relates
    “If you don’t have anything nice to say, then don’t
    say anything at all.”
    

    View Slide

37. How It Relates
    “If you don’t have anything nice to say, then don’t
    say anything at all.”
    

    View Slide

38. How It Relates
    “If you don’t have anything constructive to say,
    then don’t say anything at all.”
    

    View Slide

39. What about negative feedback?
    

    View Slide

40. View Slide

41. Good Feedback > 140 characters
    

    View Slide

42. View Slide

43. Mutually Agreed Upon
    Set Up Expectations
    Open Space
    Remember Context
    

    View Slide

44. Example
    Code Reviews
    

    View Slide

45. -Wikipedia
    “It is intended to find and fix mistakes
    overlooked in the initial development phase,
    improving both the overall quality of software
    and the developers' skills.”
    

    View Slide

46. Encouraging
    Constructive Feedback
    

    View Slide

47. View Slide

48. https://github.com/atom/atom/blob/master/
    CONTRIBUTING.md
    

    View Slide

49. Communication
    

    View Slide

50. –New Oxford American Dictionary
    “The successful conveying or sharing of ideas
    and feelings between people.”
    

    View Slide

51. How It Relates
    

    View Slide

52. How It Relates
    • What We Say
    • How We Say It
    • Where We Say It
    

    View Slide

53. Communication is a broad area that
    encompasses how we interact with
    each other.
    

    View Slide

54. “I” Statements
    For Giving Constructive Feedback
    For Getting Context
    

    View Slide

55. “You” Statements
    For Getting Context
    For Giving Constructive Feedback
    

    View Slide

56. Example
    Switching Between
    Platforms
    

    View Slide

57. How We Communicate
    • General = HipChat
    • Standups = Hangouts / In-Person
    • Recorded Discussions = GitHub Issues & Trello Cards
    • Event Planning = Email
    

    View Slide

58. Creating
    Communication
    

    View Slide

59. View Slide

60. View Slide

61. View Slide

62. Caring
    

    View Slide

63. –New Oxford American Dictionary
    “Feeling of concern or interest; attach
    importance to something; look after and
    provide the needs of.”
    

    View Slide

64. How It Relates
    

    View Slide

65. How It Relates
    Caring is Sharing
    And Listening
    And Understanding
    

    View Slide

66. View Slide

67. How Much Do You Care?
    

    View Slide

68. Do You Care Enough…
    • To Write A Blog Post?
    • To File An Issue?
    • To Send An Email?
    • To Record A Screencast?
    • To Submit A Pull Request?
    

    View Slide

69. – Yoda
    “Don’t give in to hate. It leads to the Dark Side.”
    

    View Slide

70. Example
    Internal Documentation
    

    View Slide

71. Documentation Matters
    • Wikis
    • Code Comments
    • Styleguides
    • Pattern Libraries
    • README.md
    

    View Slide

72. Exemplifying Caring
    

    View Slide

73. Mentoring Matters
    • Remember Starting Out?
    • Did You Have A Mentor?
    • Did You Want A Mentor?
    • Do You Want To Learn?
    

    View Slide

74. What Empathy Is Not
    

    View Slide

75. What Empathy Is Not
    • Pat on the Back
    • “Cheer Up.”
    • Empty Conversations
    • Sympathy
    

    View Slide

76. https://www.flickr.com/photos/rosenfeldmedia/
    15491807403/in/set-72157649603145899
    

    View Slide

77. Contributing
    

    View Slide

78. Contributing
    • Just Listen For A Day
    • Apply The Examples
    • Start Off Small
    • Remain Open to Sharing
    

    View Slide

79. “It still sounds too hard.”
    

    View Slide

80. View Slide

81. Resources
    

    View Slide

82. Resources
    hipsterbrown.com/empathy
    

    View Slide

83. Thank You
    

    View Slide