「同僚はみんな同じ場所で同じ時間に働いている」という前提が崩れたとき、ワークツールはどう変わる必要があるのか？ 自由な働き方と円滑な業務遂行を両立させるために開発されたいくつかのツールを、技術、UI、IA などの側面から見ていきます。
グローバル リモート業務を ⽀える技術とUILENA MORITA
View Slide
@mirkaSoftware Engineer at AutomatticCo-Director at Women Who Code TokyoLENA MORITA
パーソナル リモート業務を ⽀える技術とUILENA MORITA
@mirka!Bluetoothボタン
@mirka PROBLEM
@mirkaBluetoothボタンをテーブルに貼っておく朝⾷時に押すSOLUTION
@mirka昼⾷、⼣⾷、就寝の⽬安時間がカレンダーに登録される
本題
and more!
WordPress.com — React/Redux SPA 2014–present
@mirkaUruguayUnited StatesUK (from Spain)SlovakiaRomaniaJapanPhilippinesDenmarkMY TEAMMATESBY COUNTRY
@mirka⾃由な時間と場所で働ければ多様で優秀な⼈材が集まる新しい働き⽅を可能にする ツール・仕組みが必要WHY?
@mirkaリモートワークの弱みを強みに変える
ワークツールの内製ってどうなの
@mirkaBOUNDARIES OF SCALEUsers Supply chain Remote work
@mirka• 雑に開発される• メンテされない• デザイナー不在ツール内製あるある
@mirka社内で必要なものをサービス化前提で開発するメリット✓ 開発リソースが割ける✓ ドッグフーディング✓ 本事業も強くなり好循環Cloud infrastructure Logistics
作ったもの
@mirkaPROBLEMリモートで働くカスタマーサポートのスケジュール管理
@mirkaカスタマーサポートの特徴• 時間ごとのニーズ予想に基づいた⼈員配置• メール、チャットなど複数の持ち場• 担当プロダクトがいろいろある
@mirkaAutomattic カスタマーサポートの特徴• 300⼈いる• タイムゾーンばらばら（ノマドも）• ⾃由シフト制• 有休無制限（休みは申告制で規定の祝⽇なし）既存ツールではちょっと無理ぽ
@mirkaSOLUTION徹底的なタイムゾーン対応
@mirka従業員のタイムゾーンユーザごとの設定
@mirka従業員のタイムゾーンユーザごと ▸1⽇ごとの設定
@mirka従業員のタイムゾーンシフト未提出の週から変更されるユーザのタイムゾーンを変更すると？
@mirka表⽰に使うタイムゾーンを切り替えるだけでいいのでは？従業員のタイムゾーン
@mirka表⽰に使うタイムゾーンを切り替えるだけでいいのでは？Timestamp159208582114 Jun 2020 7:03 UTC+913 Jun 2020 22:03 UTC+0従業員のタイムゾーン
@mirka“⽇付”に紐づいた情報も必要• 従業員Aにとって、“4⽉10⽇” は休みだった• 従業員Bにとって、“6⽇1⽇” は6時間働いた従業員のタイムゾーン
@mirka“⽇付”に紐づいた情報も必要 従業員のタイムゾーンシフトの時間データ表⽰時にタイムゾーン変換1592085821UTC+9 ▸ 14 Jun 2020 7:03UTC+0 ▸ 13 Jun 2020 22:03⽇付ごとのデータタイムゾーン固定2020-06-01 Africa/Lagos+
@mirka全員の俯瞰図（1⽇） 従業員のタイムゾーン
@mirka全員の俯瞰図（1⽇） 従業員のタイムゾーン24 hJune 3rd in UTC12 h 12 h
@mirkaPROBLEMスケジュール作成作業がだいぶ煩雑
@mirkaStart Jun 3, 2020 10:00End Jun 3, 2020 12:00既存のシフト管理ツールは⽇時の⼿⼊⼒がほとんど
@mirkaSOLUTION複雑な作業が苦にならないUI インタラクション
@mirkaネイティブ級のマウス操作 作り込んだUI
@mirkaネイティブ級のマウス操作 作り込んだUIGesturerecognizercompose(selectRange,resize,drag,hover,fillRange,...)Gestureobject{type: "drag",startContext: {time: 40320,row: 3,x: 1116,y: 245,},...}Rawbrowser eventsApplygestureapplyGesture(options,gesture,blocks)MouseEventKeyboardEvent
@mirkaネイティブ級のマウス操作 作り込んだUIcompose(selectRange,resize,drag,hover,fillRange,...){type: "drag",startContext: {time: 40320,row: 3,x: 1116,y: 245,},...}applyGesture(options,gesture,blocks)MouseEventKeyboardEventGesturerecognizerGestureobjectRawbrowser eventsApplygesture
@mirka隣接ブロックのマージ 作り込んだUI
@mirka⽇付変更線のスライド 作り込んだUI↑ 従業員ごとの⽇付変更線
@mirka作り込んだUI
@mirkaProduct Huntデイリー2位
いま作ってるもの
@mirkaコミュニケーションプラットフォーム
@mirkaリモート組織の真のすごさは“在宅で働けること” ではない
@mirka同期&⼝頭 から ⾮同期&⽂章 へSync → Async Verbal → Writtenリモート組織のポテンシャルオフィスでの働き⽅をオンラインで再現
@mirka⾮同期・⽂章型コミュの強さ• 思考の明晰化• その場にいなくても 誰でも読める・参加できる• いつまでも残る• 検索可能
@mirkaWITHIN AUTOMATTICCOMMUNICATION TOOLS1:1Pair codingTeam call⼤事なこと残しておくこと流れてもいいことプライベートな会話同期性が⾼い ⾮同期
@mirka
@mirkaFEED WIKIフォローすれば勝⼿に流れてくるタイムリーに読みたい書き⼿が明確知りたいときに読みに⾏く⻑期的に有⽤誰でも編集できるNotion, Google DocsBlogs, Twitter, Slack+
@mirkaチームやトピックごとに1つのP2Team A Team B Design Marketing組織ごとのP2ネットワーク
@mirkaTeam A Team B Design Marketing組織内のユーザはどこにでも投稿できるWrite
@mirkaTeam A Team B Design Marketing組織内のユーザはどこにでも投稿できるWriteクロスポスト
@mirkaTeam A Team B Design Marketing興味のあるトピックをフォローRead
@mirkaFei WongJessie FortmanEvent supplier contractReply Follow Like• デザイン考察• 新機能の計画• 契約書の確認願い• 新しいプロセスの提案• 質問、意⾒、感想• 完了報告投稿の例コメントの例FEED
@mirkaFei WongJessie FortmanEvent supplier contractReply Follow LikeFEED@Fei Wong#contracts• デザイン考察• 新機能の計画• 契約書の確認願い• 新しいプロセスの提案• 質問、意⾒、感想• 完了報告投稿の例コメントの例
@mirkaFei Wong Jessie FortmanOnboarding tasksContributors• FAQ• オンボーディング• ドキュメンテーションページの例WIKI
@mirka圧倒的⾒える化
最後に
THANK YOU!
mirka
tomzoh
kyonmm
elcuervo
shotatsuge
riru
tomoaki25
masakamayama
tk3fftk
takumakume
kurochan
sadonosake
motsuhiro131
reverentgeek
jeffersonlam
addyosmani
keathley
jasonvnalue
bkeepers
brianwarren
maggiecrowley
akosma
shlominoach
pedronauck
marcelosomers