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. Agenda • Defining Developer Experience • Developer Experience Journey •

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

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

    Core Use Cases • Break • Building Blocks • Maturity Model • Content Matrix betta.io
  4. “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
  5. Developer Experience 1st site visit Successful integration Advocacy Outreach •

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

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

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

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

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

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

    Support • Feedback • Tooling • Office hours • Beta Programmes Developer Advocacy betta.io
  12. Where am I? What can I do? Where can I

    go? Where did I come from? betta.io
  13. Educational Attributes • Product Experience • Industry Experience • Technical

    Experience • Life Experience • Motivation betta.io
  14. 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?
  15. 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)
  16. 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)
  17. 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)
  18. Documentation Types betta.io • Get Started Guides • QuickStarts •

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

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

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

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

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

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

    Tutorials • Guides • Samples • Demos • Reference • Use Cases • Examples • Libraries & SDKs
  25. Core Use Cases • Sufficiently simple • Relevant to a

    majority of integrations • Minimal overlap betta.io
  26. 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)
  27. 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)
  28. 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)
  29. betta.io • Charge a customer money once • Charge a

    customer money with a subscription
  30. betta.io • Get data from, and push data to GitHub

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

    • Get notified when data changes on GitHub • Integrate with the GitHub.com UI
  32. Agenda • Defining Developer Experience • Developer Experience Journey •

    Core Use Cases • Break • Building Blocks • Maturity Model • Content Matrix betta.io
  33. How we reflect • Minimise ability to deviate • Provide

    checkpoints • Support user error betta.io
  34. How we reflect • Small steps… • …that clearly document

    the expected output • …and document common mistakes betta.io
  35. 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
  36. 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)
  37. Building Blocks Installation Initialization Create Keys Create Cards Find Cards

    Encrypt Decrypt Sign Verify Primary Storing Keys Loading Keys Multi Encrypt Secondary betta.io
  38. 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
  39. 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
  40. 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
  41. betta.io Install SDK Initialize SDK Create a Customer Save a

    card for a customer Charge a customer
  42. betta.io gem install stripe stripe = Stripe.new(‘username’, ‘password’) customer =

    stripe.customer.create(‘name’) customer.cards.create(’card_number’, ‘cvv’) customer.charge(‘amount’)
  43. betta.io send a sms from number find a number log

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

    > nexmo number:buy US 1312* --confirm
  45. betta.io Exploration Get Started Guides Reference Content Matrix Install Initialize

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

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

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

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

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

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

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

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

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

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

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

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

    Keys Create Cards Register Cards Find Cards Encrypt Decrypt Sign Verify ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ❎ ❎ ❎ ❎ ❎ ❎ ✅ ✅ Store Keys
  58. 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 ✅
  59. 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
  60. betta.io GET /api/customers/123 { ‘name’ : ‘Cristiano Ronaldo’, ‘links’ :

    [ { ‘rel’ : ‘cards’, ‘uri’ : ‘/api/customers/123/cards`, ‘method’ : ‘GET’ ] } Level 3
  61. 3: Introduce discoverability by linking to related topics in the

    same documentation level or the same topic at other levels betta.io
  62. 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?
  63. 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?
  64. 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?
  65. 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?
  66. Supporting Success betta.io • Alpha/Beta Programs • Startup Programs •

    Customer Satisfaction Survey (NPS) • Non-core services
  67. The most common ways your product enables a developer to

    succeed define your Core Use Cases betta.io
  68. The DX can be enhanced with the help of a

    the Documentation Maturity Model betta.io