Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Story-Assured Design で開発チーム全員でデザインする

740 views

Published on

The presentation describes why and how AbemaTV has updated their product design workflow from Atomic Design to Story-Assured Design with some examples.

Published in: Design
  • Be the first to comment

  • Be the first to like this

Story-Assured Design で開発チーム全員でデザインする

  1. 1. Story-Assured Design で
 開発チーム全員でデザインする 株式会社サイバーエージェント 五藤 佑典 - 2019.03.15 DXEL.3 エンジニアとデザイナーが「いい関係」を築くために LT -
  2. 2. • California State University, San Bernardino グラフィックデザイン専攻 • ソフトウェアエンジニア @ サイバーエージェント • 株式会社 AbemaTV 開発本部 • New Device チーム • あらゆるデバイスに AbemaTV を展開するための技術を
 提供するチーム • Streaming Client チーム • AbemaTV の再⽣品質を軸に UX エンジニアリングに
 コミットするチーム • 動画技術エバンジェリスト • 世界各国に⾜を運び動画技術に関する情報をキャッチアップし、
 社内外の動画サービスの発展に貢献するロール • DesignOps 推進バックエンド • ⼤規模組織でスケールできるプロダクトデザイン開発組織構築 五藤 佑典 YUSUKE GOTO https://ygoto3.com/ @ygoto3_
  3. 3. • California State University, San Bernardino グラフィックデザイン専攻 • ソフトウェアエンジニア @ サイバーエージェント • 株式会社 AbemaTV 開発本部 • New Device チーム • あらゆるデバイスに AbemaTV を展開するための技術を
 提供するチーム • Streaming Client チーム • AbemaTV の再⽣品質を軸に UX エンジニアリングに
 コミットするチーム • 動画技術エバンジェリスト • 世界各国に⾜を運び動画技術に関する情報をキャッチアップし、
 社内外の動画サービスの発展に貢献するロール • DesignOps 推進バックエンド • ⼤規模組織でスケールできるプロダクトデザイン開発組織構築 五藤 佑典 YUSUKE GOTO https://ygoto3.com/ @ygoto3_
  4. 4. • California State University, San Bernardino グラフィックデザイン専攻 • ソフトウェアエンジニア @ サイバーエージェント • 株式会社 AbemaTV 開発本部 • New Device チーム • あらゆるデバイスに AbemaTV を展開するための技術を
 提供するチーム • Streaming Client チーム • AbemaTV の再⽣品質を軸に UX エンジニアリングに
 コミットするチーム • 動画技術エバンジェリスト • 世界各国に⾜を運び動画技術に関する情報をキャッチアップし、
 社内外の動画サービスの発展に貢献するロール • DesignOps 推進バックエンド • ⼤規模組織でスケールできるプロダクトデザイン開発組織構築 五藤 佑典 YUSUKE GOTO https://ygoto3.com/ @ygoto3_ パイロット的に1つのチームで実験した
 デザイン⼿法を…
  5. 5. • California State University, San Bernardino グラフィックデザイン専攻 • ソフトウェアエンジニア @ サイバーエージェント • 株式会社 AbemaTV 開発本部 • New Device チーム • あらゆるデバイスに AbemaTV を展開するための技術を
 提供するチーム • Streaming Client チーム • AbemaTV の再⽣品質を軸に UX エンジニアリングに
 コミットするチーム • 動画技術エバンジェリスト • 世界各国に⾜を運び動画技術に関する情報をキャッチアップし、
 社内外の動画サービスの発展に貢献するロール • DesignOps 推進バックエンド • ⼤規模組織でスケールできるプロダクトデザイン開発組織構築 五藤 佑典 YUSUKE GOTO https://ygoto3.com/ @ygoto3_
  6. 6. • California State University, San Bernardino グラフィックデザイン専攻 • ソフトウェアエンジニア @ サイバーエージェント • 株式会社 AbemaTV 開発本部 • New Device チーム • あらゆるデバイスに AbemaTV を展開するための技術を
 提供するチーム • Streaming Client チーム • AbemaTV の再⽣品質を軸に UX エンジニアリングに
 コミットするチーム • 動画技術エバンジェリスト • 世界各国に⾜を運び動画技術に関する情報をキャッチアップし、
 社内外の動画サービスの発展に貢献するロール • DesignOps 推進バックエンド • ⼤規模組織でスケールできるプロダクトデザイン開発組織構築 五藤 佑典 YUSUKE GOTO https://ygoto3.com/ @ygoto3_ より⼤きな組織へと拡張して
 展開していく動きをしています
  7. 7. Atomic Design
 堅牢で使いやすいUIを効率良く設計する https://www.amazon.co.jp/dp/B07CJ5TLK2
  8. 8. デザイナーの時の頭の中 • ⾃分が意図したように使⽤者が動いてほしい • ⼀番伝えたいメッセージを印象に残したい • 技術や機能を⼈の役に⽴つ形にしたい • プロダクトを好きになってほしい
  9. 9. エンジニアの時の頭の中 • メンテナンス性が⾼いコード設計をしたい • ⾼いパフォーマンスで動作するソフトウェアを作りたい • 不具合発⽣リスクが少ない⽅法で開発したい
  10. 10. テックリードの時の頭の中 • 事業成果に繋がるようにプロダクトをデザインしたい • ファクトに基いた決定をしたい • トライアンドエラーを繰り返すことができるように
 デザインと親和性が⾼いコード設計をしたい
  11. 11. DesignOps 推進者の時の頭の中 • 組織が⼤きくなってもデザインの品質を保ち、
 ⼈が増える程開発速度を上げたい • デザイン領域が属⼈化していなくて、
 デザイナーのアサインが柔軟にできるようにしたい • クリエイティビティを最⼤限発揮できる環境にしたい
  12. 12. いろいろな⽴場で考えた結果…
  13. 13. AbemaTV でさまざまなアプローチで
 プロダクトデザインに向き合ってきました Atomic Design 導⼊ Story-Assured Design 導⼊ 2015.10 2018.05 2019.01 DesignOps ?
  14. 14. AbemaTV でさまざまなアプローチで
 プロダクトデザインに向き合ってきました Atomic Design 導⼊ Story-Assured Design 導⼊ 2015.10 2018.05 2019.01 DesignOps ?
  15. 15. Atomic Design
 の成果 UI デザインに構造的意味を与える
  16. 16. Atomic Design
 の成果 UI デザインに構造的意味を与える チームがデザインの意味を理解しやすくなる
  17. 17. Atomic Design
 の成果 UI デザインに構造的意味を与える チームがデザインの意味を理解しやすくなる デザインの意味がコードに反映される
  18. 18. Atomic Design
 の成果 UI デザインに構造的意味を与える チームがデザインの意味を理解しやすくなる 特にエンジニアとデザイナーの間に
 共通⾔語が⽣まれコミュニケーションしやすくなる
  19. 19. しかし…
  20. 20. デザインに 意味を与えること⾃体が難しい チームで理解できる
  21. 21. Atomic Design
 が難しく感じる
 理由 デザインに与える意味がなければ
 構造はただの箱でしかない
  22. 22. Atomic Design
 が難しく感じる
 理由 デザインに与える意味がなければ
 構造はただの箱でしかない Atomic Design がただの箱になる
  23. 23. Atomic Design
 が難しく感じる
 理由 デザインに与える意味がなければ
 構造はただの箱でしかない Atomic Design がただの箱になる 箱への⼊れ⽅に悩む
  24. 24. Atomic Design
 が難しく感じる
 理由 デザインに与える意味がなければ
 構造はただの箱でしかない Atomic Design がただの箱になる わざわざ箱に⼊れる必要ある?ってなる
  25. 25. ゴールデンサークル理論で考えてみる https://www.ted.com/talks/simon_sinek_how_great_leaders_inspire_action
  26. 26. “ ” people don't buy what you do;
 people buy why you do it.
  27. 27. Why ? How ? What ?
  28. 28. Why ? How ? What ? ⼈はここに動かされる
  29. 29. Why ? How ? What ? ⼈はここでは動かない
  30. 30. Why ? How ? What ? プロダクト Atomic Design ?
  31. 31. Why ? How ? What ? プロダクト Atomic Design ? Why ? が抜けている状態
  32. 32. デザインと
 エンジニアリング
 が協業するために • How だけをチームで共有しても
 デザインとエンジニアリングの
 協業のモチベーションにはならない • Why がチームに共有されて初めて
 デザイン⼿法とエンジニアリングは
 協業する⽬的を持つ
  33. 33. Why を考える
 難しさ デザインに意味を与えることの難しさ
  34. 34. Why を考える
 難しさ デザインに意味を与えることの難しさ 意外とデザインに説明責任を
 求められてこなかった
  35. 35. Why を考える
 難しさ デザインに意味を与えることの難しさ 組織とサービスが⼤きくなったことにより
 説明できないと前進できなくなってきた 意外とデザインに説明責任を
 求められてこなかった
  36. 36. 『デザインはデザイナーだけに任せるには重要すぎる』
 ことを忘れない
  37. 37. デザインを
 チームの責務に デザイナーだけに説明責任を求めない
  38. 38. デザインを
 チームの責務に デザイナーだけに説明責任を求めない デザインの説明責任をチームで分散する
  39. 39. デザインを
 チームの責務に デザイナーだけに説明責任を求めない 開発チーム全員でデザインする デザインの説明責任をチームで分散する
  40. 40. Why? = ユーザーストーリーを先にデザインし、
 ストーリーを保証しながらビジュアルまでを
 チームでデザインしていくワークフローとして体系化 https://ygoto3.com/posts/story-assured-design/ Story-Assured Design
  41. 41. Why ? How ? What ?
  42. 42. Why ? How ? What ? 1. ストーリーデザイン
  43. 43. Why ? How ? What ? 2. デザインの構造化 1. ストーリーデザイン
  44. 44. Why ? How ? What ? 3. 視覚情報デザイン 2. デザインの構造化 1. ストーリーデザイン
  45. 45. Why ? How ? What ? 3. 視覚情報デザイン 2. デザインの構造化 1. ストーリーデザイン Story-Assured Design
  46. 46. チーム全員が
 デザインする
 ためのコツ1 画⾯デザインを Why ? から開始する • Why = ユーザーストーリーからデザインする
  47. 47. Why ? How ? What ? 3. 視覚情報デザイン 2. デザインの構造化 1. ストーリーデザイン
  48. 48. チーム全員が
 デザインする
 ためのコツ1 画⾯デザインを Why ? から開始する • Why = ユーザーストーリーからデザインする • 画⾯でどんな情報を得て、どんな動機で、
 次の画⾯に移動するか、を設計する
  49. 49. どんな情報を得て…
  50. 50. どう⾏動するか
  51. 51. プライマリーストーリー
  52. 52. セカンダリーストーリー
  53. 53. ストーリーの優先度を明確にする
  54. 54. チーム全員が
 デザインする
 ためのコツ1 画⾯デザインを Why ? から開始する • Why = ユーザーストーリーからデザインする • 画⾯でどんな情報を得て、どんな動機で、
 次の画⾯に移動するか、を設計する • スキル依存(グラフィックスキルなど)が
 無い = チームの誰もが参加できる
  55. 55. デザイナー デザイナー エンジニア エンジニア デザイン
  56. 56. QA デザイナー デザイナー
  57. 57. チーム全員が
 デザインする
 ためのコツ2 デザイン作業をブラックボックス化しない • デザイン⼯程を分割する 1. ストーリーのデザイン 2. デザインの構造化 3. 視覚情報のデザイン
  58. 58. チーム全員が
 デザインする
 ためのコツ2 デザイン作業をブラックボックス化しない • デザイン⼯程を分割する 1. ストーリーのデザイン 2. デザインの構造化 3. 視覚情報のデザイン デザインする対象スコープを
 分離して、課題を明確にする
  59. 59. チーム全員が
 デザインする
 ためのコツ2 デザイン作業をブラックボックス化しない • デザイン⼯程を分割する 1. ストーリーのデザイン 2. デザインの構造化 3. 視覚情報のデザイン みんなでデザイン
 できる対象
  60. 60. チーム全員が
 デザインする
 ためのコツ2 デザイン作業をブラックボックス化しない • デザイン⼯程を分割する 1. ストーリーのデザイン 2. デザインの構造化 3. 視覚情報のデザイン グラフィックスキル依存があり
 みんなでデザインが難しい
  61. 61. ストーリー 構造 視覚情報
  62. 62. ストーリー 構造 視覚情報 従来は全てのデザイン作業が
 視覚情報デザインの中に
 埋もれてしまい、
 デザイナー以外には
 ブラックボックス化していた
  63. 63. チーム全員が
 デザインする
 ためのコツ3 難しいデザインはモブデザイニングする • 悩んでいる部分があったら
 ⼀⼈で抱え込まない
  64. 64. チーム全員が
 デザインする
 ためのコツ3 難しいデザインはモブデザイニングする • 悩んでいる部分があったら
 ⼀⼈で抱え込まない • ビジネス要件、サービス仕様、技術制約、
 関係者を巻き込んで⼀気にコンセンサスを
 取ってデザインする
  65. 65. Figma だとモブデザイニング
 しやすい
  66. 66. チーム全員が
 デザインする
 ためのコツ4 全てのタスクをストーリーに紐づけて管理する • Why を常に意識する • 開発・運⽤期間が⻑くなると
 理由も分からずタスクをこなすだけでも
 ⼀⾒成⽴してしまうフェーズもある • Why が分かれば仕事に⼯夫の余地ができる • ⼯夫できればデザインは楽しい
  67. 67. 各デザイン⼯程はもちろん
 分析もデザインの⼀部
  68. 68. チーム全員が
 デザインする
 ためのコツ5 ストーリーごとに KPI を設定する • ユーザーの⾏動にどんな変化を与えるための
 ストーリーなのかを定量化して考える • KPI を設定することによりチームが求める
 「良いデザイン」は何なのかを共有する • 個⼈の好みを「良いデザイン」の
 判断基準に含めない
  69. 69. ファクト(事実)から
 仮説を⽴てる
  70. 70. 仮説の課題を解決する 狙いを共有する
  71. 71. 狙いを定量評価するための
 KPI を設定する
  72. 72. 全てのタスクはストーリーの
 KPI を効果的に上げられるか
 でチームの⽬線を合わせる
  73. 73. チーム全員が
 デザインする
 ためのコツ6 ストーリーオーナーを⽴てる • タスクがストーリーに沿っているか、進捗、 KPI を満たしているか、などオーナーシップ を持ってストーリーを推進する • 各デザイン、実装、ログ設計、分析など
 必要なタスクが揃っているか責任を持つ • ストーリーの成功を⾃分事化する
  74. 74. 各ストーリーオーナー が
 毎⽇ストーリーに紐づく
 タスクの進捗を
 メンバーに確認する
  75. 75. チーム全員が
 デザインする
 ためのコツ7 定量的に表せないデザインの評価基準を
 デザインの原則として定義する • 定量的に評価できない要素に対して
 チームで判断できない状態を防ぐ • 例:「操作に対して⾏くときと戻るときの物 理的、⼼理的な距離が常に⼀定であること」
  76. 76. 例:「操作に対して⾏くときと戻るときの
 物理的、⼼理的な距離が常に⼀定であること」 デザイン原則に沿っているか
 どうかをチームの判断基準にする
  77. 77. チーム全員が
 デザインする
 ためのコツ8 データ分析会で定期的にストーリーを⽣み出す • 何もしないとストーリーは⽣まれない • Google Analytics をチーム全員で⾒ながら
 ファクトから課題を探し、
 ユーザーストーリーに落とし込む
  78. 78. チーム全員が
 デザインする
 ためのコツ8 データ分析会で定期的にストーリーを⽣み出す • 何もしないとストーリーは⽣まれない • Google Analytics をチーム全員で⾒ながら
 ファクトから課題を探し、
 ユーザーストーリーに落とし込む でも、データ分析って難しい
  79. 79. 弊社の
 Digital Analytics Specialist
  80. 80. チーム全員が
 デザインする
 次の⼀歩 分析スキルをチーム全員が⾝につける 「分析したから、改善お願いね」は上⼿くいか ない。分析した⼈がデータを⼀番理解している から、改善案もセットで考えるのが基本。
  81. 81. チーム全員が
 デザインする
 次の⼀歩 分析スキルをチーム全員が⾝につける 分析⼒ • トレンド:データを時系列で⽐較する⼒ • セグメント:データを分割して読む⼒ • ベンチマーク:単体で意味を成さないデータ を何かと⽐較して意味を⾒出す⼒
  82. 82. チーム全員が
 デザインする
 次の⼀歩 分析スキルをチーム全員が⾝につける 改善⼒ • ゴール設定⼒:具体的な定量的、定性的な⽬ 標に落し込む⼒ • ゴールに向かって具体的なアクションに変え られる⼒
  83. 83. 終わりに • チーム全員でデザインを考えることにより
 デザインの説明責任が分散された • ビジネス指標も技術的制約もユーザー体験も
 プロダクトをデザインするための⼀要素 • チームメンバー全員でデザインした⽅が
 本当の意味で良いプロダクトデザインに繋がる
 (と信じている)
  84. 84. 五藤 佑典 YUSUKE GOTO ありがとうございました https://ygoto3.com/ @ygoto3_

×