エンジニアとチームを組んで見えないものをデザインする / team-building-with-engineer

note : https://note.com/featherplain/n/n49ebcaf256df
YouTube: https://youtu.be/ntjtKTN0Lzk

フリーランスで活動していたデザイナが、ある会社に入ってチームのデザイナとして活動するようになりました。個人で活動していた頃は目に見えるプロダクトのデザインが中心でした。チームを組んで協業する中で、エンジニアとの温度のあるコミュニケーションを意識するようになった結果、組織デザインやチーム文化の形成などの「目に見えない」デザインに関心を持つようになりました。
デザイナからの視点で、エンジニアとの協業やチームをテーマにお話したいと思います。

Transcript

1. エンジニアとチームを組んで 見えないものをデザインする TokyoGirls.rb #02 2019.12.21 羽野めぐみ
2. ...って何でしょう？ 見えないもの エンジニアとチームを組んで をデザインする
3. 「 」 まずは 見えるもの の デザインを紹介します
4. 食べるのが好き！で集まる グルメアプリ「キッチハイク」 プロダクトデザインを 担当しています ＼見えるもの／
5. プロダクト開発での デザインってなに？
6. 人のことを考えること プロダクトを使ってくれる 人によって答えはいろいろあるけど...
7. どんな背景があって どんなニーズがあって どんなキモチで どんな使い方をしてくれるのか 何に価値を感じてくれるのか？
8. プロダクトそれ自体は みえるけど、 背後にある 人のことは見えにくい
9. 背後にある 人のことは見えにくい プロダクトそれ自体は みえるけど、
10. 今日のテーマ
11. チームのことを考える プロダクトをつくる
12. 自己紹介 何をしてきたか
13. 羽野めぐみ @featherplain プロダクトデザイナ フリーランスを2年経験したあと、 キッチハイクのデザイナとして入社しました
14. いつかは自分の手から離れていってしまう寂しさを感じていた フリーランス時代は、 受託制作をやっていた 受託経験者あるあるかも 当時のおしごと
15. プロダクトを育てるのが楽しかった 自分自身でOSSをつくってリリース・メンテナンス 多数の人と関わりながら、 ひとつのモノを作り上げるのが楽しかった テックカンファレンスの運営に深くコミットした経験 一方、業務外活動
16. チームを組んでサービスに コミットすることに興味が湧いた
17. 食べるのが好き！で集まる グルメアプリ プロダクトデザインを 担当しています ＼キッチハイクに入社／
18. フリーランス時代の チームと向き合うきっかけ 失敗談
19. 失敗談 自分のせいでチームが 炎上しかけた話
20. あるプロジェクトで、チームメンバーから提案があった 提案の内容そのものは、実行に移せるものではなかった 提案に対して、 正論だけを振りかざして相手を否定する ような冷たい態度を繰り返してしまっていた 経緯
21. 当時の自分の考え 客観的にみて自分が正しい。 正しいことを 言って何がいけないの？
22. 何がおこったか
24. 「もう、あなたと仕事したくありません。 」
25. 何がおこったか 幸い、 チームリーダーがすぐに気づいて鎮火 自分の冷たい対応に対して、相手の不満が爆発 やりとりしていた Facebook のグループ上で、 「もうあなたと仕事したくありません」の怒りの投稿
26. 失敗談ではないけれど... 無言マージで メンタルが辛かった話
27. 辛かったこと あるのは機械的な無言マージ 自分のプルリクエストに対して、相手から何も反応がない
28. 何が辛かったのか 相手の感情が見えない 理由がわからない
29. なぜ、 辛いことが 起こるのか
30. 炎上しかけたときも 無言マージのときも
31. 体温のある コミュニケーションが なかった
32. 体温のある コミュニケーション 文脈の共有
33. 「 」 わたしが考える 体温
34. 文脈を共有すること 「コンテキスト」とも言います 「 」 わたしが考える 体温
35. どんな背景があって どんなニーズがあって どんなキモチで どんな使い方をしてくれるのか 何に価値を感じてくれるのか？
36. デザインする上での大事な視点
37. デザインの考え方や視点を チームに応用してみる
38. チーム全体の体験を 良くした話 事例
39. 今年の3月にデザインの 共有ツールを移行しました Figma inVision
40. 発端はデザイナの課題感 作業効率や デザイン共有プロセスが 煩雑化してしまう
41. 発端はデザイナの課題感 あれ？Figma触ってみたら いい感じだぞ
42. 発端はデザイナの課題感 ぜひチームに導入したい
43. ツールを使う 「ユーザー」は 自分だけではない
44. 実際に使う人のことを考えたい ツールを使う 「ユーザー」は 自分だけではない
45. 自分だけではなく エンジニアの体験も上がるのか？ 確かめたい
46. まずは、 文脈の共有 文脈を共有 課題感と解決したいことなどデザイナ側の 相手の文脈も把握する エンジニア全員に感想をヒアリングして、 試用期間として2週間ほど確保した
47. 結論 満場一致でFigmaいいね
48. 結論 満場一致でFigmaいいね エンジニアは何に価値を感じてくれた？
49. みんな口を揃えて言ったこと 俯瞰して画面遷移を 確認できるのがGOOD でも、 以前はそれができていなかった
50. ここで、一歩踏み込もう どうして俯瞰して 画面遷移を見たいの？
51. デザイナ エンジニア データ データ あ、 この画面で名前をinputして submit するんだな。次の画面で submitした が表示される から、画面遷移のときに を 引き継ぐ処理をしなきゃ。 この質問設計で、 ユーザーさんは 違和感ないかな？ユーザース トーリーに沿っているかな？ やっぱりこの質問は最初に聞い た方が良さそう。質問のことば 選び大丈夫かな？他にいいライ ティング考えられそう。
52. あれ 、 考えてることが 違う...？
53. この質問設計で、 ユーザーさんは 違和感ないかな？ユーザース トーリーに沿っているかな？ やっぱりこの質問は最初に聞い た方が良さそう。質問のことば 選び大丈夫かな？他にいいライ ティング考えられそう。 デザイナのキモチ
54. この質問設計で、 ユーザーさんは 違和感ないかな？ユーザース トーリーに沿っているかな？ やっぱりこの質問は最初に聞い た方が良さそう。質問のことば 選び大丈夫かな？他にいいライ ティング考えられそう。 あるべき体験になって いるか確認したい 一連のユーザー操作を 線で捉えたい デザイナのキモチ
55. データ データ あ、 この画面で名前をinputして submit するんだな。次の画面で submitした が表示される から、画面遷移のときに を 引き継ぐ処理をしなきゃ。 エンジニアのキモチ
56. データ データ あ、 この画面で名前をinputして submit するんだな。次の画面で submitした が表示される から、画面遷移のときに を 引き継ぐ処理をしなきゃ。 一連の画面遷移での データの流れを知りたい 入力するデータの型を 知りたい エンジニアのキモチ
57. を使っていても で語ることがある 同じ言葉や手段 違う意味や視点
58. 文脈を共有しないと分からない を使っていても で語ることがある 同じ言葉や手段 違う意味や視点
59. 見つめる先は違っていたりする 同じモノを見ていても
60. 見つめる先は違っていたりする 同じモノを見ていても 表層的な「ことば」に囚われない
61. 「見えない」デザイン まとめ
62. 視点の異なるメンバーと どう一緒に作っていくか
63. 体温のあるコミュニケーション 文脈を共有しながらお互いを知る 相手のことを解像度高く 複雑なまま理解する
64. 体温のあるコミュニケーション 相手の関心ごとや 大切にしている視点を引きだす ユーザーインタビューに近い
65. 「一緒に作る」スタンスを忘れない コミュニケーションを 繰り返す 他者へのリスペクトや想像力
66. 本質は同じ チームデザインも プロダクトデザインも
67. 「他者と向き合うこと」 デザインの手法を用いて
68. おまけ と言う名の宣伝です
69. https://note.com/kitchhike/m/m8390f5bac470 キッチハイクチームの 取り組みとして noteに関連記事を 公開しています 今回お話した事例について 詳しく知りたい方へ URL
70. ありがとうございました