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

by はのめぐみ / Megumi Hano

Slide 1

Slide 1 text

エンジニアとチームを組んで見えないものをデザインする TokyoGirls.rb #02 2019.12.21 羽野めぐみ

Slide 2

Slide 2 text

...って何でしょう？見えないものエンジニアとチームを組んでをデザインする

Slide 3

Slide 3 text

「」まずは見えるもののデザインを紹介します

Slide 4

Slide 4 text

食べるのが好き！で集まるグルメアプリ「キッチハイク」プロダクトデザインを担当しています＼見えるもの／

Slide 5

Slide 5 text

プロダクト開発でのデザインってなに？

Slide 6

Slide 6 text

人のことを考えることプロダクトを使ってくれる人によって答えはいろいろあるけど...

Slide 7

Slide 7 text

どんな背景があってどんなニーズがあってどんなキモチでどんな使い方をしてくれるのか何に価値を感じてくれるのか？

Slide 8

Slide 8 text

プロダクトそれ自体はみえるけど、背後にある人のことは見えにくい

Slide 9

Slide 9 text

背後にある人のことは見えにくいプロダクトそれ自体はみえるけど、

Slide 10

Slide 10 text

今日のテーマ

Slide 11

Slide 11 text

チームのことを考えるプロダクトをつくる

Slide 12

Slide 12 text

自己紹介何をしてきたか

Slide 13

Slide 13 text

羽野めぐみ @featherplain プロダクトデザイナフリーランスを2年経験したあと、キッチハイクのデザイナとして入社しました

Slide 14

Slide 14 text

いつかは自分の手から離れていってしまう寂しさを感じていたフリーランス時代は、受託制作をやっていた受託経験者あるあるかも当時のおしごと

Slide 15

Slide 15 text

プロダクトを育てるのが楽しかった自分自身でOSSをつくってリリース・メンテナンス多数の人と関わりながら、ひとつのモノを作り上げるのが楽しかったテックカンファレンスの運営に深くコミットした経験一方、業務外活動

Slide 16

Slide 16 text

チームを組んでサービスにコミットすることに興味が湧いた

Slide 17

Slide 17 text

食べるのが好き！で集まるグルメアプリプロダクトデザインを担当しています＼キッチハイクに入社／

Slide 18

Slide 18 text

フリーランス時代のチームと向き合うきっかけ失敗談

Slide 19

Slide 19 text

失敗談自分のせいでチームが炎上しかけた話

Slide 20

Slide 20 text

あるプロジェクトで、チームメンバーから提案があった提案の内容そのものは、実行に移せるものではなかった提案に対して、正論だけを振りかざして相手を否定するような冷たい態度を繰り返してしまっていた経緯

Slide 21

Slide 21 text

当時の自分の考え客観的にみて自分が正しい。正しいことを言って何がいけないの？

Slide 22

Slide 22 text

何がおこったか

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

「もう、あなたと仕事したくありません。」

Slide 25

Slide 25 text

何がおこったか幸い、チームリーダーがすぐに気づいて鎮火自分の冷たい対応に対して、相手の不満が爆発やりとりしていた Facebook のグループ上で、「もうあなたと仕事したくありません」の怒りの投稿

Slide 26

Slide 26 text

失敗談ではないけれど... 無言マージでメンタルが辛かった話

Slide 27

Slide 27 text

辛かったことあるのは機械的な無言マージ自分のプルリクエストに対して、相手から何も反応がない

Slide 28

Slide 28 text

何が辛かったのか相手の感情が見えない理由がわからない

Slide 29

Slide 29 text

なぜ、辛いことが起こるのか

Slide 30

Slide 30 text

炎上しかけたときも無言マージのときも

Slide 31

Slide 31 text

体温のあるコミュニケーションがなかった

Slide 32

Slide 32 text

体温のあるコミュニケーション文脈の共有

Slide 33

Slide 33 text

「」わたしが考える体温

Slide 34

Slide 34 text

文脈を共有すること「コンテキスト」とも言います「」わたしが考える体温

Slide 35

Slide 35 text

どんな背景があってどんなニーズがあってどんなキモチでどんな使い方をしてくれるのか何に価値を感じてくれるのか？

Slide 36

Slide 36 text

デザインする上での大事な視点

Slide 37

Slide 37 text

デザインの考え方や視点をチームに応用してみる

Slide 38

Slide 38 text

チーム全体の体験を良くした話事例

Slide 39

Slide 39 text

今年の3月にデザインの共有ツールを移行しました Figma inVision

Slide 40

Slide 40 text

発端はデザイナの課題感作業効率やデザイン共有プロセスが煩雑化してしまう

Slide 41

Slide 41 text

発端はデザイナの課題感あれ？Figma触ってみたらいい感じだぞ

Slide 42

Slide 42 text

発端はデザイナの課題感ぜひチームに導入したい

Slide 43

Slide 43 text

ツールを使う「ユーザー」は自分だけではない

Slide 44

Slide 44 text

実際に使う人のことを考えたいツールを使う「ユーザー」は自分だけではない

Slide 45

Slide 45 text

自分だけではなくエンジニアの体験も上がるのか？確かめたい

Slide 46

Slide 46 text

まずは、文脈の共有文脈を共有課題感と解決したいことなどデザイナ側の相手の文脈も把握するエンジニア全員に感想をヒアリングして、試用期間として2週間ほど確保した

Slide 47

Slide 47 text

結論満場一致でFigmaいいね

Slide 48

Slide 48 text

結論満場一致でFigmaいいねエンジニアは何に価値を感じてくれた？

Slide 49

Slide 49 text

みんな口を揃えて言ったこと俯瞰して画面遷移を確認できるのがGOOD でも、以前はそれができていなかった

Slide 50

Slide 50 text

ここで、一歩踏み込もうどうして俯瞰して画面遷移を見たいの？

Slide 51

Slide 51 text

デザイナエンジニアデータデータあ、この画面で名前をinputして submit するんだな。次の画面で submitしたが表示されるから、画面遷移のときにを引き継ぐ処理をしなきゃ。この質問設計で、ユーザーさんは違和感ないかな？ユーザーストーリーに沿っているかな？やっぱりこの質問は最初に聞いた方が良さそう。質問のことば選び大丈夫かな？他にいいライティング考えられそう。

Slide 52

Slide 52 text

あれ、考えてることが違う...？

Slide 53

Slide 53 text

この質問設計で、ユーザーさんは違和感ないかな？ユーザーストーリーに沿っているかな？やっぱりこの質問は最初に聞いた方が良さそう。質問のことば選び大丈夫かな？他にいいライティング考えられそう。デザイナのキモチ

Slide 54

Slide 54 text

この質問設計で、ユーザーさんは違和感ないかな？ユーザーストーリーに沿っているかな？やっぱりこの質問は最初に聞いた方が良さそう。質問のことば選び大丈夫かな？他にいいライティング考えられそう。あるべき体験になっているか確認したい一連のユーザー操作を線で捉えたいデザイナのキモチ

Slide 55

Slide 55 text

データデータあ、この画面で名前をinputして submit するんだな。次の画面で submitしたが表示されるから、画面遷移のときにを引き継ぐ処理をしなきゃ。エンジニアのキモチ

Slide 56

Slide 56 text

データデータあ、この画面で名前をinputして submit するんだな。次の画面で submitしたが表示されるから、画面遷移のときにを引き継ぐ処理をしなきゃ。一連の画面遷移でのデータの流れを知りたい入力するデータの型を知りたいエンジニアのキモチ

Slide 57

Slide 57 text

を使っていてもで語ることがある同じ言葉や手段違う意味や視点

Slide 58

Slide 58 text

文脈を共有しないと分からないを使っていてもで語ることがある同じ言葉や手段違う意味や視点

Slide 59

Slide 59 text

見つめる先は違っていたりする同じモノを見ていても

Slide 60

Slide 60 text

見つめる先は違っていたりする同じモノを見ていても表層的な「ことば」に囚われない

Slide 61

Slide 61 text

「見えない」デザインまとめ

Slide 62

Slide 62 text

視点の異なるメンバーとどう一緒に作っていくか

Slide 63

Slide 63 text

体温のあるコミュニケーション文脈を共有しながらお互いを知る相手のことを解像度高く複雑なまま理解する

Slide 64

Slide 64 text

体温のあるコミュニケーション相手の関心ごとや大切にしている視点を引きだすユーザーインタビューに近い

Slide 65

Slide 65 text

「一緒に作る」スタンスを忘れないコミュニケーションを繰り返す他者へのリスペクトや想像力

Slide 66

Slide 66 text

本質は同じチームデザインもプロダクトデザインも

Slide 67

Slide 67 text

「他者と向き合うこと」デザインの手法を用いて

Slide 68

Slide 68 text

おまけと言う名の宣伝です

Slide 69

Slide 69 text

https://note.com/kitchhike/m/m8390f5bac470 キッチハイクチームの取り組みとして noteに関連記事を公開しています今回お話した事例について詳しく知りたい方へ URL

Slide 70

Slide 70 text

ありがとうございました