Let’s say, you are searching certain frameworks, or APIs to satisfy your new project- what if you stumble on some awesome-sounding shiny website, but it comes with very poor documentations. Do you want to try it out, or keep searching something else? Or when you see a GitHub project with no README, how do you feel? I think this developer experience is one of big key factors for you to decide what technologies to use. User-Experience (UX) focuses on understanding what users' need and value, and provide practical products or services. This human-computer interaction acts the same when the users are developers. The ideas of “Developer Experiences” is to establish a good relationship between developers and platform providers. So, as a developer evangelist, what can we do to improve DX to get developers' interests? In this talk, Tomomi Imura will talk about her experiences, and how I create developer-centric contents and docs to drive the community and acquired new developers and customers.

1. Creative Content
For BETTER DEVELOPER EXPERIENCE
Tomomi Imura (@girlie_mac)

2. 日本語のスライドはこちら
https://goo.gl/RqsWuv
https://slideshare.net/tomomi/
Japanese-creative-technical-content-for-
better-developer-experience

3. @ girlie_mac
● dev relations at Slack
● api.slack.com
● advocate open web & technology
● code JavaScript & Node.js
● hack useless stuff
● advisor at Code Chrysalis
● Live in foggy San Francisco
tomomi imura

4. @ girlie_mac
Where I Have Been Doing DevRel at:
Slack API Nexmo SMS,
Voice, 2FA
API
HTML5 (W3C) &
Windows Phone webOS Apps
PubNub Realtime API

5. @ girlie_mac
I Write Articles on:
Technical editor for some books by:

6. Awareness & Acquisition

7. SearchTweets,
newsletters, etc.
Word of mouth,
on Slack, etc.
API, Platform, Framework, Tools, etc.
How Do Developers Find Your...

8. @ girlie_mac
Awareness
If devs find your shiny new stuff passively on
TechCrunch, ProductHunt, announcement /
marketing blog, etc:
Sounds awesome!

9. @ girlie_mac
Awareness & Acquisition
If devs find your use cases, and with even better,
easy-to-follow tutorials for how to build them:
Sounds awesome! I may wanna try!

10. @ girlie_mac
Get Devs Hands Dirty!
● Workshops
● Hackathons
● Blog & Tutorials
○ Docs
○ Videos & Screencasts
○ Webinars

11. @ girlie_mac
Get Devs Hands Dirty!
● Workshops
● Hackathons
● Blog & Tutorials
○ Docs
○ Videos & Screencasts
○ Webinars
My focus!

12. Make It Practical!

13. @ girlie_mac
Practical & Fundamental
Tutorial examples:
● [Awesome API] 101
● Beginner Guide of [Awesome API]
● Getting Started with [Awesome API] using [Node SDK]
● How to Build To-Do App with [Awesome.JS Framework]
● [Awesome API] Tips & Tricks
● [Awesome API] Best Practice

14. @ girlie_mac

15. @ girlie_mac

16. @ girlie_mac

17. Make It Interesting!

18. @ girlie_mac
Interesting Projects
Creative tutorials:
● Physical Slackbot
● Twitter Visualization with D3.js
● Building a Raspberry Pi Spy Cam
● “Alexa, Call My Mom”
● Gotta Catch’em All! PokémonGo Relatime Mapping

19. @ girlie_mac
Brainstorming ideas

20. @ girlie_mac
Project Types
● Purely fun
○ Pokémon
○ IoT - cat camera
● Targeting a community / Ecosystem
○ JavaScript - e.g. React, Angular, D3
○ MCU - e.g. Arduino, Raspberry Pi
○ Web standards - HTML5
○ Amazon Alexa

21. @ girlie_mac

22. @ girlie_mac

23. @ girlie_mac
https://medium.com/slack-developer-blog/building-a-sentiment-analysis-
bot-with-ibm-watson-and-raspberry-pi-eeb399bb8803

24. @ girlie_mac
Let Devs Adopt the Ideas
“Pokemon is not how we win the big $$$
companies”
“Don’t get me wrong. We are
providing ideas”

25. @ girlie_mac
Adopting the Ideas for Real Apps
{
id: 'pikachu-012',
lat: 37.7234,
lon: -122.472
}
{
id: 'taxi-012',
lat: 37.7234,
lon: -122.472
}

26. Go Social

27. @ girlie_mac
Get Carded on Social Media
3
1
1
2

28. @ girlie_mac
It’s So META!
<!-- Twitter Card data (with a large image) -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Title Here">
<meta name="twitter:description" content="Page description">
<meta name="twitter:image" content="http://example.com/image.jpg">
<!-- FB Open Graph data -->
<meta property="og:title" content="Title Here">
<meta property="og:type" content="article">
<meta property="og:url" content="http://www.example.com/">
<meta property="og:image" content="http://example.com/image.jpg">
<meta property="og:description" content="Page description">
3
1
2

29. @ girlie_mac
Developer-Focused Social Space
Newsletters
Code Samples & Demo

30. Adoption & Retention
Improving Developer Experiences

31. @ girlie_mac
User-Experience
User-Experience (UX) focuses on having a
deep understanding of users, what they need,
what they value, their abilities, and also their
limitations.”
Source: usability.gov
“

32. @ girlie_mac
User-Experience
User-Experience (UX) focuses on having a
deep understanding of users, what they need,
what they value, their abilities, and also their
limitations.”
Source: usability.gov
“

33. @ girlie_mac
Developer-Experience
Developer-Experience (DX) focuses on having
a deep understanding of developers, what
they need, what they value, their abilities, and
also their limitations.”
Source: usability.gov
“

34. @ girlie_macs://twitter.com/wheelyweb/status/849969689388134400

35. @ girlie_macBy Jared Spool https://flic.kr/p/5ckBZq CC-BY-SA

36. @ girlie_mac
https://twitter.com/ryo_sasaki/status/560229808362102784
Coffee machine
fiasco at 7-Eleven
in Japan

37. @ girlie_mac
Bad UX: User Reactions
1. Get confused
2. Guess and fail
3. Frustrated
4. Repeat 2 - 3
5. Totally pissed off

38. @ girlie_mac
Bad DX: Developer Reactions
1. Get confused of enigmatic API & Docs
2. console.log(“wtf”) & get errors
3. Frustrated
4. Repeat 2 - 3
5. Totally pissed off

39. @ girlie_mac
Poor Docs & Tuts DX Examples
● No documentation
● Poor onboarding experience
● Bad browsing experience, no ref links
● No diagram, screenshot, picture etc.
● Too complex
● Too marketing-y (Stock photo of a businessman in suit?)
● PDF everything (Docs != Whitepaper)

40. @ girlie_mac
Open Source Survey by GitHub
http://opensourcesurvey.org/2017/
#1 problem!

41. @ girlie_mac
Docs & Tuts Should be
● Navigable
● Practical and/or interesting
● newbie-friendly
○ Prerequisite, How to set up
○ onboarding with “Hello, world”
○ Hands-on
● Including code samples (Gee, who doesn’t?)
● Informative - doet your devs uninformed about dev tools & libs

42. @ girlie_mac
User-Friendliness
https://twitter.com/kaz/status/757733261938298881

43. @ girlie_mac
Developer-Friendliness

44. @ girlie_mac
Slack API Doc (Even More) Kawaii-fy Project (j/k!)

45. @ girlie_mac
TL;DR
● Write to attract developers
○ Make them practical / interesting so they want to try
● Syndicate your content
● Go social
○ Use the social media meta tags
○ Dev-focused media
● Improve dev experience to keep devs engaged

46. @ girlie_mac
Developer Experience Matters!
really

47. @ girlie_mac
Thank you!
@girlie_mac
girliemac.com
github.com/girliemac
slideshare.net/tomomi
BY-SA

48. @ girlie_mac
Attribution:
Open Emoji by Emoji-One (CC-BY 4.0)