A presentation at DevRel/Asia by Tomomi ❤ Imura
Developer-Centric Design for Better Experience Tomomi Imura (@girlie_mac)
Hello! I am Tomomi Imura Cloud Dev Advocate at Microsoft Advisor at Code Chrysalis @girlie_mac 2
Designing Developer Experience
Designing Developer Experience 1. Definitions 2. My experiences & stories
“ “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 @girlie_mac 5
“ “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 @girlie_mac 6
“ “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 @girlie_mac 7
8 By Jared Spool (CC-BY-SA)
“ No guarantee for your misoperations You are obligated to pay 7-Eleven Coffee machine: https://twitter.com/ryo_sasaki/status/560229808362102784 押し間違えても、 一切保証出きません 9
Bad UX: User Reactions When a person tries to [pour a cup of coffee at 7-Eleven]: ⩥ ⩥ ⩥ ⩥ ⩥ @girlie_mac Confused Trial & Error approach Frustrated Repeat Totally upset “ Come on, just give me f-ing coffee! 10
Bad DX: Developer Reactions When a dev tries to use [API with poorly written docs / No code samples]: ⩥ ⩥ ⩥ ⩥ ⩥ @girlie_mac Confused Trial & Error approach Frustrated Repeat Totally upset “ Come on, just give me f-ing API that works! 11
Poor DX: Examples - Dev Platform / API No Documentation (Ugh!) / Poor Docs No changelog / versions API (services, platform, tools, etc) is just too complex No tools or SDK Inconsistent method names (naming conventions, API patterns, etc) ⩥ Non-verbose error messages or explanations ⩥ Operational problems - unstable service ⩥ ⩥ ⩥ ⩥ ⩥ @girlie_mac 12
Poor DX: Examples - DOcs ⩥ ⩥ ⩥ ⩥ ⩥ ⩥ ⩥ @girlie_mac Bad IA - hard to browse/navigate No changelog Outdated content Too complex No code samples / templates No diagrams, screenshots, illustrations No design guidelines / HIG 13
“ Approximately 65 percent of the population are visual learners Visual learners learn through seeing. They may think in pictures and learn best from visual displays (Mind Tools, 1999) @girlie_mac 14
Designing Developer Experience 1. Definitions 2. My experiences & stories
Improving Microsoft Teams Docs Goal: To reduce the learning curve for new developers and create a happy path for them @girlie_mac 16
Phases of Dev Life Cycle of Teams App Development develop Onboard & learn Publish Test Monitor 17
Phases of Dev Life Cycle of Teams App Development develop Onboard & learn Publish Test Monitor 18
Ways developers learn on their own Docs - where the journey begins! @girlie_mac https://insights.stackoverflow.com/survey/2018 Dev Journey: Onboarding Experience 19
Dev Journey: Onboarding Experience Engineer Tomomi says: “OMG, I feel really stupid 😭” DevRel Tomomi says: “Hmm, this process must be giving her a bad developer experience. We need to fix this.” @girlie_mac 20
Know Your Developers Developer-centric design = Empathy-driven design @girlie_mac 21
Collecting Use-Cases & Persona No such thing as “average developers” Find out who your developers are what they try to achieve ⩥ ⩥ ⩥ ⩥ @girlie_mac Types of business Demogeographic Goals & challenges Product knowledge & experience 22
Collecting Use-Cases & Persona For example: What they try to achieve ⩥ ⩥ ⩥ Publishing App: Survey app Custom automations: Git / CI notifications Custom tool: Helpdesk tool … Who they are: Experience levels ⩥ ⩥ ⩥ ⩥ @girlie_mac Microsoft-all-the-things pro developers Unfamiliar with MS tech stacks but experienced with similar products Web developers Non-Engineers - No/Low-code 23
Interviewing Developers Figuring out their pain points Who they are & what they do @girlie_mac Company A SI (Microsoft Partner) , building internal tools for Teams Company B SaaS startup (No prior experiences with MS platforms), porting their product into Teams Company C EdTech (Front-end / Content), creating educational content to be viewed in Teams Company D Healthcare (Low code solutions), creating automation flows 24
Understanding their Pains Be honest to them so they tell you honest stories too. Hear them rant! ⩥ Don’t get offended ⩥ Admit your mistakes ⩥ Find where confusions come from @girlie_mac 25
Immediate Actions ⩥ ⩥ ⩥ ⩥ @girlie_mac Bug report & fix Feedback to appropriate teams Follow-ups Brainstorming ⊳ Prioritizing content ⊳ What to be changed ⊳ What to be added ⊳ And how to present 🧠 26
Improving Docs ⩥ ⩥ ⩥ ⩥ ⩥ ⩥ ⩥ ⩥ ⩥ @girlie_mac More concise overview & getting started page Beginner-friendlier Table of Contents Prioritize & de-prioritize content & rearrange More visual elements Diagrams & charts Use-cases Terminology & better descriptions Inclusive supports - no-code / low-code Design guidelines & Figma assets 27
Before @girlie_mac After 28
Success Metrics ⩥ ⩥ ⩥ ⩥ ⩥ @girlie_mac Massive increase in the docs KPI Score Increase in click-thru rate Increase in dwell rate Decrease in bounce rate Decrease in exit rate 29
Special Thanks My awesome teammates at Microsoft: ⩥ Dev Advocacy team ⩥ Product team ⩥ Design team ⩥ Leaderships for support @girlie_mac 30
Internationalizing Slack Docs & Tutorials Goal: To not let the growing community left behind, support technical content in Japanese @girlie_mac 31
Know Your Developers Again, It is all about Empathy @girlie_mac 32
Asking Developers ⩥ ⩥ ⩥ ⩥ @girlie_mac Conference attendees Customers & partners Online Survey Feedback (tweets & email) 33
Listening to Developers Majority of developer in Japan wanted the docs available in Japanese ⩥ Language barrier is thicker than anybody (in the US) imagines ⩥ Docs in friendly-tone is nice but don’t get translated by machine correctly ⩥ The 3rd party tutorials in Japanese are outdated @girlie_mac 34
Convincing the Importance Internationalization = often lower priority ⩥ Budget ⩥ Unknown business impact ⩥ Not enough head-count / bandwidth ⩥ Arrogance & lack of empathy - “Oh, people should learn English” ⩥ Lack of knowledge - how to market right @girlie_mac 35
Just Do It ⩥ Volunteer & ask friends/coworkers for help ⩥ Show stats & feedback ⩥ Send execs to Japan 😜 (= have them talk to customers!) ⩥ Prioritize which content must be translated (No time & budget for the entire docs) ⩥ Research the market! @girlie_mac 36
37
Success Metrics ⩥ The announcement tweet got the record largest # of retweets ⩥ Increase API calls from ja-jp region ⩥ Increase # of apps built in ja-jp region ⩥ Become the fastest growing dev community ⩥ Increase community-driven content As of March 2020 @girlie_mac 38
39
Special Thanks My awesome former teammates at Slack: ⩥ Internationalization team ⩥ All teams in Japan & Japanese-speaking employees in the US, Canada, and Australia ⩥ Execs for sponsoring @girlie_mac 40
More DevRel talks on technical content & developer education (and JavaScript) by me are available at: slideshare.net/tomomi @girlie_mac 41
thanks! @girlie_mac Any questions? @girlie_mac 42
Credit: ⩥ Presentation template by SlidesCarnival @girlie_mac 43
Tomomi Imura talks about improving the developer experience of technical content & docs and her own experiences from the most recent project at Microsoft and her previous work at Slack.
for free. You
can too.