$30 off During Our Annual Pro Sale. View Details »

organizing-minimal-scrum-design-team-with-a-marketer

madele-ine
September 10, 2019

 organizing-minimal-scrum-design-team-with-a-marketer

madele-ine

September 10, 2019
Tweet

More Decks by madele-ine

Other Decks in Design

Transcript

  1. 企画とチームプレーでUIデザインする⽅法

  2. UIをデザインするときの 合意形成の難しさ

  3. A. 好き放題⾔われる B. 事なかれ主義 C. 鶴の⼀声 D. 「スピード重視で!」 合意形成の難しさ

  4. A. 好き放題⾔われる 企画 < ブランドイメージの⾊を使ってほしんだけど サポ < 我々のお客様のリテラシーでは使えない。ボタンを⾚くして! 開発 <

    こんな変えたらバックエンドも作り直しになるよ。元のUIを使ってね 役員 < なんか違うな〜。私のイメージと違うからやり直して 仲間はずれのUI が増える 合意形成の難しさ •◦◦◦
  5. B. 事なかれ主義 企画 < ....(誰かが⾔うのに合わせればいいか) サポ < ....(開発がよければいいや) 開発 <

    ....(どうせ役員くんが決めるんでしょ) 役員 < ....(前回参加してないしよくわかんないや) 解像度が低いデザインが提供される 合意形成の難しさ • • ◦ ◦
  6. C. 鶴の⼀声 企画 < ....(誰かが⾔うのに合わせればいいか) サポ < ....(開発がよければいいや) 開発 <

    ....(どうせ役員くんが決めるんでしょ) 役員 < なんか違うな〜。私のイメージと違うからやり直して 合議制の機能不全 合意形成の難しさ • • • ◦
  7. D. 「スピード重視で!」 合意形成の難しさ • • • •

  8. D. 「スピード重視で!」

  9. D. 「スピード重視で!」

  10. D. 「スピード重視で!」

  11. D. 「スピード重視で!」

  12. D. 「スピード重視で!」

  13. どんどん遅くなる リカバリ速度 D. 「スピード重視で!」

  14. D. 「スピード重視で!」

  15. ある局⾯から、 ⼿戻りの量が激増する D. 「スピード重視で!」

  16. 以上の図のように、スピード重視で 効率よくゴミを量産しても仕⽅ない 合意形成の難しさ • • • • D. 「スピード重視で!」

  17. まとめ:合意形成の難しさ

  18. 好き放題⾔われる 仲間はずれのUI が増える 事なかれ主義 解像度が低いデザインが提供される 鶴の⼀声 合議制の機能不全 「スピード重視で!」 効率よくゴミを量産しても仕⽅ない まとめ:合意形成の難しさ

  19. これらが起きると… 振り回されて提供すべき価値をどうやって実現するかにフォーカスしづらい 周りは感想を⾔うに過ぎないので、全体の⼀貫性まで責任は追わない でもうまく⾏かなかったらUIデザインの失敗でしょ デザイナーが責務を全うしづらい まとめ:合意形成の難しさ

  20. None
  21. どんな状態なら責務を全うできる?

  22. 新しい案件でやった挑戦 1. 企画と当事者意識を共有する 2. デザインの⼀貫性を守る 3. 実現⽅法の追求 どんな状態なら責務を全うできる?

  23. 新しい案件でやった挑戦 どんな状態なら責務を全うできる?

  24. 1. 企画と当事者意識を共有する

  25. よくある企画の⼈の働き⽅ 予実管理が中⼼になってプロダクトから疎外された状態 問題が起きたり気が変わったときに、⼤きく調整できるのは期間くらい ⼯程1つが終わっても、全体でどうなっているか最後までわからない 1. 企画と当事者意識を共有する

  26. よくある企画の⼈の働き⽅ 予実管理が中⼼になってプロダクトから疎外された状態 管理できるもの 実質的できないもの 期間 期⽇ 当初計画の仕様 全て作業が終わるまでの作業内容 着⼿してから発⾒される開発上の不都合 1.

    企画と当事者意識を共有する
  27. プロダクトから疎外された状態とは プロダクトの良し悪しを⼀番気にしそうな職域なのに: デザイナーやエンジニアが何してるのかわからん 終わるまでずっと待たされる 終わったか終わってないか不明瞭だから、あとで気になっていじりたくなる 他⼈事のような… でも責任あるからなんか⾔いたい… 1. 企画と当事者意識を共有する

  28. ハンドリング感を得る 「私達がプロダクトの良し悪しをハンドリングしてるんだ」 ←この実感を得られる環境作り 取り決め ⼀度にあれもこれもやらず、常にひとつのUIデザインに集中 1つ終わらないと次に⾏けない 代わりに⼩刻みにレビュー シングルタスクを徹底する 1. 企画と当事者意識を共有する

  29. 2. デザインの⼀貫性を守る

  30. 最初は⼿数が物を⾔う。プロトタイピングしまくるしかない 2. デザインの⼀貫性を守る

  31. 「ミッキーマウスっぽい」って何? 企画が最初に⾔っていたコメント。冗談かと思っていた。 2. デザインの⼀貫性を守る

  32. 2. デザインの⼀貫性を守る

  33. ...。 2. デザインの⼀貫性を守る

  34. 「ミッキーマウスっぽい」か らわかったこと デザイナーでなくても「なんか違う」は ⼤抵正しい デザイナーが考えてもいない事を画⾯か ら感じている クールな雰囲気にしたい 2. デザインの⼀貫性を守る

  35. じゃあクールな雰囲気って? プロトを沢⼭作って、会話の内容をグラフィックの法則として具現化した。 2. デザインの⼀貫性を守る

  36. 会話の内容を具現化 ⾯の表現は⾓を尖らせる ダイアログ 通知 メニューリスト 2. デザインの⼀貫性を守る

  37. 会話の内容を具現化 ユーザーが押せるものは⾓を丸める ボタン ラジオボタン セレクトメニュー 丸っこさはクールと遠いが、⼀般的なUIに⾒ 慣れたユーザーのメンタルモデルに配慮す る。 2. デザインの⼀貫性を守る

  38. 会話の内容を具現化 トランジションのルール ⼤きさ UIのタイプ 遷移が始まる位置 2. デザインの⼀貫性を守る

  39. ブランドの⾚ってどれ 「ロゴの⾚と既存UIの⾚が違う!」マンセルを使⽤したカラーパレットが超不評 予想以上に利害関係者のこだわりが強く、1週間くらいかけて調整した。 2. デザインの⼀貫性を守る

  40. ⼿を動かしまくって、共通のフィーリングを発⾒する 共通のフィーリングから全体の法則を⽣み出す 双⽅で知恵を絞って決めるからこそ、守る理由になる 2. デザインの⼀貫性を守る

  41. 3. 実現⽅法の追求

  42. 内容の濃いコミニュケーションをする 「なんのため」に作るか明⽂化し、共通認識を得る UI1つづつに対して、そのUIがあるとユーザーにどんな「価値」があるか⾔葉にする。 ◦ やること ・アイコン付きのボタンを⾒て、確信を持って送信が押せる。 ◦ 何のため? ・⽂字をよく読まずに操作できる。 ・アイコンに固有の意味をもたせ、どこで⾒ても何が起きるかわかるようにする。

    3. 実現⽅法の追求
  43. 内容の濃いコミニュケーションをするための⼯夫 何のため? 企画がどうしたいかを理解して、デザイナーが具現化する 作るたびに、どうしたいか?に合致しているか企画と話す 事実に基づくスケジュール 週ごとに、先週実績から今週の⾒積と戦略を練る ユーザーの価値と⼯数バランスから1 直線の⼯程を作る 3. 実現⽅法の追求

  44. 無駄な⼿戻りを防ぐための⼯夫 プロトを元に、先回りして企画が他の利害関係者と調整

  45. 無駄な⼿戻りを防ぐための⼯夫 デザイナーは価値の実現⽅法に集中できる

  46. 計画より戦略

  47. 絵に書いた餅よりも臨機応変な戦略 例) 重要でもリスクの低いものを後回し、価値が低いが簡単なものをこなして全体の遅延を防ぐ 周りの状況やボトルネックも優先順として戦略に反映する 「あと3⽇しかないならどの順でやる?」 状況や制約を反映して、すぐ組み替えられる戦略を作る 計画より戦略

  48. 例 1 重要でもリスクの低いものを後回しにし、 価値が低いが簡単なものをこなして 全体の遅延を防ぐ 計画より戦略

  49. 例 2 ボトルネックも優先順として戦略に反映する 来週できないものはその週に気にかける必要はない 計画より戦略

  50. 例 3 「あと3⽇しかないならどの順でやる?」 わざとエクストリームな状況を想像して、トリアージの助けにする 計画より戦略

  51. ビジュアル全体の最適化⽅法は? ⼀つづつ作っていると、ぎこちないUIも出てくる 好きなタイミングで全体を整える作業を差し込む 計画より戦略

  52. UIデザインに対するマインドの変化 デザイナー: どうやったら企画の思うブランドイメージに近づくだろうか 企画のビジョンだけ信⽤して、実現⽅法を編みだすことに集中する 企画: どのデザインが(エゴではなく)ユーザーにとって価値ある改修か 納期が迫り要件をそぎ落とさないといけない時、ユーザへの「価値」を強く意識する 計画より戦略

  53. もし最初に全部UI設計してたら? デザイナーが勢いと思い込みで作り、⼀旦は形になる 短納期のため、デザイナーは揉めた箇所は適当に⾔われたとおりに作ろうと思っていた 設計に時間をかけたあと変更があると、実装でデザイナーが追い詰められる デザイナー以外が納得せず何度も作り直す UIの抜け漏れに後で気づいて直す ⼀気に仕様を説明しても、企画が全部把握して納得することは難しい

  54. 全体の結論 今回の役割分担 企画が「あるべき姿」の⽅⾓へリードする デザイナーが「あるべき姿」の実現⽅法を考える 計画より戦略 ⼀本道の⼯程を組み替えて、変化し続ける「あるべき姿」に追従する 仲間外れUIの抑制 優先順位に基づいて、本当に必要なものを先に作る

  55. ご清聴ありがとうございました