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

DevRelCon London 2019 - Developer Experience Workshop

DevRelCon London 2019 - Developer Experience Workshop

Cristiano Betta

December 09, 2019
Tweet

More Decks by Cristiano Betta

Other Decks in Technology

Transcript

  1. Developer Experience
    December 9th, 2̸19
    hoopy.io

    View full-size slide

  2. Welcome
    hoopy.io

    View full-size slide

  3. Cristiano Betta
    Associate Consultant @ Hoopy
    Senior Developer Advocate @ Box
    hoopy.io
    Senior Developer Advocate @ Box
    Alyss Noland

    View full-size slide

  4. Agenda
    • Defining Developer Experience
    • Developer Experience Journey
    • Documentation Types
    • Break
    • Developer Life Cycle
    • Friction logs
    • Operations
    hoopy.io

    View full-size slide

  5. Goals
    • Understand what makes for a great
    Developer Experience
    • Train your eye to spot bad Developer
    Experience
    • Provide you with the vocabulary to
    explain why something is bad DX
    • Inform what automation and
    instrumentation can be created to scale
    a developer experience hoopy.io

    View full-size slide

  6. Theory
    Exercises: Analysis
    +
    hoopy.io

    View full-size slide

  7. Ask me anything
    hoopy.io

    View full-size slide

  8. Oh, hi!
    hoopy.io

    View full-size slide

  9. Developer Experience
    hoopy.io

    View full-size slide

  10. What is DX?
    hoopy.io

    View full-size slide

  11. “Developer experience is an extension of UX that
    focuses on the developer, who can either be the
    intermediary or, as is the case with many APIs, the end
    user. Whether or not you focus on DX design, your
    developers are always experiencing your API, and that
    experience may either be positive or negative.”
    - Jennifer Riggins | @jkriggins
    hoopy.io

    View full-size slide

  12. A platform
    A successful
    user

    View full-size slide

  13. A developer platform
    A successful
    developer

    View full-size slide

  14. A developer platform
    A successful
    developer
    A fresh new
    developer

    View full-size slide

  15. A developer platform
    A fresh new
    developer
    Long
    term success
    A successful
    developer

    View full-size slide

  16. Developer Experience
    1st site
    visit
    Successful
    integration
    Outreach Advocacy

    View full-size slide

  17. Developer Experience
    1st site
    visit
    Successful
    integration
    Advocacy
    Outreach
    • Hackathons
    • Conferences
    • Talks
    • Blog posts
    • Tutorials
    Developer Outreach

    View full-size slide

  18. Developer Experience
    1st site
    visit
    Successful
    integration
    Outreach Advocacy

    View full-size slide

  19. Developer Experience
    1st site
    visit
    Successful
    integration
    Outreach Advocacy
    • Support
    • Feedback
    • Office hours
    • Beta Programmes
    Developer Advocacy

    View full-size slide

  20. Developer Experience
    1st site
    visit
    Successful
    integration
    Outreach Advocacy

    View full-size slide

  21. APIs + SDKs
    Docs + Onboarding

    View full-size slide

  22. APIs + SDKs
    Docs + Onboarding

    View full-size slide

  23. APIs + SDKs
    Docs + Onboarding
    + External Developers

    View full-size slide

  24. Usability + External Developers

    View full-size slide

  25. “Simple”

    View full-size slide

  26. Discoverable
    Forgiving
    Learnable
    Correct
    Predictable
    Usability

    View full-size slide

  27. Correct
    hoopy.io

    View full-size slide

  28. Predictable
    hoopy.io

    View full-size slide

  29. Cognitive Load
    hoopy.io

    View full-size slide

  30. Cognitive Overload
    hoopy.io

    View full-size slide

  31. Cognitive
    Overload

    View full-size slide

  32. What can I do?
    What will happen?
    Will I break anything?
    Can I change my decision?
    hoopy.io

    View full-size slide

  33. _
    Your name*
    hoopy.io

    View full-size slide

  34. Who can see this?
    Your name*
    hoopy.io

    View full-size slide

  35. Can I change this later?
    Your name*
    hoopy.io

    View full-size slide

  36. What can I do?
    What will happen?
    Will I break anything?
    Can I change my decision?
    hoopy.io

    View full-size slide

  37. Discoverable
    hoopy.io

    View full-size slide

  38. Where am I?
    What can I do?
    Where can I go?
    Where did I come from?
    hoopy.io

    View full-size slide

  39. “Scent of information”
    hoopy.io

    View full-size slide

  40. Forgiving
    hoopy.io

    View full-size slide

  41. Learnable
    hoopy.io

    View full-size slide

  42. Usability
    Discoverable
    Forgiving
    Learnable
    Correct
    Predictable

    View full-size slide

  43. Usability
    hoopy.io

    View full-size slide

  44. Exercise
    hoopy.io

    View full-size slide

  45. Are there any usability issues?
    What type of usability problems are they?
    Discoverability, Predictability, Correctness, Learnability
    Or Forgiveness?
    What tricks can you see that make things
    more learnable, discoverable, etc?
    Teams of 2
    Sign up for each other’s products

    View full-size slide

  46. Usability
    Discoverable
    Forgiving
    Learnable
    Correct
    Predictable
    hoopy.io

    View full-size slide

  47. Usability
    hoopy.io

    View full-size slide

  48. Usability + External Developers
    hoopy.io

    View full-size slide

  49. External Developers
    hoopy.io

    View full-size slide

  50. External Developers
    hoopy.io

    View full-size slide

  51. Understanding Developers
    hoopy.io

    View full-size slide

  52. Understanding Developers

    View full-size slide

  53. Understanding Developers Documentation Types

    View full-size slide

  54. Understanding Developers Documentation Types
    Developer Journey

    View full-size slide

  55. Understanding Developers Documentation Types
    Developer Journey
    Wider Developer Lifecycle

    View full-size slide

  56. Understanding Developers Documentation Types
    Developer Journey
    Friction Logging
    Wider Developer Lifecycle

    View full-size slide

  57. Understanding Developers Documentation Types
    Developer Journey
    Friction Logging
    Wider Developer Lifecycle
    Operationalization

    View full-size slide

  58. hoopy.io
    Understanding Developers

    View full-size slide

  59. Understanding Developers
    • Enterprise Developers
    • Startup Developers
    • Hackers
    • Junior
    • N00bs
    • Senior

    View full-size slide

  60. Developer Drivers
    • Market
    • Organisation
    • Technical
    • Developer

    View full-size slide

  61. Developer Drivers
    • What we’re trying to understand
    • What we’re trying to overcome

    View full-size slide

  62. Developer Drivers
    • Product Experience
    • Industry Experience
    • Technical Experience
    • Life Experience
    • Motivation

    View full-size slide

  63. Developer Attributes
    • Experience
    • Motivation

    View full-size slide

  64. Developer Journey
    Experience
    Motivation

    View full-size slide

  65. Experience
    Motivation
    Your CTO
    Developer Journey

    View full-size slide

  66. Experience
    Motivation
    Your CTO
    Starter
    Developer Journey

    View full-size slide

  67. Experience
    Motivation
    Your CTO
    Convert
    Developer Journey
    Starter

    View full-size slide

  68. Experience
    Motivation
    Your CTO
    Convert
    Try Now
    Developer Journey
    Starter

    View full-size slide

  69. Experience
    Motivation
    Your CTO
    Convert
    Try Now
    Impl.
    Developer Journey
    Starter

    View full-size slide

  70. Experience
    Motivation
    Expert
    Convert
    Try Now
    Impl.
    Developer Journey
    Starter

    View full-size slide

  71. Experience
    Motivation
    Developer Journey

    View full-size slide

  72. Understanding Developers

    View full-size slide

  73. Understanding Developers Documentation Types
    Developer Journey

    View full-size slide

  74. Documentation Types
    hoopy.io

    View full-size slide

  75. Exercise
    hoopy.io

    View full-size slide

  76. What types of documentation can you recognise?
    For what level of experience and motivation
    is that documentation intended?
    How does the documentation
    flow from one type to the other? (Bonus)
    Using the same products you looked at before

    View full-size slide

  77. Documentation Types
    hoopy.io

    View full-size slide

  78. Documentation Types
    • Get Started Guides
    • QuickStarts
    • Tutorials
    • Guides
    • Samples
    • Demos
    • Reference
    • Use Cases
    • Examples
    • Libraries & SDKs

    View full-size slide

  79. Documentation Types
    • Get Started Guides
    • QuickStarts
    • Tutorials
    • Guides
    • Samples
    • Demos
    • Reference
    • Use Cases
    • Examples
    • Libraries & SDKs

    View full-size slide

  80. Documentation Types
    • Get Started Guides
    • QuickStarts
    • Tutorials
    • Guides
    • Samples
    • Demos
    • Reference
    • Use Cases
    • Examples
    • Libraries & SDKs

    View full-size slide

  81. Documentation Types
    • Get Started Guides
    • QuickStarts
    • Tutorials
    • Guides
    • Samples
    • Demos
    • Reference
    • Use Cases
    • Examples
    • Libraries & SDKs

    View full-size slide

  82. Documentation Types
    Experience
    Motivation

    View full-size slide

  83. Reference
    Experience
    Motivation
    hoopy.io

    View full-size slide

  84. Reference
    Experience
    Motivation
    hoopy.io

    View full-size slide

  85. Reference
    Exploration
    Experience
    Motivation
    hoopy.io

    View full-size slide

  86. Reference
    Exploration
    Experience
    Motivation
    hoopy.io

    View full-size slide

  87. Getting Started
    Reference
    Exploration
    Experience
    Motivation
    hoopy.io

    View full-size slide

  88. Further Guidance
    Getting Started
    Reference
    Exploration
    Experience
    Motivation
    hoopy.io

    View full-size slide

  89. Further Guidance
    Getting Started
    Reference
    Exploration
    Experience
    Motivation
    hoopy.io

    View full-size slide

  90. Further Guidance
    Getting Started
    Reference
    Exploration
    Experience
    Motivation
    hoopy.io

    View full-size slide

  91. Further Guidance
    Getting Started Reference
    Exploration
    Developer Journey

    View full-size slide

  92. Understanding Developers Documentation Types
    Developer Journey

    View full-size slide

  93. Break
    hoopy.io

    View full-size slide

  94. Agenda
    • Defining Developer Experience
    • Developer Experience Journey
    • Documentation Types
    • Break
    • Developer Life Cycle
    • Friction logs
    • Operations
    hoopy.io

    View full-size slide

  95. Break
    hoopy.io

    View full-size slide

  96. Agenda
    • Defining Developer Experience
    • Developer Experience Journey
    • Documentation Types
    • Break
    • Developer Life Cycle
    • Friction logs
    • Operations
    hoopy.io

    View full-size slide

  97. Understanding Developers Documentation Types
    Developer Journey

    View full-size slide

  98. Understanding Developers Documentation Types
    Developer Journey
    Wider Developer Lifecycle

    View full-size slide

  99. Wider Developer Lifecycle

    View full-size slide

  100. Developer Experience
    1st site
    visit
    Successful
    integration
    Outreach Advocacy

    View full-size slide

  101. Activation Retention
    AAARRRP
    Acquisition Revenue
    Awareness Referral Product

    View full-size slide

  102. Consideration Loyalty
    Customer Product Lifecycle
    Familiarity Purchase
    Awareness

    View full-size slide

  103. Consideration Loyalty
    Customer Product Lifecycle
    Familiarity Purchase
    Awareness
    Tutorials, social media,
    traditional marketing…
    White papers, trials,
    testimonials, sample apps,
    webinars, quick starts…
    Beta programmes,
    newsletters, champion
    programmes…
    Developer Experience

    View full-size slide

  104. Enablement Retention
    Customer Product Lifecycle
    Engagement
    Developer Experience
    Tutorials, social media,
    traditional marketing…
    White papers, trials,
    testimonials, sample apps,
    webinars, quick starts…
    Beta programmes,
    newsletters, champion
    programmes…

    View full-size slide

  105. Engagement
    Tutorials, social media,
    traditional marketing…
    Developer Engagement
    “To create content and perform activities
    intended to raise awareness and familiarity of
    the product amongst the wider developer
    community”
    Mostly External Facing
    Often a marketing activity

    View full-size slide

  106. Enablement Retention
    Engagement
    Tutorials, social media,
    traditional marketing…
    White papers, trials,
    testimonials, sample apps,
    webinars, quick starts…
    Beta programmes,
    newsletters, champion
    programmes…

    View full-size slide

  107. Enablement
    White papers, trials,
    testimonials, sample apps,
    webinars, quick starts…
    Developer Enablement
    “To create content and perform activities
    intended to enable internal and external
    developers to use your product, as well as
    enable go-to-market facing colleagues to enable
    others to use the product.”
    Both internal and external facing
    Generally an educational activity

    View full-size slide

  108. Enablement Retention
    Engagement
    Tutorials, social media,
    traditional marketing…
    White papers, trials,
    testimonials, sample apps,
    webinars, quick starts…
    Beta programmes,
    newsletters, champion
    programmes…

    View full-size slide

  109. Retention
    Beta programmes,
    newsletters, champion
    programmes…
    Developer Retention
    “To create content and perform activities
    intended to ensure developers and customers
    understand the continued value of the product
    and are early adopters new value add-ons”
    Both internal and external facing
    Combination of marketing
    and educational activities

    View full-size slide

  110. Enablement Retention
    Engagement
    Tutorials, social media,
    traditional marketing…
    White papers, trials,
    testimonials, sample apps,
    webinars, quick starts…
    Beta programmes,
    newsletters, champion
    programmes…

    View full-size slide

  111. Exercise
    hoopy.io

    View full-size slide

  112. What kind of activities or content does your company
    deliver for each of these?
    Where are the gaps? Is there an in-balance
    of focus?
    What would be a good next programme to fill these gaps?
    On paper or on spreadsheet, create three columns:
    Engagement, Enablement, and Retention

    View full-size slide

  113. Understanding Developers Documentation Types
    Developer Journey
    Wider Developer Lifecycle

    View full-size slide

  114. Understanding Developers Documentation Types
    Developer Journey
    Friction Logging
    Wider Developer Lifecycle

    View full-size slide

  115. Friction Logging
    hoopy.io

    View full-size slide

  116. 1st site
    visit
    Successful
    integration
    Engagement Retention

    View full-size slide

  117. go.betta.io/dxgithub

    View full-size slide

  118. Cristiano Betta - 9/12/2019
    Upload a file to ImgApp
    * Go to developer.imgapp.com
    This took me to the Get Started Guide but

    then wasn’t clear on next steps

    * Made the sample API call but received a 400
    I copied the command literally from the tutorial

    and I got a 400 response with zero guidance on
    what I did wrong. No idea how to proceed.
    * Click on “Get Started”

    The animated gif on the front-page showed me
    exactly what I can do with the API within 5 seconds.
    Discoverable
    Unpredictable
    Unforgiving
    Exploration
    Getting Started
    Reference

    View full-size slide

  119. Reference I copied the command literally from the tutorial

    and I got a 400 response with zero guidance on
    what I did wrong. No idea how to proceed.
    I wanted to share a link to a specific point in
    the docs and was unable to get a link as it’s an
    infinitely scrolling page without clear anchors
    Unforgiving
    Inaccessible
    Get Started Nullam id dolor id nibh ultricies vehicula ut id
    elit. Morbi leo risus, porta ac consectetur ac,
    vestibulum at eros.
    Nullam id dolor id nibh ultricies vehicula ut id
    elit. Morbi leo risus, porta ac consectetur ac,
    vestibulum at eros.
    Nullam id dolor id nibh ultricies vehicula ut id
    elit. Morbi leo risus, porta ac consectetur ac,
    vestibulum at eros.
    Discoverable
    Forgiving
    Unpredictable

    View full-size slide

  120. 5/80 rule
    hoopy.io

    View full-size slide

  121. 5 friction logs
    ===
    80% of major issues
    hoopy.io

    View full-size slide

  122. Quantifiable product feedback
    hoopy.io

    View full-size slide

  123. Product manager empathy
    hoopy.io

    View full-size slide

  124. Exercise
    hoopy.io

    View full-size slide

  125. 1. Create a friction log for this use case
    2. Document on paper or in an online doc
    3. Log the moments of delight, frustration, and anger
    “Send an Tweet with Nexmo”
    developer.nexmo.com
    Alternative for non-developers
    “Send a tweet with a new Twitter account”
    twitter.com

    View full-size slide

  126. Understanding Developers Documentation Types
    Developer Journey
    Friction Logging
    Wider Developer Lifecycle

    View full-size slide

  127. Understanding Developers Documentation Types
    Developer Journey
    Friction Logging
    Wider Developer Lifecycle
    Operationalization

    View full-size slide

  128. hoopy.io
    Operationalization

    View full-size slide

  129. hoopy.io
    The problem with DX

    View full-size slide

  130. hoopy.io
    The problem with DX
    Create an easy on boarding flow
    Write amazing guides and tutorials
    Maintain the API spec
    Create sample code for every API
    Create useful SDKs
    Create white papers
    Speak at conferences
    Keep in contact with existing customers
    Maintain a changeling
    Maintain social media
    Launch an ambassador programme
    Engage developers on the forum
    Work with partners on integrations

    View full-size slide

  131. hoopy.io
    It’s a lot of work that doesn’t scale

    View full-size slide

  132. hoopy.io
    No they won’t let you hire 30 people
    Unless you are Nexmo

    View full-size slide

  133. hoopy.io
    SCOOP - framework

    View full-size slide

  134. hoopy.io
    SCOOP
    CONTENT

    OUTREACH
    OPERATIONS
    PROGAMMES
    speakerdeck.com/johndbritton/marketing-to-developers

    View full-size slide

  135. hoopy.io
    OPERATIONS
    speakerdeck.com/johndbritton/marketing-to-developers
    “Make checklists,
    automate, refactor”
    - John Britton, DevRelCon 2017

    View full-size slide

  136. hoopy.io
    Automation

    View full-size slide

  137. hoopy.io
    Automation Instrumentation

    View full-size slide

  138. hoopy.io
    Automation
    1. Anything that can be turned into a
    checklist should.
    2. Checklists can be turned into an
    automated process.

    View full-size slide

  139. hoopy.io
    Automation
    Documentation
    • Spellchecking
    • Translation
    • External and internal link validation
    • Cross-linking of related content
    • Create reports to provide other teams with
    insights into documentation coverage of APIs
    • Content Matrix

    View full-size slide

  140. Exploration
    Get Started
    Guides
    Reference
    Content Matrix Example
    Install
    Initialize
    Create Keys
    Create Cards
    Register Cards
    Find Cards
    Encrypt
    Decrypt
    Sign
    Verify
    ✅ ✅ ✅ ✅ ✅
    ✅ ✅ ✅ ✅ ✅
    ✅ ✅
    ✅ ✅
    ✅ ✅
    ✅ ✅


    ✅ ✅ ✅ ✅








    Store Keys

    View full-size slide

  141. hoopy.io
    Automation
    API Specification
    • Automated spellchecks
    • Contract testing
    • Response sample generation

    View full-size slide

  142. SDKs
    • Autogeneration from API spec
    • Feature parity checking
    • Request sample generation
    • Standardization
    hoopy.io
    Automation

    View full-size slide

  143. hoopy.io
    Automation Pipeline
    Product
    API Spec Documentation Change
    SDKs Change
    CLI Change
    Onboarding
    Changelog
    Newsletter
    Contract Validation

    View full-size slide

  144. hoopy.io
    Automation Instrumentation

    View full-size slide

  145. hoopy.io
    Instrumentation
    1. Measure key moments in the developer
    journey as well as the wider developer
    lifecycle
    2. Set up automated process to track
    improvements and actively warn of
    deterioration of key indicators

    View full-size slide

  146. hoopy.io
    Measure deviation
    Sign up
    100%
    Create app
    80%
    API call
    60%

    View full-size slide

  147. hoopy.io
    Sign up
    100%
    Create app
    80%
    API call
    40%
    Measure deviation
    [email protected]

    View full-size slide

  148. Create app
    100%
    Make API Call A After 2 weeks
    10% active
    Discover Retention
    20% active
    Make API Call B
    50% active
    Make API Call A+B
    Prioritize!

    View full-size slide

  149. Exercise
    hoopy.io

    View full-size slide

  150. Determine 3 key events in your developer lifecycle
    Pick an early moment of engagement,
    a moment of enablement,
    and a later moment of retention.
    Which indicator could be best used
    to drive further growth?
    Which indicator could be best used
    as an indicator of potential deterioration?

    View full-size slide

  151. Recap
    hoopy.io

    View full-size slide

  152. DX is where
    your product and
    external developers collide
    hoopy.io

    View full-size slide

  153. External developers
    can be characterised
    by experience and motivation
    hoopy.io

    View full-size slide

  154. Most of the developer
    journey happens
    in four phases
    hoopy.io

    View full-size slide

  155. Exploration
    Getting Started
    Further Guidance
    Reference
    hoopy.io

    View full-size slide

  156. The wider developer
    lifecycle can be described in terms
    of engagement, enablement, and
    retention
    hoopy.io

    View full-size slide

  157. Friction logs created by new
    users can be a cheap yet effective
    way to gather product feedback
    hoopy.io

    View full-size slide

  158. DX is a product that can be
    scaled through automation and
    instrumentation
    hoopy.io

    View full-size slide

  159. Automation ensures your DX
    scales with your product
    hoopy.io

    View full-size slide

  160. Instrumentation protects the
    value of a DX by active
    monitoring key events
    hoopy.io

    View full-size slide

  161. Understanding Developers Documentation Types
    Developer Journey
    Friction Logging
    Wider Developer Lifecycle
    Operationalization

    View full-size slide

  162. Questions
    hoopy.io

    View full-size slide

  163. Which company does
    this the best?
    hoopy.io

    View full-size slide

  164. Experience
    Motivation
    hoopy.io

    View full-size slide

  165. Stripe
    Experience
    Motivation
    hoopy.io

    View full-size slide

  166. Stripe
    Twilio
    Experience
    Motivation
    hoopy.io

    View full-size slide

  167. Pusher
    Stripe
    Twilio
    Experience
    Motivation
    hoopy.io

    View full-size slide

  168. Twilio???
    Pusher
    Stripe
    Twilio
    Experience
    Motivation
    hoopy.io

    View full-size slide

  169. How do I measure ROI?
    hoopy.io

    View full-size slide

  170. Measure Change
    hoopy.io

    View full-size slide

  171. Measure Success
    hoopy.io

    View full-size slide

  172. Marketing Metrics
    != DX Metrics
    hoopy.io

    View full-size slide

  173. Measure Support
    Load
    hoopy.io

    View full-size slide

  174. Should I own my SDKs?
    hoopy.io

    View full-size slide

  175. How can you determine the DX
    of something you don’t own?
    hoopy.io

    View full-size slide

  176. “…in reality, whatever people can
    pull down from their favorite
    package manager is their
    developer experience…”
    - Square’s Tristan Sokol @ DevXCon SF 2̸17
    About SDKs
    hoopy.io

    View full-size slide

  177. Tooling?
    hoopy.io

    View full-size slide

  178. Questions
    hoopy.io

    View full-size slide