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

Developer Experience Workshop

Developer Experience Workshop

My workshop slides for DevXCon SF 2017

Cristiano Betta

May 23, 2017
Tweet

More Decks by Cristiano Betta

Other Decks in Technology

Transcript

  1. Developer Experience
    May 23, 2̸17
    betta.io

    View Slide

  2. Welcome
    betta.io

    View Slide

  3. Cristiano Betta
    DX Consultant @ Work Betta
    Ex-Dev Advocate @ Braintree
    betta.io

    View Slide

  4. Cristiano Betta
    Event Organiser @ Geeks of London
    > 15 years dev experience
    betta.io

    View Slide

  5. Maintainer of
    Hack Day Manifesto
    and Hack Code of Conduct
    betta.io

    View Slide

  6. hackdaymanifesto.com

    View Slide

  7. hackcodeofconduct.org

    View Slide

  8. Author
    betta.io

    View Slide

  9. betta.io

    View Slide

  10. betta.io

    View Slide

  11. @cbetta
    [email protected]
    betta.io

    View Slide

  12. betta.io

    View Slide

  13. Agenda
    betta.io

    View Slide

  14. Agenda
    • Defining Developer Experience
    betta.io

    View Slide

  15. Agenda
    • Defining Developer Experience
    • Developer Experience Journey
    betta.io

    View Slide

  16. Agenda
    • Defining Developer Experience
    • Developer Experience Journey
    • Core Use Cases
    betta.io

    View Slide

  17. Agenda
    • Defining Developer Experience
    • Developer Experience Journey
    • Core Use Cases
    • Break
    betta.io

    View Slide

  18. Agenda
    • Defining Developer Experience
    • Developer Experience Journey
    • Core Use Cases
    • Break
    • Building Blocks
    betta.io

    View Slide

  19. Agenda
    • Defining Developer Experience
    • Developer Experience Journey
    • Core Use Cases
    • Break
    • Building Blocks
    • Maturity Model
    betta.io

    View Slide

  20. Agenda
    • Defining Developer Experience
    • Developer Experience Journey
    • Core Use Cases
    • Break
    • Building Blocks
    • Maturity Model
    • Content Matrix
    betta.io

    View Slide

  21. Ask me anything
    betta.io

    View Slide

  22. Developer Experience
    betta.io

    View Slide

  23. What is DX?
    betta.io

    View Slide

  24. “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.”
    betta.io
    - Jennifer Riggins | @jkriggins

    View Slide

  25. A platform
    betta.io

    View Slide

  26. A platform
    A successful
    user
    betta.io

    View Slide

  27. A developer platform
    A successful
    developer

    View Slide

  28. A developer platform
    A successful
    developer
    A fresh new
    developer

    View Slide

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

    View Slide

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

    View Slide

  31. Developer Experience
    1st site
    visit
    Successful
    integration
    Advocacy
    Outreach
    Developer Outreach
    betta.io

    View Slide

  32. Developer Experience
    1st site
    visit
    Successful
    integration
    Advocacy
    Outreach
    • Hackathons
    Developer Outreach
    betta.io

    View Slide

  33. Developer Experience
    1st site
    visit
    Successful
    integration
    Advocacy
    Outreach
    • Hackathons
    • Conferences
    Developer Outreach
    betta.io

    View Slide

  34. Developer Experience
    1st site
    visit
    Successful
    integration
    Advocacy
    Outreach
    • Hackathons
    • Conferences
    • Talks
    Developer Outreach
    betta.io

    View Slide

  35. Developer Experience
    1st site
    visit
    Successful
    integration
    Advocacy
    Outreach
    • Hackathons
    • Conferences
    • Talks
    • Blog posts
    Developer Outreach
    betta.io

    View Slide

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

    View Slide

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

    View Slide

  38. Developer Experience
    1st site
    visit
    Successful
    integration
    Outreach Advocacy
    Developer Advocacy
    betta.io

    View Slide

  39. Developer Experience
    1st site
    visit
    Successful
    integration
    Outreach Advocacy
    • Support
    Developer Advocacy
    betta.io

    View Slide

  40. Developer Experience
    1st site
    visit
    Successful
    integration
    Outreach Advocacy
    • Support
    • Feedback
    Developer Advocacy
    betta.io

    View Slide

  41. Developer Experience
    1st site
    visit
    Successful
    integration
    Outreach Advocacy
    • Support
    • Feedback
    • Tooling
    Developer Advocacy
    betta.io

    View Slide

  42. Developer Experience
    1st site
    visit
    Successful
    integration
    Outreach Advocacy
    • Support
    • Feedback
    • Tooling
    • Office hours
    Developer Advocacy
    betta.io

    View Slide

  43. Developer Experience
    1st site
    visit
    Successful
    integration
    Outreach Advocacy
    • Support
    • Feedback
    • Tooling
    • Office hours
    • Beta Programmes
    Developer Advocacy
    betta.io

    View Slide

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

    View Slide

  45. APIs + SDKs
    Documentation
    betta.io

    View Slide

  46. APIs + SDKs
    Documentation
    betta.io

    View Slide

  47. APIs + SDKs
    Documentation
    + External Developers
    betta.io

    View Slide

  48. Usability + External Developers
    betta.io

    View Slide

  49. Usability
    betta.io

    View Slide

  50. Discoverable
    Forgiving
    Learnable
    Correct
    Predictable
    Usability
    betta.io

    View Slide

  51. Correct
    betta.io

    View Slide

  52. View Slide

  53. View Slide

  54. Predictable
    betta.io

    View Slide

  55. Cognitive Load
    betta.io

    View Slide

  56. Delete
    betta.io

    View Slide

  57. Delete...
    betta.io

    View Slide

  58. What can I do?
    What will happen?
    Will I break anything?
    betta.io

    View Slide

  59. View Slide

  60. View Slide

  61. View Slide

  62. betta.io

    View Slide

  63. betta.io

    View Slide

  64. Discoverable
    betta.io

    View Slide

  65. Where am I?
    What can I do?
    Where can I go?
    Where did I come from?
    betta.io

    View Slide

  66. View Slide

  67. betta.io

    View Slide

  68. Forgiving
    betta.io

    View Slide

  69. betta.io

    View Slide

  70. betta.io

    View Slide

  71. betta.io

    View Slide

  72. Learnable
    betta.io

    View Slide

  73. View Slide

  74. Usability
    Discoverable
    Forgiving
    Learnable
    Correct
    Predictable
    betta.io

    View Slide

  75. Usability
    betta.io

    View Slide

  76. Usability + External Developers
    betta.io

    View Slide

  77. External Developers
    betta.io

    View Slide

  78. External Developers
    betta.io

    View Slide

  79. Understanding Developers
    betta.io

    View Slide

  80. Understanding Developers

    View Slide

  81. Understanding Developers Documentation Types

    View Slide

  82. Understanding Developers Documentation Types
    Developer Journey

    View Slide

  83. Understanding Developers Documentation Types
    Developer Journey Building Blocks

    View Slide

  84. Understanding Developers Documentation Types
    Developer Journey Building Blocks
    Content Matrix

    View Slide

  85. Understanding Developers Documentation Types
    Developer Journey Building Blocks
    Content Matrix
    Maturity Model

    View Slide

  86. Understanding Developers Documentation Types
    Developer Journey Building Blocks
    Content Matrix
    Maturity Model
    Success & Celebration

    View Slide

  87. Understanding Developers
    betta.io

    View Slide

  88. Understanding Developers
    betta.io

    View Slide

  89. Understanding Developers
    • Enterprise Developers
    betta.io

    View Slide

  90. Understanding Developers
    • Enterprise Developers
    • Startup Developers
    betta.io

    View Slide

  91. Understanding Developers
    • Enterprise Developers
    • Startup Developers
    • Hackers
    betta.io

    View Slide

  92. Understanding Developers
    • Enterprise Developers
    • Startup Developers
    • Hackers
    • Junior
    betta.io

    View Slide

  93. Understanding Developers
    • Enterprise Developers
    • Startup Developers
    • Hackers
    • Junior
    • N00bs
    betta.io

    View Slide

  94. Understanding Developers
    • Enterprise Developers
    • Startup Developers
    • Hackers
    • Junior
    • N00bs
    • Senior
    betta.io

    View Slide

  95. Developer Attributes
    betta.io

    View Slide

  96. Developer Attributes
    • Money?
    betta.io

    View Slide

  97. Developer Attributes
    • Money?
    • Seniority?
    betta.io

    View Slide

  98. Developer Attributes
    • Money?
    • Seniority?
    • Age?
    betta.io

    View Slide

  99. Developer Attributes
    • Money?
    • Seniority?
    • Age?
    • Gender?
    betta.io

    View Slide

  100. Educational Attributes
    betta.io

    View Slide

  101. Educational Attributes
    • Product Experience
    betta.io

    View Slide

  102. Educational Attributes
    • Product Experience
    • Industry Experience
    betta.io

    View Slide

  103. Educational Attributes
    • Product Experience
    • Industry Experience
    • Technical Experience
    betta.io

    View Slide

  104. Educational Attributes
    • Product Experience
    • Industry Experience
    • Technical Experience
    • Life Experience
    betta.io

    View Slide

  105. Educational Attributes
    • Product Experience
    • Industry Experience
    • Technical Experience
    • Life Experience
    • Motivation
    betta.io

    View Slide

  106. Educational Attributes
    • Experience
    • Motivation
    betta.io

    View Slide

  107. Developer Journey
    Experience
    Motivation
    betta.io

    View Slide

  108. Experience
    Motivation
    Your CTO
    Developer Journey
    betta.io

    View Slide

  109. Experience
    Motivation
    Your CTO
    Newbie
    Developer Journey
    betta.io

    View Slide

  110. Experience
    Motivation
    Your CTO
    Newbie Convert
    Developer Journey
    betta.io

    View Slide

  111. Experience
    Motivation
    Your CTO
    Newbie Convert
    Try Now
    Developer Journey
    betta.io

    View Slide

  112. Experience
    Motivation
    Your CTO
    Newbie Convert
    Try Now
    Impl.
    Developer Journey
    betta.io

    View Slide

  113. Experience
    Motivation
    Expert
    Newbie Convert
    Try Now
    Impl.
    Developer Journey
    betta.io

    View Slide

  114. Experience
    Motivation
    Developer Journey
    betta.io

    View Slide

  115. Experience
    Motivation
    Developer Journey
    betta.io

    View Slide

  116. Experience
    Motivation
    Developer Journey
    betta.io

    View Slide

  117. Experience
    Motivation
    Developer Journey
    betta.io

    View Slide

  118. Experience
    Motivation
    Developer Journey
    betta.io

    View Slide

  119. Understanding Developers
    betta.io

    View Slide

  120. Understanding Developers Documentation Types
    Developer Journey Building Blocks
    Content Matrix
    Maturity Model
    Success & Celebration

    View Slide

  121. Documentation Types
    betta.io

    View Slide

  122. Exercise
    betta.io

    View Slide

  123. betta.io
    stripe.com/docs developer.github.com firebase.google.com

    View Slide

  124. betta.io
    stripe.com/docs developer.github.com firebase.google.com

    View Slide

  125. betta.io
    stripe.com/docs developer.github.com firebase.google.com
    What types of documentation can we recognise?

    View Slide

  126. betta.io
    stripe.com/docs developer.github.com firebase.google.com
    What types of documentation can we recognise?
    For what level of experience and motivation
    is that documentation intended?

    View Slide

  127. betta.io
    stripe.com/docs developer.github.com firebase.google.com
    What types of documentation can we recognise?
    For what level of experience and motivation
    is that documentation intended?
    How does the documentation
    flow from one type to the other? (Bonus)

    View Slide

  128. betta.io
    stripe.com/docs developer.github.com firebase.google.com
    What types of documentation can we recognise?
    For what level of experience and motivation
    is that documentation intended?
    How does the documentation
    flow from one type to the other? (Bonus)
    Can you spot any problems
    in their Developer Experience? (Bonus)

    View Slide

  129. View Slide

  130. View Slide

  131. View Slide

  132. betta.io
    stripe.com/docs developer.github.com firebase.google.com
    What types of documentation can we recognise?
    For what level of experience and motivation
    is that documentation intended?
    How does the documentation
    flow from one type to the other? (Bonus)
    Can you spot any problems
    in their Developer Experience? (Bonus)

    View Slide

  133. View Slide

  134. View Slide

  135. betta.io

    View Slide

  136. betta.io

    View Slide

  137. View Slide

  138. View Slide

  139. View Slide

  140. View Slide

  141. View Slide

  142. View Slide

  143. View Slide

  144. Documentation Types
    betta.io

    View Slide

  145. Documentation Types
    betta.io

    View Slide

  146. Documentation Types
    betta.io
    • Get Started Guides

    View Slide

  147. Documentation Types
    betta.io
    • Get Started Guides
    • QuickStarts

    View Slide

  148. Documentation Types
    betta.io
    • Get Started Guides
    • QuickStarts
    • Tutorials

    View Slide

  149. Documentation Types
    betta.io
    • Get Started Guides
    • QuickStarts
    • Tutorials
    • Guides

    View Slide

  150. Documentation Types
    betta.io
    • Get Started Guides
    • QuickStarts
    • Tutorials
    • Guides
    • Samples

    View Slide

  151. Documentation Types
    betta.io
    • Get Started Guides
    • QuickStarts
    • Tutorials
    • Guides
    • Samples
    • Demos

    View Slide

  152. Documentation Types
    betta.io
    • Get Started Guides
    • QuickStarts
    • Tutorials
    • Guides
    • Samples
    • Demos
    • Reference

    View Slide

  153. Documentation Types
    betta.io
    • Get Started Guides
    • QuickStarts
    • Tutorials
    • Guides
    • Samples
    • Demos
    • Reference
    • Use Cases

    View Slide

  154. Documentation Types
    betta.io
    • Get Started Guides
    • QuickStarts
    • Tutorials
    • Guides
    • Samples
    • Demos
    • Reference
    • Use Cases
    • Examples

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  159. Documentation Types
    Experience
    Motivation
    betta.io

    View Slide

  160. Experience
    Motivation
    betta.io

    View Slide

  161. Reference
    Experience
    Motivation
    betta.io

    View Slide

  162. Reference
    Exploration
    Experience
    Motivation
    betta.io

    View Slide

  163. View Slide

  164. View Slide

  165. View Slide

  166. Reference
    Exploration
    Experience
    Motivation
    betta.io

    View Slide

  167. Getting Started
    Reference
    Exploration
    Experience
    Motivation
    betta.io

    View Slide

  168. View Slide

  169. View Slide

  170. View Slide

  171. View Slide

  172. Further Guidance
    Getting Started
    Reference
    Exploration
    Experience
    Motivation
    betta.io

    View Slide

  173. View Slide

  174. Further Guidance
    Getting Started
    Reference
    Exploration
    Experience
    Motivation
    betta.io

    View Slide

  175. Further Guidance
    Getting Started Reference
    Exploration
    Developer Journey

    View Slide

  176. Understanding Developers Documentation Types
    Developer Journey

    View Slide

  177. Understanding Developers Documentation Types
    Developer Journey Building Blocks

    View Slide

  178. Core Use Cases
    betta.io

    View Slide

  179. Money
    betta.io

    View Slide

  180. Developer Experience
    1st site
    visit
    Successful
    integration

    View Slide

  181. Successful
    Integration

    View Slide

  182. First
    implementation

    View Slide

  183. First
    implementation

    View Slide

  184. First
    implementation
    $$$

    View Slide

  185. Core Use Case $$$

    View Slide

  186. Core Use Cases
    betta.io

    View Slide

  187. Core Use Cases
    • Sufficiently simple
    betta.io

    View Slide

  188. Core Use Cases
    • Sufficiently simple
    • Relevant to a majority of integrations
    betta.io

    View Slide

  189. Core Use Cases
    • Sufficiently simple
    • Relevant to a majority of integrations
    • Minimal overlap
    betta.io

    View Slide

  190. Exercise
    betta.io

    View Slide

  191. betta.io
    stripe.com/docs developer.github.com firebase.google.com

    View Slide

  192. betta.io
    stripe.com/docs developer.github.com firebase.google.com

    View Slide

  193. betta.io
    stripe.com/docs developer.github.com firebase.google.com
    What features are presented most prominently?

    View Slide

  194. betta.io
    stripe.com/docs developer.github.com firebase.google.com
    What features are presented most prominently?
    What use cases are presented most
    prominently?

    View Slide

  195. betta.io
    stripe.com/docs developer.github.com firebase.google.com
    What features are presented most prominently?
    What use cases are presented most
    prominently?
    What do you think their core use cases are? (Bonus)

    View Slide

  196. betta.io
    stripe.com/docs developer.github.com firebase.google.com
    What features are presented most prominently?
    What use cases are presented most
    prominently?
    What do you think their core use cases are? (Bonus)
    Do you think they picked the right use cases? (Bonus)

    View Slide

  197. View Slide

  198. View Slide

  199. View Slide

  200. View Slide

  201. View Slide

  202. View Slide

  203. View Slide

  204. View Slide

  205. View Slide

  206. View Slide

  207. betta.io
    stripe.com/docs developer.github.com firebase.google.com
    What features are presented most prominently?
    What use cases are presented most
    prominently?
    What do you think their core use cases are? (Bonus)
    Do you think they picked the right use cases? (Bonus)

    View Slide

  208. View Slide

  209. View Slide

  210. betta.io

    View Slide

  211. betta.io

    View Slide

  212. betta.io
    • Charge a customer money once

    View Slide

  213. betta.io
    • Charge a customer money once
    • Charge a customer money with a subscription

    View Slide

  214. View Slide

  215. View Slide

  216. View Slide

  217. betta.io

    View Slide

  218. betta.io
    • Get data from, and push data to GitHub

    View Slide

  219. betta.io
    • Get data from, and push data to GitHub
    • Get notified when data changes on GitHub

    View Slide

  220. betta.io
    • Get data from, and push data to GitHub
    • Get notified when data changes on GitHub
    • Integrate with the GitHub.com UI

    View Slide

  221. View Slide

  222. View Slide

  223. View Slide

  224. betta.io

    View Slide

  225. betta.io

    View Slide

  226. betta.io
    • Log events

    View Slide

  227. betta.io
    • Log events
    • Analyse log

    View Slide

  228. betta.io
    • Log events
    • Analyse log
    • Manage users

    View Slide

  229. betta.io
    • Log events
    • Analyse log
    • Manage users
    • Log in users

    View Slide

  230. betta.io
    • Log events
    • Analyse log
    • Manage users
    • Log in users
    • ….

    View Slide

  231. betta.io
    • Log events
    • Analyse log
    • Manage users
    • Log in users
    • ….
    • ….

    View Slide

  232. betta.io
    @cbetta

    View Slide

  233. betta.io
    @cbetta

    View Slide

  234. Coffee Break
    betta.io
    @cbetta

    View Slide

  235. Agenda
    • Defining Developer Experience
    • Developer Experience Journey
    • Core Use Cases
    • Break
    • Building Blocks
    • Maturity Model
    • Content Matrix
    betta.io

    View Slide

  236. Understanding Developers Documentation Types
    Developer Journey Building Blocks
    Content Matrix
    Maturity Model
    Success & Celebration

    View Slide

  237. Building Blocks
    betta.io

    View Slide

  238. Mental Models
    betta.io

    View Slide

  239. Mental Models
    Information
    betta.io

    View Slide

  240. Mental Models
    betta.io

    View Slide

  241. Mental Models
    betta.io

    View Slide

  242. Mental Models
    betta.io

    View Slide

  243. Mental Models
    betta.io

    View Slide

  244. Mental Models
    betta.io

    View Slide

  245. How We Learn
    • Learn
    • Build
    • Reflect
    betta.io

    View Slide

  246. How We Learn
    • Learn
    • Build
    • Reflect
    betta.io

    View Slide

  247. How We Learn
    ?
    betta.io

    View Slide

  248. How we reflect
    betta.io

    View Slide

  249. How we reflect
    • Minimise ability to deviate
    betta.io

    View Slide

  250. How we reflect
    • Minimise ability to deviate
    • Provide checkpoints
    betta.io

    View Slide

  251. How we reflect
    • Minimise ability to deviate
    • Provide checkpoints
    • Support user error
    betta.io

    View Slide

  252. How we reflect
    betta.io

    View Slide

  253. How we reflect
    • Small steps…
    betta.io

    View Slide

  254. How we reflect
    • Small steps…
    • …that clearly document the expected output
    betta.io

    View Slide

  255. How we reflect
    • Small steps…
    • …that clearly document the expected output
    • …and document common mistakes
    betta.io

    View Slide

  256. Building Blocks

    View Slide

  257. Building Blocks
    Encrypted
    Communication
    Use Case #1

    View Slide

  258. Building Blocks
    Encrypted
    Communication
    Use Case #1
    Encrypted
    Storage
    Use Case #2

    View Slide

  259. Building Blocks
    Initialization
    Use Case #1
    Initialization
    Use Case #2
    Encrypted
    Communication
    Encrypted
    Storage

    View Slide

  260. Building Blocks
    Initialization
    Use Case #1
    Initialization
    Use Case #2
    Encrypted
    Communication
    Encrypted
    Storage
    Create Keys for Alice
    Create Keys for Bob
    Create Keys for Alice

    View Slide

  261. Building Blocks
    Initialization
    Encrypted Comms
    Initialization
    Encrypted Storage
    Create Keys for Alice
    Create Keys for Bob
    Create Keys for Alice
    Encrypt (for Bob)
    Decrypt (as Bob)
    Encrypt (for Alice)
    Decrypt (as Alice)

    View Slide

  262. Building Blocks
    Installation
    Initialization
    Create Keys
    Create Cards
    Find Cards
    Encrypt
    Decrypt
    Sign
    Verify
    Primary
    betta.io

    View Slide

  263. Building Blocks
    Installation
    Initialization
    Create Keys
    Create Cards
    Find Cards
    Encrypt
    Decrypt
    Sign
    Verify
    Primary
    Storing Keys
    Loading Keys
    Multi Encrypt
    Secondary
    betta.io

    View Slide

  264. Exercise
    betta.io

    View Slide

  265. betta.io
    stripe.com/docs developer.github.com firebase.google.com

    View Slide

  266. betta.io
    stripe.com/docs developer.github.com firebase.google.com

    View Slide

  267. betta.io
    stripe.com/docs developer.github.com firebase.google.com
    What building blocks can the core use cases be split into?

    View Slide

  268. betta.io
    stripe.com/docs developer.github.com firebase.google.com
    What building blocks can the core use cases be split into?
    What secondary building blocks exist?

    View Slide

  269. betta.io
    stripe.com/docs developer.github.com firebase.google.com
    What building blocks can the core use cases be split into?
    What secondary building blocks exist?
    • Charge a customer
    money once
    • Charge a customer
    money with a
    subscription

    View Slide

  270. betta.io
    stripe.com/docs developer.github.com firebase.google.com
    What building blocks can the core use cases be split into?
    What secondary building blocks exist?
    • Charge a customer
    money once
    • Charge a customer
    money with a
    subscription
    • Get data from, and push data to
    GitHub
    • Get notified when data changes
    on GitHub
    • Integrate with the GitHub.com UI

    View Slide

  271. betta.io
    stripe.com/docs developer.github.com firebase.google.com
    What building blocks can the core use cases be split into?
    What secondary building blocks exist?
    • Charge a customer
    money once
    • Charge a customer
    money with a
    subscription
    • Get data from, and push data to
    GitHub
    • Get notified when data changes
    on GitHub
    • Integrate with the GitHub.com UI
    • Register a new user
    • Login an existing user
    • Login an anonymous user

    View Slide

  272. API/SDK Design
    betta.io

    View Slide

  273. Problematic API/SDK
    betta.io

    View Slide

  274. betta.io

    View Slide

  275. betta.io
    Install SDK

    View Slide

  276. betta.io
    Install SDK
    Initialize SDK

    View Slide

  277. betta.io
    Install SDK
    Initialize SDK
    Charge Card

    View Slide

  278. betta.io

    View Slide

  279. betta.io
    gem install stripe

    View Slide

  280. betta.io
    gem install stripe
    stripe = Stripe.new(‘username’, ‘password’)

    View Slide

  281. betta.io
    gem install stripe
    stripe = Stripe.new(‘username’, ‘password’)
    stripe.charge(’card_number’, ‘cvv’, ‘amount’)

    View Slide

  282. betta.io
    Install SDK
    Initialize SDK
    Charge Card

    View Slide

  283. betta.io
    Install SDK
    Initialize SDK

    View Slide

  284. betta.io
    Install SDK
    Initialize SDK
    Create a Customer

    View Slide

  285. betta.io
    Install SDK
    Initialize SDK
    Create a Customer
    Save a card for a customer

    View Slide

  286. betta.io
    Install SDK
    Initialize SDK
    Create a Customer
    Save a card for a customer
    Charge a customer

    View Slide

  287. betta.io
    gem install stripe
    stripe = Stripe.new(‘username’, ‘password’)
    customer = stripe.customer.create(‘name’)
    customer.cards.create(’card_number’, ‘cvv’)
    customer.charge(‘amount’)

    View Slide

  288. betta.io
    gem install stripe
    stripe = Stripe.new(‘username’, ‘password’)
    stripe.customer.createAndCharge(_)

    View Slide

  289. Problematic Documentation
    betta.io

    View Slide

  290. betta.io
    stripe = Stripe.new(‘appId’, ‘appSecret’)

    View Slide

  291. betta.io
    stripe = Stripe.new(‘appId’, ‘appSecret’)
    create new “app” on site

    View Slide

  292. betta.io

    View Slide

  293. betta.io

    View Slide

  294. betta.io
    send a sms from number
    buy a phone number

    View Slide

  295. betta.io
    send a sms from number
    find a number
    log in to site
    copy number into code
    go to site
    Buy a number

    View Slide

  296. betta.io
    send a sms from number
    copy number into code
    > nexmo number:buy US 1312* --confirm

    View Slide

  297. betta.io

    View Slide

  298. betta.io
    Building Blocks

    View Slide

  299. Understanding Developers Documentation Types
    Developer Journey Building Blocks
    Content Matrix
    Maturity Model
    Success & Celebration

    View Slide

  300. betta.io
    Content Matrix

    View Slide

  301. betta.io
    Content Matrix

    View Slide

  302. betta.io
    Exploration
    Content Matrix

    View Slide

  303. betta.io
    Exploration
    Get Started
    Content Matrix

    View Slide

  304. betta.io
    Exploration
    Get Started
    Guides
    Content Matrix

    View Slide

  305. betta.io
    Exploration
    Get Started
    Guides
    Reference
    Content Matrix

    View Slide

  306. betta.io
    Exploration
    Get Started
    Guides
    Reference
    Content Matrix

    View Slide

  307. betta.io
    Exploration
    Get Started
    Guides
    Reference
    Content Matrix
    Install

    View Slide

  308. betta.io
    Exploration
    Get Started
    Guides
    Reference
    Content Matrix
    Install
    Initialize

    View Slide

  309. betta.io
    Exploration
    Get Started
    Guides
    Reference
    Content Matrix
    Install
    Initialize
    Create Keys

    View Slide

  310. betta.io
    Exploration
    Get Started
    Guides
    Reference
    Content Matrix
    Install
    Initialize
    Create Keys
    Create Cards

    View Slide

  311. betta.io
    Exploration
    Get Started
    Guides
    Reference
    Content Matrix
    Install
    Initialize
    Create Keys
    Create Cards
    Register Cards

    View Slide

  312. betta.io
    Exploration
    Get Started
    Guides
    Reference
    Content Matrix
    Install
    Initialize
    Create Keys
    Create Cards
    Register Cards
    Find Cards

    View Slide

  313. betta.io
    Exploration
    Get Started
    Guides
    Reference
    Content Matrix
    Install
    Initialize
    Create Keys
    Create Cards
    Register Cards
    Find Cards
    Encrypt

    View Slide

  314. betta.io
    Exploration
    Get Started
    Guides
    Reference
    Content Matrix
    Install
    Initialize
    Create Keys
    Create Cards
    Register Cards
    Find Cards
    Encrypt
    Decrypt

    View Slide

  315. betta.io
    Exploration
    Get Started
    Guides
    Reference
    Content Matrix
    Install
    Initialize
    Create Keys
    Create Cards
    Register Cards
    Find Cards
    Encrypt
    Decrypt
    Sign

    View Slide

  316. betta.io
    Exploration
    Get Started
    Guides
    Reference
    Content Matrix
    Install
    Initialize
    Create Keys
    Create Cards
    Register Cards
    Find Cards
    Encrypt
    Decrypt
    Sign
    Verify

    View Slide

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

    View Slide

  318. betta.io
    Exploration
    Get Started
    Guides
    Reference
    Content Matrix
    Install
    Initialize
    Create Keys
    Create Cards
    Register Cards
    Find Cards
    Encrypt
    Decrypt
    Sign
    Verify

    View Slide

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

    View Slide

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

    View Slide

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


    View Slide

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


    ✅ ✅ ✅ ✅

    View Slide

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


    ✅ ✅ ✅ ✅






    View Slide

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


    ✅ ✅ ✅ ✅








    View Slide

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


    ✅ ✅ ✅ ✅








    Store Keys

    View Slide

  326. betta.io
    Why?

    View Slide

  327. Exploration
    Get Started
    Guides
    Reference
    All we need is Reference
    Install
    Initialize
    Create Keys
    Create Cards
    Register Cards
    Find Cards
    Encrypt
    Decrypt
    Sign
    Verify
    ✅ ✅ ✅ ✅
    ✅ ✅ ✅ ✅ ✅
    ✅ ✅ ✅ ✅

    Store Keys

    View Slide

  328. Exploration
    Get Started
    Guides
    Reference
    We wrote a tutorial
    Install
    Initialize
    Create Keys
    Create Cards
    Register Cards
    Find Cards
    Encrypt
    Decrypt
    Sign
    Verify
    ✅ ✅ ✅ ✅ ✅
    ✅ ✅ ✅
    Store Keys

    View Slide

  329. betta.io
    A Content Matrix
    is a tool

    View Slide

  330. Maturity Model
    betta.io

    View Slide

  331. Richardson
    Maturity Model
    betta.io

    View Slide

  332. betta.io

    View Slide

  333. betta.io
    GET /api/paymentProviderService
    {
    ‘type’ : ‘CustomerRequest’
    ‘name’ : ‘Cristiano Betta’
    }
    Level ̸

    View Slide

  334. betta.io
    GET /api/customers?name=Cristiano%20Betta
    Level 1

    View Slide

  335. betta.io
    GET /api/customers/create?name=Cristiano%20Betta
    Level 1

    View Slide

  336. betta.io
    POST /api/customers
    {
    ‘name’ : ‘Cristiano Betta’
    }
    Level 2

    View Slide

  337. betta.io
    PUT /api/customers/123
    {
    ‘name’ : ‘Cristiano Ronaldo’
    }
    Level 2

    View Slide

  338. betta.io
    GET /api/customers/123
    {
    ‘name’ : ‘Cristiano Ronaldo’
    }
    Level 2

    View Slide

  339. betta.io
    GET /api/customers/123
    {
    ‘name’ : ‘Cristiano Ronaldo’,
    ‘links’ : [
    {
    ‘rel’ : ‘cards’,
    ‘uri’ : ‘/api/customers/123/cards`,
    ‘method’ : ‘GET’
    ]
    }
    Level 3

    View Slide

  340. betta.io

    View Slide

  341. betta.io

    View Slide

  342. betta.io
    1. Reduce complexity

    View Slide

  343. betta.io
    1. Reduce complexity
    2. Increase reusability

    View Slide

  344. betta.io
    1. Reduce complexity
    2. Increase reusability
    3. Introduce discoverability

    View Slide

  345. Document
    Maturity Model
    betta.io

    View Slide

  346. 1: Reduce Complexity
    by using the four
    documentation types
    betta.io

    View Slide

  347. View Slide

  348. View Slide

  349. 2: Increase reusability
    by ensuring building blocks are
    individually accessible in
    any documentation type
    betta.io

    View Slide

  350. View Slide

  351. stripe.com/docs/api#create_charge
    betta.io

    View Slide

  352. stripe.com/docs/charges#updating-saved-card-information
    betta.io

    View Slide

  353. 3: Introduce discoverability
    by linking to related topics
    in the same documentation level
    or the same topic at other levels
    betta.io

    View Slide

  354. betta.io

    View Slide

  355. betta.io

    View Slide

  356. betta.io

    View Slide

  357. betta.io

    View Slide

  358. Exercise
    betta.io

    View Slide

  359. betta.io
    stripe.com/docs developer.github.com firebase.google.com

    View Slide

  360. betta.io
    stripe.com/docs developer.github.com firebase.google.com

    View Slide

  361. betta.io
    stripe.com/docs developer.github.com firebase.google.com
    What UI patterns have been used to address these 3 levels?

    View Slide

  362. betta.io
    stripe.com/docs developer.github.com firebase.google.com
    What UI patterns have been used to address these 3 levels?
    What overall level would you rate their documentation at?

    View Slide

  363. betta.io
    stripe.com/docs developer.github.com firebase.google.com
    1: Reduce Complexity
    by using the four
    documentation types
    What UI patterns have been used to address these 3 levels?
    What overall level would you rate their documentation at?

    View Slide

  364. betta.io
    stripe.com/docs developer.github.com firebase.google.com
    1: Reduce Complexity
    by using the four
    documentation types
    2: Increase reusability
    by ensuring building blocks are
    individually accessible in
    any documentation type
    What UI patterns have been used to address these 3 levels?
    What overall level would you rate their documentation at?

    View Slide

  365. betta.io
    stripe.com/docs developer.github.com firebase.google.com
    1: Reduce Complexity
    by using the four
    documentation types
    2: Increase reusability
    by ensuring building blocks are
    individually accessible in
    any documentation type
    3: Introduce discoverability
    by linking to related topics
    in the same documentation level
    or the same topic at other levels
    What UI patterns have been used to address these 3 levels?
    What overall level would you rate their documentation at?

    View Slide

  366. Celebration
    betta.io

    View Slide

  367. Experience
    Motivation
    Developer Journey
    betta.io

    View Slide

  368. Core Use Cases
    $$$

    View Slide

  369. Success?
    betta.io

    View Slide

  370. Signup?
    betta.io

    View Slide

  371. First implementation?
    betta.io

    View Slide

  372. Full integration?
    betta.io

    View Slide

  373. Customer Success
    ==
    Your Success
    betta.io

    View Slide

  374. Make your customers
    successful
    betta.io

    View Slide

  375. Supporting Success
    betta.io

    View Slide

  376. Supporting Success
    betta.io
    • Alpha/Beta Programs

    View Slide

  377. Supporting Success
    betta.io
    • Alpha/Beta Programs
    • Startup Programs

    View Slide

  378. Supporting Success
    betta.io
    • Alpha/Beta Programs
    • Startup Programs
    • Customer Satisfaction Survey (NPS)

    View Slide

  379. Supporting Success
    betta.io
    • Alpha/Beta Programs
    • Startup Programs
    • Customer Satisfaction Survey (NPS)
    • Non-core services

    View Slide

  380. Stripe Atlas
    betta.io

    View Slide

  381. Celebration
    betta.io

    View Slide

  382. IKEA Effect
    betta.io

    View Slide

  383. Reverse IKEA Effect
    betta.io

    View Slide

  384. Developing an integration
    is a collaboration
    betta.io

    View Slide

  385. Celebrate together
    betta.io

    View Slide

  386. betta.io

    View Slide

  387. Recap
    betta.io

    View Slide

  388. DX is where
    your product and
    external developers collide
    betta.io

    View Slide

  389. External developers
    can be characterised
    by experience and motivation
    betta.io

    View Slide

  390. Most of the DX happens
    in four phases
    betta.io

    View Slide

  391. Exploration
    Getting Started
    Further Guidance
    Reference
    betta.io

    View Slide

  392. The most common ways
    your product enables a developer
    to succeed define your
    Core Use Cases
    betta.io

    View Slide

  393. Shared elements between
    your Core Use Cases
    define your Building Blocks
    betta.io

    View Slide

  394. Your Building Blocks
    and the 4 documentation types
    allow you to fill a Content Matrix
    betta.io

    View Slide

  395. The DX can be enhanced with the
    help of a the
    Documentation Maturity Model
    betta.io

    View Slide

  396. A successful customer should be
    celebrated as if it was a
    success of your own
    betta.io

    View Slide

  397. Understanding Developers & Documentation Types
    Developer Journey & Building Blocks
    Content Matrix
    Maturity Model
    Celebration

    View Slide

  398. Questions
    betta.io

    View Slide

  399. FAQ
    betta.io

    View Slide

  400. Which company does
    this the best?
    betta.io

    View Slide

  401. Experience
    Motivation
    betta.io

    View Slide

  402. Stripe
    Experience
    Motivation
    betta.io

    View Slide

  403. View Slide

  404. Stripe
    Twilio
    Experience
    Motivation
    betta.io

    View Slide

  405. View Slide

  406. Pusher
    Stripe
    Twilio
    Experience
    Motivation
    betta.io

    View Slide

  407. View Slide

  408. Twilio???
    Pusher
    Stripe
    Twilio
    Experience
    Motivation
    betta.io

    View Slide

  409. View Slide

  410. How do I measure ROI?
    betta.io

    View Slide

  411. Measure Change
    betta.io

    View Slide

  412. betta.io

    View Slide

  413. Measure Success
    betta.io

    View Slide

  414. Should I own my SDKs?
    betta.io

    View Slide

  415. How can you determine the DX
    of something you don’t own?
    betta.io

    View Slide

  416. View Slide

  417. Tooling?
    betta.io

    View Slide

  418. Questions
    betta.io

    View Slide

  419. Thank you
    crist[email protected]
    betta.io

    View Slide