デザインシステムで解消するさまざまな分断 / Bridging Various Divides with Design Systems

Session by：
平田 彩夏 / 合同会社DMM.com
Ayaka Hirata / DMM.com

Spectrum Tokyo Design Fest 2023 Day 1 (2023/12/02)

Transcript

1. デザインシステムで解消する さまざまな分断 合同会社DMM.com プラットフォーム事業本部 フロントエンドグループ 平田彩夏
2. 平田彩夏 デザイナー5年目。主に事業会社でtoC向けのサービス のUIを担当 2021年4月中途入社 プラットフォーム事業本部 フロ ントエンドグループ所属の最初のデザイナー DMMのサービス全体を支えるデザインシステムTurtle を開発・運用 自己紹介
3. 導入 本題 今後の展望 DMMの紹介 デザインシステム「Turtle」の紹介 チーム内の分断 利用者との分断 目次
4. 誰もが 見たくなる 未来。 人がみな失敗を恐れず、挑戦できる世界をつくる。 そのために、私たちは存在したい。 年齢も、肩書きも、領域をも超えて、変化を恐れず、ひたむきに挑戦し続ける。 それが、誰も想像できない未来を、誰もが見たくなる未来に変えていくと信じて。 本気 肯定 の失敗を する。 テ と クノロジーと もに。 誠実であれ ちゃんと稼ぐこと。 好奇心を 忘れない。 DMMの組織風土に広く浸透している“DMMらしさ”を言語化した5つのエッセンス （DMM.ESSENCE） です。 企業文化 コーポレートメッセージ
5. 売上 3,476億円 会員数 4,101万人 事業数 60事業以 上 グループ会社 25社 設立 25年目 グループ従業員 4,628名 13 13 14 14 15 15 16 16 17 17 18 18 19 19 20 20 21 21 22 22 2023 2023 3,000 3,500 2,500 2,000 1,500 1,000 500 0 4,000 3,500 3,000 2,500 2,000 1,500 1,000 500 0 数字で見るDMMグループ
6. DMMの決済やユーザーページなど、DMM全体を司る基盤を管理・運用しています 第１開発部 第１開発部 ＣＳプラットフォームグループ ＣＳプラットフォームグループ アカウントサービスグループ アカウントサービスグループ ＤＭＭポイントクラブグループ ＤＭＭポイントクラブグループ ユーザーレビューグループ ユーザーレビューグループ 第２開発部 第２開発部 決済グループ 決済グループ ポイントグループ ポイントグループ 第３開発部 第３開発部 不正対策グループ 不正対策グループ マイクロサービスアーキテクトグループ マイクロサービスアーキテクトグループ フロントエンドグループ フロントエンドグループ 基盤開発グループ 基盤開発グループ プラットフォーム戦略企画部 プラットフォーム戦略企画部 推進グループ 推進グループ プラットフォーム事業本部 プラットフォーム事業本部 事業部紹介
7. 構成人数 プラットフォーム事業本部 第3開発部フロントエンドグループ エコシステムチーム フロントエンド領域 : 1名 デザイン領域 : 4名（支援メンバー1名を含む） エコシステムTurtleを開発・運用 フロントエンドグループの紹介
8. チームミッション 最高のプロダクトをエンドユーザーに最速で提供する プロダクトビジョン 一貫した体験を高速で提供し、コンテンツを誰もが快適に楽しめるようにする 主務 monorepo 静的アセット配信基盤「Panda」 コードレビューによる技術水準の向上 デザインシステム「Turtle」 フロントエンドグループの取り組み
9. プラットフォーム事業本部が制作したエコシステム フロントエンドの課題を解決 汎用的・組織横断的に使用できるデザインシステム なぜデザインシステムが必要になったのか？ https://spctrm.design/jp/interviews/launch-and-operation-of-design-system/ デザインシステム「Turtle」の紹介 デザインシステム「Turtle」の紹介
10. 「Turtle」の現状
11. 「Turtle」の現状
12. プロダクトライフサイクルとは、新しい商品が市場に普及してから需要がなくなって消失するま での流れを4段階に分けた理論のこと プロダクトライフサイクルとは？ 時間 売上 導入期 成長期 成熟期 衰退期
13. デザインシステムとしてのアイデンティティを確立 DesignToken/必要最低限のコンポーネントなどの提供 導入期 デザインシステムのプロダクトとしての最低限の機能や品質 が求められる Turtleの開発をプロダクトライフサイクルで考える
14. DesignToken/コンポーネントの拡充 既存/新規プロダクトへの組み込み実績 利用者へのサポート 成長期 デザインシステムのプロダクトとしての品質向上と同時に、 事業に組み込まれていくことが求められる Turtleの開発をプロダクトライフサイクルで考える
15. デザインシステムで解消される分断 1 チーム内の分断 2 利用者との分断
16. 認識齟齬による、作業の手戻りが多発 生まれた課題 メンバー間で目指す方向性の違いでの衝突 スキルレベルの違い 得意分野の違い
17. ゴールイメージの共有がされていないので 作業のゴールがずれてしまったのではないか？ 仮説1
18. 思考プロセスが個人にとどまっているので 作業途中のミスに気づけなかったのではないか？ 仮説2
19. コミュニケーションの分断 :チーム内の分断 タックマンモデルにおける5つのステージ 形成期 チームの形成 ぶつかりあい 混乱期 共通の 規範が形成 統一期 チームとして 成果 機能期 チームの終結 散会期 共通の ゴール設定 ナレッジ共有 たくさんの議論
20. やったこと１ Turtleの存在意義をブレストする 4 プロダクトの価値の議論 Turtleの存在意義をチーム全体が理解している 状態になる 存在意義が明確になることで、タスクの優先 順位が明確になる
21. やったこと2 Turtleのプロダクトビジョンを決定する A 目指すゴールの共2 A プロダクトの価値の議論 初期は、議論すらしにくかったが、だん だん議論で良い意見が出たり、細やかな 会話が行われるようになってきた タスクの認識齟齬が起こりにくくなった
22. ( 作業過程を共" ( 考えたことをオープンにし て会Æ ( ナレッジをシェア やったこと3 Work Out Loud（WOL） 作業タスクを見える化することで、方向 性の違いが初期段階でわかる 同じ失敗の予防、より良い解決策を考え て改善を回す
23. 8 毎週木曜の14時に、30分間のコーヒータイ 8 どんなTOPICでもOK！自由に会話を楽しむ リモートワークでもラフに会話、相談しやすくなった 全員で頻繁にできているわけじゃないけど、こういった取り組みは、チームビルディン グとして継続していきたい やったこと4 FIKA ️
24. Turtleとしての優先度が決まったことで、タスク の優先度が明確になり、手戻りは少なくなった 結果
25. 今後の課題 レビューポイントが増えたことで、タスクの手戻りはすくなくなり細かな修 正ができるが、リリースまでの時間は短縮しなかった。 WOLやFIKAなどの施策は、形骸化しないように目的を発信していくことも 大切になってくる
26. デザインシステムで解消される分断 1 チーム内の分断 2 利用者との分断
27. 利用者からのフィードバックが なかなかもらえない 具体的には 利用者からの積極的な質問がほとんど無かった 生まれた課題
28. 仮説1 「知らないことを知らない」ので、 フィードバックが浮かばないのではないか？
29. 仮説2 心理的な障壁があるのではないか？
30. É オンボーディングを無人化 振り返りたい時に、振り返れるように なった。 利用者が1番初めに読むべきドキュメン トがわかるようになった。 やったこと1 オンボーディング資料の作成
31. やったこと2 利用者からの質問をドキュメントにまとめる G 利用者からの質問を
 ドキュメント化して知見に 質問内容をドキュメント化することで同 じ質問をもった人が質問しなくて良くな る
32. やったこと3 質問専用チャンネルの作成 ( Turtleの情報発" ( 質問を集約 利用者から、質問や相談がくるように なった。 アップデート情報などを発信すること で、Turtleの現状を知ってもらいやすく なった。
33. やったこと4 ユーザーインタビューの実施 ( ユーザーヒアリングを実施 4~5名のデザイナー、エンジニアにヒア リングを完了して、フィードバックを貰 うことができた 主体的なコミュニケーションの取り方 を、利用者も希望していた
34. 利用者からのフィードバックは少しづつ来るように なり、問い合わせも数件だが来るようになった 結果
35. 今後の課題 こちらから、コミュニケーションをとりにいく形から、よりラフにお互いに コミュニケーションが取れる状態になる フィードバックをもとに、企画段階からコミュニケーションしていく より、多くの人にTurtleに触れてもらう機会をつくり、フィードバックの質 と量を向上させる
36. 今後の展望 1 2 3 プロダクトの拡張 認知拡大 チームの状態 ブランドデザインの制作・強化 フロントエンド領域とデザイン 領域の垣根がない組織 デザインデータと実装が一致し た状態を恒常的に生み出す 社外への認知拡大 Webサイトの構築 チームビルディングの強化 スクラムの精度向上
37. 今後の展望 フロントエンドエンジニアを募集しています
38. ご清聴ありがとうございました！