デザインシステムチームの 「⾝内」を増やす取り組み 沼 ⽥ 歩 実 2022.03.15 @Design Study Morning #07

⾃⼰紹介 ⼤学でビジュアルデザインを専攻し、卒業後はUX/UIデ ザイナーとしてプロダクト開発を経験。 2018年11⽉、atama plus⼊社。2019年から現在まで atama plusのデザインシステム「uniform」のオーナー を担当。 2 沼 ⽥ 歩 実 @n_m_ta 2018 2019 2020 2021 11⽉⼊社 奮闘記①② 奮闘記③ 奮闘記④ 今⽇は 最新 情報

教育に、⼈に、社会に、 次の可能性を。 教育を新しくすること。それは、社会のまんなかを新しくする こと。私たちは学びのあり⽅を進化させます。 学習を⼀⼈ひとり最適化し、「基礎学⼒」を最短で⾝につける。 そのぶん増える時間で、「社会でいきる⼒」を伸ばす。 それが私たちの⽬指すもの。⾃分の⼈⽣を⽣きる⼈を増やし、 これからの社会をつくっていきます。 M i s s i o n atama plus株式会社

AI教材「atama＋」を 全国の塾・予備校にSaaSモデルで提供しています。 atama＋は、AI先⽣が⼀⼈ひとりの得意、苦⼿、伸び、 つまずき、忘却度などの情報を収集・分析して、 ⼀⼈ひとりに合った「⾃分専⽤カリキュラム」を提供します。 学習をPersonalize「atama＋」

ⓒ 2022 atama plus Inc. 開発チーム体制 5 デザインシステムの「⾝内」を増やす取り組み アルゴリズムチーム ⽣徒の学習上の課題を洗い出し、 アルゴリズムによる解決策を考え実装。 アプリチーム 33 名 ※PO：プロダクトオーナー、QA：Quality Assurance 、SM：スクラムマスター ⽣徒の学習体験の向上を図る機能、リアルタイムコーチングシステム、 塾の先⽣向けポータルサイトなどのプロダクト機能改善∕新機能開発。 9 名 模試チーム オンライン模試のプロダクト機能改善∕新機能開発。 8 名 開発者体験の向上を実現。 開発基盤チーム 4 名 SM デザイナー エンジニア QA PO SREチーム 基盤作りやプロダクト開発を効率化。 4 名

ⓒ 2022 atama plus Inc. uniformに関係するアプリチーム 6 デザインシステムの「⾝内」を増やす取り組み スクラムマスター デザイナー エンジニア QA PO

ⓒ 2022 atama plus Inc. 職能横断チーム 7 デザインシステムの「⾝内」を増やす取り組み デザイナー エンジニア QA フロントエンド 得意 フロントエンド 苦⼿ バックエンド 得意 UIデザイン 得意 UIデザイン 苦⼿ UXリサーチ 得意 • さまざまなスキルを持ったメンバーが集まるチーム。 • 職能で担当領域を絞らない。エンジニア・QAが仕様検討するときもある。 エンジニアがUIのたたきを作ったあと、デザイナーレビューという動きもある。

ⓒ 2022 atama plus Inc. 5チームでプロダクト開発 8 デザインシステムの「⾝内」を増やす取り組み 2021.12 2021.11 2022.1 A教科の学習体験改善 A教科改善 C教科の学習体験改善 指導要領改訂対応 指導要領改訂対応 B教科の学習体験改善 宿題の体験改善 アカウント発行ユーザビリティ改善

ⓒ 2022 atama plus Inc. デザインシステム運⽤をリードするuniformチームは兼任 9 デザインシステムの「⾝内」を増やす取り組み スクラムマスター デザイナー エンジニア QA PO

ⓒ 2022 atama plus Inc. uniformチーム • デザイナー2名、エンジニア2名 • 毎週1時間定例ミーティング • uniform改善のチケット化、⽅向性のすり合わせ • uniformのドキュメント・コードのレビュー • ⼊社オンボーディング • などなど 10 デザインシステムの「⾝内」を増やす取り組み ドキュメントやコードを書くリソースをuniformチームは持たない あくまでアプリチームの⼀員としてチケットを取って進める

ⓒ 2022 atama plus Inc. uniformチケット • だいたいこの種類 • それぞれを、1sprint (1週間) で終わるサイズにチケットを切る。 • 他画⾯修正→「〇〇画⾯のリストを変更」「〇〇画⾯のボタンを変更」 • プロダクト開発と同じbacklog に追加。 • プロダクトオーナーが優先度付。 • チケット内容や優先度付に必要な情報はuniformチームからプロダクトオーナーへ 連携。 • アプリチーム5チームすべてがこのチケットを取る 11 デザインシステムの「⾝内」を増やす取り組み UI検討 サンプル実装 主要画面修正 他画面修正 ドキュメント

ⓒ 2022 atama plus Inc. uniformチームではなくアプリチーム全体で進める 12 デザインシステムの「⾝内」を増やす取り組み スクラムマスター デザイナー エンジニア QA PO (アプリチーム) uniformチケット取るよ！ (uniformチーム) ありがとう！いつでも相談来てね

課題

ⓒ 2022 atama plus Inc. 課題 • ⽇々の開発でuniform componentを使って欲しい場⾯で使われない • 各チームのコードレビューで指摘されない ※uniformチームが全チームのレビューに⼊るのはきつい • uniformチームメンバーではない⼈に他画⾯修正のチケットを取ってもらえない • プロダクト開発の合間にアプリチームからプロダクトオーナーに持ちかけてuniform チケットを取ってもらうのが理想→普通に難しい ※技術負債解消チケットはチーム→プロダクトオーナーの動きできてる(回路はある) 14 デザインシステムの「⾝内」を増やす取り組み uniformチームではないけどuniformに積極的な⼈=「⾝内」 が欲しい！ デザイナーにはすでに⾝内がそこそこいる。エンジニアももっと欲しい！

打ち⼿

ⓒ 2022 atama plus Inc. 2週間 特別uniformチームを組成 16 デザインシステムの「⾝内」を増やす取り組み スクラムマスター デザイナー エンジニア QA PO

ⓒ 2022 atama plus Inc. 2週間 特別uniformチームを組成 • 1週⽬：uniformチーム ＋ uniformチームではないエンジニア2名 • 2週⽬：uniformチーム ＋ uniformチームではないエンジニア1名 • 以下のサンプル実装と主要画⾯修正をuniformチームのエンジニアといっしょに⾏う • 背景 • リスト • アコーディオン • キャラクターふきだし • uniformチームのデザイナーは隣でドキュメント書いたりFigma components作ったり 17 デザインシステムの「⾝内」を増やす取り組み UI検討 サンプル実装 主要画面修正 他画面修正 ドキュメント

振り返り

ⓒ 2022 atama plus Inc. 曖昧だったuniformのプロセスを理解することができた • 「オンボーディングで全体の流れは聞いているが、なかなか理解できていなかった。中 に⼊って⼀緒にやることで理解できた。」 • 着⼿しやすいよう細かくチケットを分けていたが、それゆえに全体像の理解が難しく なっていた。 • オンボーディングで全体像の説明しているが、実際に流れでやってみることで理解が⼤ きく変わる。 19 デザインシステムの「⾝内」を増やす取り組み UI検討 サンプル実装 主要画面修正 他画面修正 ドキュメント ⼀連の流れ

ⓒ 2022 atama plus Inc. 検討経緯を聞けるのが良い • 「検討経緯の話があっただけでも、以前取り組んだときと 気持ちが違った。UI検討時の案の⼭など、いろいろと考慮 した結果だよ！が伝わると良い。」 • 「uniformチームのエンジニアが仕様について悩んでいるの を⾒れたのが良かった。」 • uniform以外でも、⾊や余⽩の検討過程まではエンジニアに 話さないことが多い。 • 同じ雰囲気でuniformも進めていたが、今回雑談で検討過程 を話したことが好評だった。 • なにか裏側にあった苦悩が⾒えた⽅がモチベーションにつ ながりそう。 20 デザインシステムの「⾝内」を増やす取り組み

ⓒ 2022 atama plus Inc. その他の感想 • 「uniformって進んでたんだなあ」 • 昔のあまり内容がないuniformの印象のままだった⼈も • 「(今回参加したことで)ページ新設や改良するときにuniformを使う気持ちが⾼まった」 • 「定期的に⼀気に進める期間があるのが理想」 • 参加者からこの声が出た！ • uniformを進めるためにはどうすればいいか、推進の当事者になってもらえた 21 デザインシステムの「⾝内」を増やす取り組み

ⓒ 2022 atama plus Inc. 課題はどうなった？① • ⽇々の開発でuniform componentを使って欲しい場⾯で使われない • 各チームのコードレビューで指摘されない ※uniformチームが全チームのレビューに⼊るのはきつい → けっこう使われるようになった！ 22 デザインシステムの「⾝内」を増やす取り組み モニタリング unfm-btn 使⽤箇所(使って欲しい) 122→121→123→132 ion-button使⽤箇所(使って欲しくない) 350→336→330→330 このモニタリングをuniformチーム以外にも公開した 結果良くなった説もある。

ⓒ 2022 atama plus Inc. 課題はどうなった？② • uniformチームメンバーではない⼈に他画⾯修正のチケットを取ってもらえない • プロダクト開発の合間にアプリチームからプロダクトオーナーに持ちかけてuniform チケットを取ってもらうのが理想→普通に難しい ※技術負債解消チケットはチーム→プロダクトオーナーの動きできてる(回路はある) → 今回参加してもらった⼈起点で、他画⾯修正のチケットを取ってもらえた！ 23 デザインシステムの「⾝内」を増やす取り組み

ⓒ 2022 atama plus Inc. これから • 今回は期間限定でuniformチームに来てもらう形で実施したが、各チームにuniformチー ムメンバーがトラベルする形でもやってみたい • ここでできた関係をどのように持続させていくかは要検討 • デザイナーは週2回UI相談会がありuniformのこともそれ以外のことも話す場がある • エンジニアはどうしていこう…？ • 他画⾯の修正は、とはいえ合間合間では追いつかないところもあるので、チームの体制 からプロダクトオーナーと相談 24 デザインシステムの「⾝内」を増やす取り組み

ⓒ 2022 atama plus Inc. まとめ 25 デザインシステムの「⾝内」を増やす取り組み がっつり1週間いっしょに過ごし 全体像や苦悩を共有することで 「⾝内」＝ 積極的に取り組む⼈が増えた！