Story-Assured Design で開発チーム全員でデザインする
•
2 gefällt mir•2,239 views
The presentation describes why and how AbemaTV has updated their product design workflow from Atomic Design to Story-Assured Design with some examples.
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Ähnlich wie Story-Assured Design で開発チーム全員でデザインする
Ähnlich wie Story-Assured Design で開発チーム全員でデザインする (20)
Mehr von Yusuke Goto
Mehr von Yusuke Goto (17)
Story-Assured Design で開発チーム全員でデザインする
- 1. Story-Assured Design で 開発チーム全員でデザインする 株式会社サイバーエージェント 五藤 佑典 - 2019.03.15 DXEL.3 エンジニアとデザイナーが「いい関係」を築くために LT -
- 2. • California State University, San Bernardino グラフィックデザイン専攻 • ソフトウェアエンジニア @ サイバーエージェント • 株式会社 AbemaTV 開発本部 • New Device チーム • あらゆるデバイスに AbemaTV を展開するための技術を 提供するチーム • Streaming Client チーム • AbemaTV の再⽣品質を軸に UX エンジニアリングに コミットするチーム • 動画技術エバンジェリスト • 世界各国に⾜を運び動画技術に関する情報をキャッチアップし、 社内外の動画サービスの発展に貢献するロール • DesignOps 推進バックエンド • ⼤規模組織でスケールできるプロダクトデザイン開発組織構築 五藤 佑典 YUSUKE GOTO https://ygoto3.com/ @ygoto3_
- 3. • California State University, San Bernardino グラフィックデザイン専攻 • ソフトウェアエンジニア @ サイバーエージェント • 株式会社 AbemaTV 開発本部 • New Device チーム • あらゆるデバイスに AbemaTV を展開するための技術を 提供するチーム • Streaming Client チーム • AbemaTV の再⽣品質を軸に UX エンジニアリングに コミットするチーム • 動画技術エバンジェリスト • 世界各国に⾜を運び動画技術に関する情報をキャッチアップし、 社内外の動画サービスの発展に貢献するロール • DesignOps 推進バックエンド • ⼤規模組織でスケールできるプロダクトデザイン開発組織構築 五藤 佑典 YUSUKE GOTO https://ygoto3.com/ @ygoto3_
- 4. • California State University, San Bernardino グラフィックデザイン専攻 • ソフトウェアエンジニア @ サイバーエージェント • 株式会社 AbemaTV 開発本部 • New Device チーム • あらゆるデバイスに AbemaTV を展開するための技術を 提供するチーム • Streaming Client チーム • AbemaTV の再⽣品質を軸に UX エンジニアリングに コミットするチーム • 動画技術エバンジェリスト • 世界各国に⾜を運び動画技術に関する情報をキャッチアップし、 社内外の動画サービスの発展に貢献するロール • DesignOps 推進バックエンド • ⼤規模組織でスケールできるプロダクトデザイン開発組織構築 五藤 佑典 YUSUKE GOTO https://ygoto3.com/ @ygoto3_ パイロット的に１つのチームで実験した デザイン⼿法を…
- 5. • California State University, San Bernardino グラフィックデザイン専攻 • ソフトウェアエンジニア @ サイバーエージェント • 株式会社 AbemaTV 開発本部 • New Device チーム • あらゆるデバイスに AbemaTV を展開するための技術を 提供するチーム • Streaming Client チーム • AbemaTV の再⽣品質を軸に UX エンジニアリングに コミットするチーム • 動画技術エバンジェリスト • 世界各国に⾜を運び動画技術に関する情報をキャッチアップし、 社内外の動画サービスの発展に貢献するロール • DesignOps 推進バックエンド • ⼤規模組織でスケールできるプロダクトデザイン開発組織構築 五藤 佑典 YUSUKE GOTO https://ygoto3.com/ @ygoto3_
- 6. • California State University, San Bernardino グラフィックデザイン専攻 • ソフトウェアエンジニア @ サイバーエージェント • 株式会社 AbemaTV 開発本部 • New Device チーム • あらゆるデバイスに AbemaTV を展開するための技術を 提供するチーム • Streaming Client チーム • AbemaTV の再⽣品質を軸に UX エンジニアリングに コミットするチーム • 動画技術エバンジェリスト • 世界各国に⾜を運び動画技術に関する情報をキャッチアップし、 社内外の動画サービスの発展に貢献するロール • DesignOps 推進バックエンド • ⼤規模組織でスケールできるプロダクトデザイン開発組織構築 五藤 佑典 YUSUKE GOTO https://ygoto3.com/ @ygoto3_ より⼤きな組織へと拡張して 展開していく動きをしています
- 8. デザイナーの時の頭の中 • ⾃分が意図したように使⽤者が動いてほしい • ⼀番伝えたいメッセージを印象に残したい • 技術や機能を⼈の役に⽴つ形にしたい • プロダクトを好きになってほしい
- 9. エンジニアの時の頭の中 • メンテナンス性が⾼いコード設計をしたい • ⾼いパフォーマンスで動作するソフトウェアを作りたい • 不具合発⽣リスクが少ない⽅法で開発したい
- 10. テックリードの時の頭の中 • 事業成果に繋がるようにプロダクトをデザインしたい • ファクトに基いた決定をしたい • トライアンドエラーを繰り返すことができるように デザインと親和性が⾼いコード設計をしたい
- 11. DesignOps 推進者の時の頭の中 • 組織が⼤きくなってもデザインの品質を保ち、 ⼈が増える程開発速度を上げたい • デザイン領域が属⼈化していなくて、 デザイナーのアサインが柔軟にできるようにしたい • クリエイティビティを最⼤限発揮できる環境にしたい
- 12. いろいろな⽴場で考えた結果…
- 13. AbemaTV でさまざまなアプローチで プロダクトデザインに向き合ってきました Atomic Design 導⼊ Story-Assured Design 導⼊ 2015.10 2018.05 2019.01 DesignOps ？
- 14. AbemaTV でさまざまなアプローチで プロダクトデザインに向き合ってきました Atomic Design 導⼊ Story-Assured Design 導⼊ 2015.10 2018.05 2019.01 DesignOps ？
- 18. Atomic Design の成果 UI デザインに構造的意味を与える チームがデザインの意味を理解しやすくなる 特にエンジニアとデザイナーの間に 共通⾔語が⽣まれコミュニケーションしやすくなる
- 19. しかし…
- 23. Atomic Design が難しく感じる 理由 デザインに与える意味がなければ 構造はただの箱でしかない Atomic Design がただの箱になる 箱への⼊れ⽅に悩む
- 24. Atomic Design が難しく感じる 理由 デザインに与える意味がなければ 構造はただの箱でしかない Atomic Design がただの箱になる わざわざ箱に⼊れる必要ある？ってなる
- 26. “ ” people don't buy what you do; people buy why you do it.
- 27. Why ? How ? What ?
- 28. Why ? How ? What ? ⼈はここに動かされる
- 29. Why ? How ? What ? ⼈はここでは動かない
- 30. Why ? How ? What ? プロダクト Atomic Design ？
- 31. Why ? How ? What ? プロダクト Atomic Design ？ Why ? が抜けている状態
- 32. デザインと エンジニアリング が協業するために • How だけをチームで共有しても デザインとエンジニアリングの 協業のモチベーションにはならない • Why がチームに共有されて初めて デザイン⼿法とエンジニアリングは 協業する⽬的を持つ
- 42. Why ? How ? What ?
- 43. Why ? How ? What ? 1. ストーリーデザイン
- 44. Why ? How ? What ? 2. デザインの構造化 1. ストーリーデザイン
- 45. Why ? How ? What ? 3. 視覚情報デザイン 2. デザインの構造化 1. ストーリーデザイン
- 46. Why ? How ? What ? 3. 視覚情報デザイン 2. デザインの構造化 1. ストーリーデザイン Story-Assured Design
- 47. チーム全員が デザインする ためのコツ１ 画⾯デザインを Why ? から開始する • Why = ユーザーストーリーからデザインする
- 48. Why ? How ? What ? 3. 視覚情報デザイン 2. デザインの構造化 1. ストーリーデザイン
- 49. チーム全員が デザインする ためのコツ１ 画⾯デザインを Why ? から開始する • Why = ユーザーストーリーからデザインする • 画⾯でどんな情報を得て、どんな動機で、 次の画⾯に移動するか、を設計する
- 52. どんな情報を得て…
- 53. どう⾏動するか
- 54. プライマリーストーリー
- 55. セカンダリーストーリー
- 56. ストーリーの優先度を明確にする
- 57. チーム全員が デザインする ためのコツ１ 画⾯デザインを Why ? から開始する • Why = ユーザーストーリーからデザインする • 画⾯でどんな情報を得て、どんな動機で、 次の画⾯に移動するか、を設計する • スキル依存（グラフィックスキルなど）が 無い ＝ チームの誰もが参加できる
- 61. QA デザイナー デザイナー
- 62. チーム全員が デザインする ためのコツ２ デザイン作業をブラックボックス化しない • デザイン⼯程を分割する 1. ストーリーのデザイン 2. デザインの構造化 3. 視覚情報のデザイン
- 63. チーム全員が デザインする ためのコツ２ デザイン作業をブラックボックス化しない • デザイン⼯程を分割する 1. ストーリーのデザイン 2. デザインの構造化 3. 視覚情報のデザイン デザインする対象スコープを 分離して、課題を明確にする
- 64. チーム全員が デザインする ためのコツ２ デザイン作業をブラックボックス化しない • デザイン⼯程を分割する 1. ストーリーのデザイン 2. デザインの構造化 3. 視覚情報のデザイン みんなでデザイン できる対象
- 65. チーム全員が デザインする ためのコツ２ デザイン作業をブラックボックス化しない • デザイン⼯程を分割する 1. ストーリーのデザイン 2. デザインの構造化 3. 視覚情報のデザイン グラフィックスキル依存があり みんなでデザインが難しい
- 66. ストーリー 構造 視覚情報
- 73. チーム全員が デザインする ためのコツ４ 全てのタスクをストーリーに紐づけて管理する • Why を常に意識する • 開発・運⽤期間が⻑くなると 理由も分からずタスクをこなすだけでも ⼀⾒成⽴してしまうフェーズもある • Why が分かれば仕事に⼯夫の余地ができる • ⼯夫できればデザインは楽しい
- 77. チーム全員が デザインする ためのコツ５ ストーリーごとに KPI を設定する • ユーザーの⾏動にどんな変化を与えるための ストーリーなのかを定量化して考える • KPI を設定することによりチームが求める 「良いデザイン」は何なのかを共有する • 個⼈の好みを「良いデザイン」の 判断基準に含めない
- 83. チーム全員が デザインする ためのコツ６ ストーリーオーナーを⽴てる • タスクがストーリーに沿っているか、進捗、 KPI を満たしているか、などオーナーシップ を持ってストーリーを推進する • 各デザイン、実装、ログ設計、分析など 必要なタスクが揃っているか責任を持つ • ストーリーの成功を⾃分事化する
- 87. チーム全員が デザインする ためのコツ８ データ分析会で定期的にストーリーを⽣み出す • 何もしないとストーリーは⽣まれない • Google Analytics をチーム全員で⾒ながら ファクトから課題を探し、 ユーザーストーリーに落とし込む
- 88. チーム全員が デザインする ためのコツ８ データ分析会で定期的にストーリーを⽣み出す • 何もしないとストーリーは⽣まれない • Google Analytics をチーム全員で⾒ながら ファクトから課題を探し、 ユーザーストーリーに落とし込む でも、データ分析って難しい
- 90. チーム全員が デザインする 次の⼀歩 分析スキルをチーム全員が⾝につける 「分析したから、改善お願いね」は上⼿くいか ない。分析した⼈がデータを⼀番理解している から、改善案もセットで考えるのが基本。
- 91. チーム全員が デザインする 次の⼀歩 分析スキルをチーム全員が⾝につける 分析⼒ • トレンド：データを時系列で⽐較する⼒ • セグメント：データを分割して読む⼒ • ベンチマーク：単体で意味を成さないデータ を何かと⽐較して意味を⾒出す⼒
- 92. チーム全員が デザインする 次の⼀歩 分析スキルをチーム全員が⾝につける 改善⼒ • ゴール設定⼒：具体的な定量的、定性的な⽬ 標に落し込む⼒ • ゴールに向かって具体的なアクションに変え られる⼒
- 93. 終わりに • チーム全員でデザインを考えることにより デザインの説明責任が分散された • ビジネス指標も技術的制約もユーザー体験も プロダクトをデザインするための⼀要素 • チームメンバー全員でデザインした⽅が 本当の意味で良いプロダクトデザインに繋がる （と信じている）