Developer Experience Workshop

Developer Experience May 23, 2̸17 betta.io

Welcome betta.io

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

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

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

hackdaymanifesto.com

hackcodeofconduct.org

Author betta.io

betta.io

@cbetta cristiano@betta.io betta.io

betta.io

Agenda betta.io

Agenda • Deﬁning Developer Experience betta.io

Agenda • Deﬁning Developer Experience • Developer Experience Journey betta.io

Agenda • Deﬁning Developer Experience • Developer Experience Journey •
Core Use Cases betta.io

Core Use Cases • Break betta.io

Core Use Cases • Break • Building Blocks betta.io

Core Use Cases • Break • Building Blocks • Maturity Model betta.io

Core Use Cases • Break • Building Blocks • Maturity Model • Content Matrix betta.io

Ask me anything betta.io

Developer Experience betta.io

What is DX? betta.io

“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

A platform betta.io

A platform A successful user betta.io

A developer platform A successful developer

A developer platform A successful developer A fresh new developer

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

Developer Experience 1st site visit Successful integration Outreach Advocacy

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

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

Hackathons • Conferences Developer Outreach betta.io

Hackathons • Conferences • Talks Developer Outreach betta.io

Hackathons • Conferences • Talks • Blog posts Developer Outreach betta.io

Hackathons • Conferences • Talks • Blog posts • Tutorials Developer Outreach betta.io

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

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

Support • Feedback Developer Advocacy betta.io

Support • Feedback • Tooling Developer Advocacy betta.io

Support • Feedback • Tooling • Ofﬁce hours Developer Advocacy betta.io

Support • Feedback • Tooling • Ofﬁce hours • Beta Programmes Developer Advocacy betta.io

APIs + SDKs Documentation betta.io

APIs + SDKs Documentation + External Developers betta.io

Usability + External Developers betta.io

Usability betta.io

Discoverable Forgiving Learnable Correct Predictable Usability betta.io

Correct betta.io

Predictable betta.io

Cognitive Load betta.io

Delete betta.io

Delete... betta.io

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

betta.io

Discoverable betta.io

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

betta.io

Forgiving betta.io

betta.io

Learnable betta.io

Usability Discoverable Forgiving Learnable Correct Predictable betta.io

Usability betta.io

Usability + External Developers betta.io

External Developers betta.io

Understanding Developers betta.io

Understanding Developers

Understanding Developers Documentation Types

Understanding Developers Documentation Types Developer Journey

Understanding Developers Documentation Types Developer Journey Building Blocks

Understanding Developers Documentation Types Developer Journey Building Blocks Content Matrix

Maturity Model

Maturity Model Success & Celebration

Understanding Developers • Enterprise Developers betta.io

Understanding Developers • Enterprise Developers • Startup Developers betta.io

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

• Junior betta.io

• Junior • N00bs betta.io

• Junior • N00bs • Senior betta.io

Developer Attributes betta.io

Developer Attributes • Money? betta.io

Developer Attributes • Money? • Seniority? betta.io

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

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

Educational Attributes betta.io

Educational Attributes • Product Experience betta.io

Educational Attributes • Product Experience • Industry Experience betta.io

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

Experience • Life Experience betta.io

Experience • Life Experience • Motivation betta.io

Educational Attributes • Experience • Motivation betta.io

Developer Journey Experience Motivation betta.io

Experience Motivation Your CTO Developer Journey betta.io

Experience Motivation Your CTO Newbie Developer Journey betta.io

Experience Motivation Your CTO Newbie Convert Developer Journey betta.io

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

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

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

Experience Motivation Developer Journey betta.io

Documentation Types betta.io

Exercise betta.io

betta.io stripe.com/docs developer.github.com ﬁrebase.google.com

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

recognise? For what level of experience and motivation is that documentation intended?

recognise? For what level of experience and motivation is that documentation intended? How does the documentation ﬂow from one type to the other? (Bonus)

recognise? For what level of experience and motivation is that documentation intended? How does the documentation ﬂow from one type to the other? (Bonus) Can you spot any problems in their Developer Experience? (Bonus)

betta.io

Documentation Types betta.io

Documentation Types betta.io • Get Started Guides

Documentation Types betta.io • Get Started Guides • QuickStarts

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

Tutorials • Guides

Tutorials • Guides • Samples

Tutorials • Guides • Samples • Demos

Tutorials • Guides • Samples • Demos • Reference

Tutorials • Guides • Samples • Demos • Reference • Use Cases

Tutorials • Guides • Samples • Demos • Reference • Use Cases • Examples

Tutorials • Guides • Samples • Demos • Reference • Use Cases • Examples • Libraries & SDKs

Documentation Types Experience Motivation betta.io

Experience Motivation betta.io

Reference Experience Motivation betta.io

Reference Exploration Experience Motivation betta.io

Getting Started Reference Exploration Experience Motivation betta.io

Further Guidance Getting Started Reference Exploration Experience Motivation betta.io

Further Guidance Getting Started Reference Exploration Developer Journey

Understanding Developers Documentation Types Developer Journey

Understanding Developers Documentation Types Developer Journey Building Blocks

Money betta.io

Developer Experience 1st site visit Successful integration

Successful Integration

First implementation

First implementation $$$

Core Use Case $$$

Core Use Cases • Sufﬁciently simple betta.io

Core Use Cases • Sufﬁciently simple • Relevant to a
majority of integrations betta.io

Core Use Cases • Sufﬁciently simple • Relevant to a
majority of integrations • Minimal overlap betta.io

Exercise betta.io

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

What use cases are presented most prominently?

What use cases are presented most prominently? What do you think their core use cases are? (Bonus)

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)

betta.io

betta.io • Charge a customer money once

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

betta.io

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

• Get notiﬁed when data changes on GitHub

• Get notiﬁed when data changes on GitHub • Integrate with the GitHub.com UI

betta.io

betta.io • Log events

betta.io • Log events • Analyse log

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

• Log in users

• Log in users • ….

• Log in users • …. • ….

betta.io @cbetta

Coffee Break betta.io @cbetta

Core Use Cases • Break • Building Blocks • Maturity Model • Content Matrix betta.io

Building Blocks betta.io

Mental Models betta.io

Mental Models Information betta.io

Mental Models betta.io

How We Learn • Learn • Build • Reﬂect betta.io

How We Learn ? betta.io

How we reﬂect betta.io

How we reﬂect • Minimise ability to deviate betta.io

How we reﬂect • Minimise ability to deviate • Provide
checkpoints betta.io

How we reﬂect • Minimise ability to deviate • Provide
checkpoints • Support user error betta.io

How we reﬂect betta.io

How we reﬂect • Small steps… betta.io

How we reﬂect • Small steps… • …that clearly document
the expected output betta.io

How we reﬂect • Small steps… • …that clearly document
the expected output • …and document common mistakes betta.io

Building Blocks

Building Blocks Encrypted Communication Use Case #1

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

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

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

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)

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

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

Exercise betta.io

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

use cases be split into? What secondary building blocks exist?

use cases be split into? What secondary building blocks exist? • Charge a customer money once • Charge a customer money with a subscription

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 notiﬁed when data changes on GitHub • Integrate with the GitHub.com UI

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 notiﬁed when data changes on GitHub • Integrate with the GitHub.com UI • Register a new user • Login an existing user • Login an anonymous user

API/SDK Design betta.io

Problematic API/SDK betta.io

betta.io

betta.io Install SDK

betta.io Install SDK Initialize SDK

betta.io Install SDK Initialize SDK Charge Card

betta.io

betta.io gem install stripe

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

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

betta.io Install SDK Initialize SDK Charge Card

betta.io Install SDK Initialize SDK

betta.io Install SDK Initialize SDK Create a Customer

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

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

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

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

Problematic Documentation betta.io

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

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

betta.io

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

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

betta.io send a sms from number copy number into code
> nexmo number:buy US 1312* --conﬁrm

betta.io

betta.io Building Blocks

betta.io Content Matrix

betta.io Exploration Content Matrix

betta.io Exploration Get Started Content Matrix

betta.io Exploration Get Started Guides Content Matrix

betta.io Exploration Get Started Guides Reference Content Matrix

betta.io Exploration Get Started Guides Reference Content Matrix Install

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

Create Keys

Create Keys Create Cards

Create Keys Create Cards Register Cards

Create Keys Create Cards Register Cards Find Cards

Create Keys Create Cards Register Cards Find Cards Encrypt

Create Keys Create Cards Register Cards Find Cards Encrypt Decrypt

Create Keys Create Cards Register Cards Find Cards Encrypt Decrypt Sign

Create Keys Create Cards Register Cards Find Cards Encrypt Decrypt Sign Verify

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

Create Keys Create Cards Register Cards Find Cards Encrypt Decrypt Sign Verify

Create Keys Create Cards Register Cards Find Cards Encrypt Decrypt Sign Verify ✅ ✅ ✅ ✅ ✅

Create Keys Create Cards Register Cards Find Cards Encrypt Decrypt Sign Verify ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅

Create Keys Create Cards Register Cards Find Cards Encrypt Decrypt Sign Verify ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅

Create Keys Create Cards Register Cards Find Cards Encrypt Decrypt Sign Verify ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅

Create Keys Create Cards Register Cards Find Cards Encrypt Decrypt Sign Verify ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ❎ ❎ ❎ ❎ ❎ ❎

Create Keys Create Cards Register Cards Find Cards Encrypt Decrypt Sign Verify ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ❎ ❎ ❎ ❎ ❎ ❎ ✅ ✅

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

betta.io Why?

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 ✅

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

betta.io A Content Matrix is a tool

Maturity Model betta.io

Richardson Maturity Model betta.io

betta.io

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

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

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

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

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

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

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

betta.io

betta.io 1. Reduce complexity

betta.io 1. Reduce complexity 2. Increase reusability

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

Document Maturity Model betta.io

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

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

ﬆripe.com/docs/api#create_charge betta.io

ﬆripe.com/docs/charges#updating-saved-card-information betta.io

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

betta.io

Exercise betta.io

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

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

betta.io stripe.com/docs developer.github.com ﬁrebase.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?

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?

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?

Celebration betta.io

Experience Motivation Developer Journey betta.io

Core Use Cases $$$

Success? betta.io

Signup? betta.io

Firﬆ implementation? betta.io

Full integration? betta.io

Cuﬆomer Success == Your Success betta.io

Make your cuﬆomers successful betta.io

Supporting Success betta.io

Supporting Success betta.io • Alpha/Beta Programs

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

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

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

Stripe Atlas betta.io

Celebration betta.io

IKEA Eﬀect betta.io

Reverse IKEA Eﬀect betta.io

Developing an integration is a collaboration betta.io

Celebrate together betta.io

betta.io

Recap betta.io

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

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

Moﬆ of the DX happens in four phases betta.io

Exploration Getting Started Further Guidance Reference betta.io

The moﬆ common ways your product enables a developer to
succeed deﬁne your Core Use Cases betta.io

Shared elements between your Core Use Cases deﬁne your Building
Blocks betta.io

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

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

A successful cuﬆomer should be celebrated as if it was
a success of your own betta.io

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

Queﬆions betta.io

FAQ betta.io

Which company does this the beﬆ? betta.io

Experience Motivation betta.io

Stripe Experience Motivation betta.io

Stripe Twilio Experience Motivation betta.io

Pusher Stripe Twilio Experience Motivation betta.io

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

How do I measure ROI? betta.io

Measure Change betta.io

betta.io

Measure Success betta.io

Should I own my SDKs? betta.io

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

Tooling? betta.io

Queﬆions betta.io

Thank you criﬆiano@betta.io betta.io

Developer Experience Workshop

Developer Experience Workshop

More Decks by Cristiano Betta

Other Decks in Technology

Featured

Transcript