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

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デザインする⽅法

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  4. A. 好き放題⾔われる
    企画 < ブランドイメージの⾊を使ってほしんだけど
    サポ < 我々のお客様のリテラシーでは使えない。ボタンを⾚くして!
    開発 < こんな変えたらバックエンドも作り直しになるよ。元のUIを使ってね
    役員 < なんか違うな〜。私のイメージと違うからやり直して
    仲間はずれのUI
    が増える
    合意形成の難しさ ●○○○

    View full-size slide

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

    View full-size slide

  6. C. 鶴の⼀声
    企画 < ....(誰かが⾔うのに合わせればいいか)
    サポ < ....(開発がよければいいや)
    開発 < ....(どうせ役員くんが決めるんでしょ)
    役員 < なんか違うな〜。私のイメージと違うからやり直して
    合議制の機能不全
    合意形成の難しさ ● ● ● ○

    View full-size slide

  7. D. 「スピード重視で!」
    合意形成の難しさ ● ● ● ●

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  40. 3. 実現⽅法の追求

    View full-size slide

  41. 内容の濃いコミニュケーションをする
    「なんのため」に作るか明⽂化し、共通認識を得る
    UI1つづつに対して、そのUIがあるとユーザーにどんな「価値」があるか⾔葉にする。

    やること
    ・アイコン付きのボタンを⾒て、確信を持って送信が押せる。

    何のため?
    ・⽂字をよく読まずに操作できる。
    ・アイコンに固有の意味をもたせ、どこで⾒ても何が起きるかわかるようにする。
    3. 実現⽅法の追求

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  45. 計画より戦略

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide