グローバル・リモート業務を支える技術とUI

 グローバル・リモート業務を支える技術とUI

「同僚はみんな同じ場所で同じ時間に働いている」という前提が崩れたとき、ワークツールはどう変わる必要があるのか? 自由な働き方と円滑な業務遂行を両立させるために開発されたいくつかのツールを、技術、UI、IA などの側面から見ていきます。

E8960709ddcea7a61690021eb7592d79?s=128

Lena Morita

June 17, 2020
Tweet

Transcript

  1. グローバル
 リモー ト業務を
 ⽀える技術とUI LENA MORITA

  2. @mirka Software Engineer at Automattic Co-Director at
 Women Who Code

    Tokyo LENA MORITA
  3. パーソナル
 リモー ト業務を
 ⽀える技術とUI LENA MORITA

  4. @mirka ! Bluetoothボタン

  5. @mirka PROBLEM

  6. @mirka Bluetoothボタンを テーブルに貼っておく 朝⾷時に押す SOLUTION

  7. @mirka 昼⾷、 ⼣⾷、 就寝の ⽬安時間が カレンダーに登録される

  8. 本題

  9. and more!

  10. WordPress.com — React/Redux SPA 2014–present

  11. None
  12. @mirka Uruguay United States UK (from Spain) Slovakia Romania Japan

    Philippines Denmark MY TEAMMATES BY COUNTRY
  13. @mirka ⾃由な時間と場所で働ければ 多様で優秀な⼈材が集まる 新しい働き⽅を可能にする
 ツール・仕組みが必要 WHY?

  14. @mirka リモートワークの弱みを 強みに変える

  15. ワークツールの内製ってどうなの

  16. @mirka BOUNDARIES OF SCALE Users Supply chain Remote work

  17. @mirka • 雑に開発される • メンテされない • デザイナー不在 ツール内製あるある

  18. @mirka 社内で必要なものを サービス化前提で開発するメリット ✓ 開発リソースが割ける ✓ ドッグフーディング ✓ 本事業も強くなり好循環 Cloud

    infrastructure Logistics
  19. 作ったもの

  20. None
  21. @mirka PROBLEM リモートで働く カスタマーサポートの スケジュール管理

  22. @mirka カスタマーサポートの特徴 • 時間ごとのニーズ予想に基づいた⼈員配置 • メール、チャットなど複数の持ち場 • 担当プロダクトがいろいろある

  23. @mirka Automattic カスタマーサポートの特徴 • 300⼈いる • タイムゾーンばらばら(ノマドも) • ⾃由シフト制 •

    有休無制限(休みは申告制で規定の祝⽇なし) 既存ツールでは ちょっと無理ぽ
  24. @mirka SOLUTION 徹底的な タイムゾーン対応

  25. @mirka 従業員のタイムゾーン ユーザごとの設定

  26. @mirka 従業員のタイムゾーン ユーザごと ▸ 1⽇ごとの設定

  27. @mirka 従業員のタイムゾーン シフト未提出の 週から変更される ユーザのタイムゾーンを変更すると?

  28. @mirka 表⽰に使うタイムゾーンを 切り替えるだけでいいのでは? 従業員のタイムゾーン

  29. @mirka 表⽰に使うタイムゾーンを 切り替えるだけでいいのでは? Timestamp 1592085821 14 Jun 2020
 7:03 UTC+9

    13 Jun 2020
 22:03 UTC+0 従業員のタイムゾーン
  30. @mirka “⽇付”に紐づいた情報も必要 • 従業員Aにとって、“4⽉10⽇” は休みだった • 従業員Bにとって、“6⽇1⽇” は6時間働いた 従業員のタイムゾーン

  31. @mirka “⽇付”に紐づいた情報も必要 従業員のタイムゾーン シフトの時間データ 表⽰時にタイムゾーン変換 1592085821 UTC+9 ▸ 14 Jun

    2020 7:03 UTC+0 ▸ 13 Jun 2020 22:03 ⽇付ごとのデータ タイムゾーン固定 2020-06-01 Africa/Lagos +
  32. @mirka 全員の俯瞰図(1⽇) 従業員のタイムゾーン

  33. @mirka 全員の俯瞰図(1⽇) 従業員のタイムゾーン

  34. @mirka 全員の俯瞰図(1⽇) 従業員のタイムゾーン 24 h June 3rd in UTC 12

    h 12 h
  35. @mirka PROBLEM スケジュール作成作業が だいぶ煩雑

  36. @mirka Start Jun 3, 2020 10:00 End Jun 3, 2020

    12:00 既存のシフト管理ツールは ⽇時の⼿⼊⼒がほとんど
  37. @mirka SOLUTION 複雑な作業が苦にならない UI インタラクション

  38. @mirka ネイティブ級のマウス操作 作り込んだUI

  39. @mirka ネイティブ級のマウス操作 作り込んだUI Gesture recognizer compose( selectRange, resize, drag, hover,

    fillRange, ... ) Gesture object { type: "drag", startContext: { time: 40320, row: 3, x: 1116, y: 245, }, ... } Raw browser events Apply gesture applyGesture( options, gesture, blocks ) MouseEvent KeyboardEvent
  40. @mirka ネイティブ級のマウス操作 作り込んだUI compose( selectRange, resize, drag, hover, fillRange, ...

    ) { type: "drag", startContext: { time: 40320, row: 3, x: 1116, y: 245, }, ... } applyGesture( options, gesture, blocks ) MouseEvent KeyboardEvent Gesture recognizer Gesture object Raw browser events Apply gesture
  41. @mirka ネイティブ級のマウス操作 作り込んだUI compose( selectRange, resize, drag, hover, fillRange, ...

    ) { type: "drag", startContext: { time: 40320, row: 3, x: 1116, y: 245, }, ... } applyGesture( options, gesture, blocks ) MouseEvent KeyboardEvent Gesture recognizer Gesture object Raw browser events Apply gesture
  42. @mirka ネイティブ級のマウス操作 作り込んだUI compose( selectRange, resize, drag, hover, fillRange, ...

    ) { type: "drag", startContext: { time: 40320, row: 3, x: 1116, y: 245, }, ... } applyGesture( options, gesture, blocks ) MouseEvent KeyboardEvent Gesture recognizer Gesture object Raw browser events Apply gesture
  43. @mirka 隣接ブロックのマージ 作り込んだUI

  44. @mirka ⽇付変更線のスライド 作り込んだUI ↑ 従業員ごとの⽇付変更線

  45. @mirka 作り込んだUI

  46. @mirka Product Hunt デイリー2位

  47. いま作ってるもの

  48. @mirka コミュニケーション プラットフォーム

  49. @mirka リモート組織の真のすごさは “在宅で働けること”
 ではない

  50. @mirka 同期&⼝頭 から ⾮同期&⽂章 へ Sync → Async
 Verbal →

    Written リモー ト組織のポテンシャル オフィスでの働き⽅を オンラインで再現
  51. @mirka ⾮同期・⽂章型コミュの強さ • 思考の明晰化 • その場にいなくても
 誰でも読める・参加できる • いつまでも残る •

    検索可能
  52. @mirka WITHIN AUTOMATTIC COMMUNICATION TOOLS 1:1 Pair coding Team call

    ⼤事なこと 残しておくこと 流れてもいいこと プライベートな会話 同期性が⾼い ⾮同期
  53. @mirka

  54. @mirka FEED WIKI フォローすれば勝⼿に流れてくる タイムリーに読みたい 書き⼿が明確 知りたいときに読みに⾏く ⻑期的に有⽤ 誰でも編集できる Notion,

    Google Docs Blogs, Twitter, Slack +
  55. @mirka チームやトピックごとに1つのP2 Team A Team B Design Marketing 組織ごとのP2ネットワーク

  56. @mirka Team A Team B Design Marketing 組織内のユーザはどこにでも投稿できる Write

  57. @mirka Team A Team B Design Marketing 組織内のユーザはどこにでも投稿できる Write クロスポスト

  58. @mirka Team A Team B Design Marketing 興味のあるトピックをフォロー Read

  59. @mirka Fei Wong Jessie Fortman Event supplier contract Reply Follow

    Like • デザイン考察 • 新機能の計画 • 契約書の確認願い • 新しいプロセスの提案 • 質問、意⾒、感想 • 完了報告 投稿の例 コメントの例 FEED
  60. @mirka Fei Wong Jessie Fortman Event supplier contract Reply Follow

    Like FEED @Fei Wong #contracts • デザイン考察 • 新機能の計画 • 契約書の確認願い • 新しいプロセスの提案 • 質問、意⾒、感想 • 完了報告 投稿の例 コメントの例
  61. @mirka Fei Wong Jessie Fortman Onboarding tasks Contributors • FAQ

    • オンボーディング • ドキュメンテーション ページの例 WIKI
  62. @mirka 圧倒的 ⾒える化

  63. 最後に

  64. THANK YOU!