Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

Lena Morita

June 17, 2020
Tweet

More Decks by Lena Morita

Other Decks in Technology

Transcript

  1. グローバル

    リモー
    ト業務を

    ⽀える技術とUI
    LENA MORITA

    View full-size slide

  2. @mirka
    Software Engineer at Automattic
    Co-Director at

    Women Who Code Tokyo
    LENA MORITA

    View full-size slide

  3. パーソナル

    リモー
    ト業務を

    ⽀える技術とUI
    LENA MORITA

    View full-size slide

  4. @mirka
    !
    Bluetoothボタン

    View full-size slide

  5. @mirka


    PROBLEM

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  9. @mirka
    Uruguay
    United States
    UK (from Spain)
    Slovakia
    Romania
    Japan
    Philippines
    Denmark
    MY TEAMMATES
    BY COUNTRY

    View full-size slide

  10. @mirka
    ⾃由な時間と場所で働ければ
    多様で優秀な⼈材が集まる
    新しい働き⽅を可能にする

    ツール・仕組みが必要
    WHY?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  16. 作ったもの

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  19. @mirka
    Automattic カスタマーサポートの特徴
    • 300⼈いる
    • タイムゾーンばらばら(ノマドも)
    • ⾃由シフト制
    • 有休無制限(休みは申告制で規定の祝⽇なし)
    既存ツールでは
    ちょっと無理ぽ

    View full-size slide

  20. @mirka
    SOLUTION
    徹底的な
    タイムゾーン対応

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    7:03 UTC+9
    13 Jun 2020

    22:03 UTC+0
    従業員のタイムゾーン

    View full-size slide

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

    View full-size slide

  27. @mirka
    “⽇付”に紐づいた情報も必要 従業員のタイムゾーン
    シフトの時間データ
    表⽰時にタイムゾーン変換
    1592085821
    UTC+9 ▸ 14 Jun 2020 7:03
    UTC+0 ▸ 13 Jun 2020 22:03
    ⽇付ごとのデータ
    タイムゾーン固定
    2020-06-01 Africa/Lagos
    +

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  32. @mirka
    Start Jun 3, 2020 10:00
    End Jun 3, 2020 12:00
    既存のシフト管理ツールは
    ⽇時の⼿⼊⼒がほとんど

    View full-size slide

  33. @mirka
    SOLUTION
    複雑な作業が苦にならない
    UI インタラクション

    View full-size slide

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

    View full-size slide

  35. @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

    View full-size slide

  36. @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

    View full-size slide

  37. @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

    View full-size slide

  38. @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

    View full-size slide

  39. @mirka
    隣接ブロックのマージ 作り込んだUI

    View full-size slide

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

    View full-size slide

  41. @mirka
    作り込んだUI

    View full-size slide

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

    View full-size slide

  43. いま作ってるもの

    View full-size slide

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

    View full-size slide

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

    ではない

    View full-size slide

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

    Verbal → Written
    リモー
    ト組織のポテンシャル
    オフィスでの働き⽅を
    オンラインで再現

    View full-size slide

  47. @mirka
    ⾮同期・⽂章型コミュの強さ
    • 思考の明晰化
    • その場にいなくても

    誰でも読める・参加できる
    • いつまでも残る
    • 検索可能

    View full-size slide

  48. @mirka
    WITHIN AUTOMATTIC
    COMMUNICATION TOOLS
    1:1
    Pair coding
    Team call
    ⼤事なこと
    残しておくこと
    流れてもいいこと
    プライベートな会話
    同期性が⾼い ⾮同期

    View full-size slide

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

    View full-size slide

  50. @mirka
    チームやトピックごとに1つのP2
    Team A Team B Design Marketing
    組織ごとのP2ネットワーク

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  56. @mirka
    Fei Wong Jessie Fortman
    Onboarding tasks
    Contributors
    • FAQ
    • オンボーディング
    • ドキュメンテーション
    ページの例
    WIKI

    View full-size slide

  57. @mirka
    圧倒的
    ⾒える化

    View full-size slide