
スタートアップでデザインの基盤を整えてる話
※ これは2023/08/08(火)に開催されたSpectrum Tokyo Jam 02 in Osaka で録画収録にて発表したLTの内容をまとめたものです。
こんにちは!SHE株式会社プロダクトデザイングループの井斉花織(いおり)です。
みなさんはスタートアップのデザインにどんなイメージをお持ちでしょうか?
「意思決定が柔軟そう」「スピードが速そう」ありがとうございます。おおむねその通りです。でもその反面、「煩雑そう」「品質は二の次になってそう」などのイメージも少なからずあるのではないかなと思います。
そんなみなさんへ、今回は「SHEはスタートアップだけどスピード保ちつつもめっちゃ丁寧にデザイン品質担保してるで!!!」というお話をお伝えします。
①プロダクトデザイン原則の選定
まず一つ目はプロダクトデザイン原則の選定です。

プロダクトデザイン原則とは、「製品やサービスのデザインにおいて、優れた成果を生み出すために指針となる基本的なルールや価値観のこと」を指します。

これを定めていくために、まずは社内で「わたしたちの作っているプロダクトってどんなものだろう?」と考えるワークショップを実施するところから始めていきました。

まずはSHEの主要サービスであるSHElikesから連想されるイメージをざっくばらんにムードボード化。

次に、その中に出てきた世界観やイメージをキーワードに落とし込み、チームで共通認識を作っていきます。

ある程度発散できたら、最後に特にウエイトを感じたキーワードをいくつか抽出し、それらを深掘ってニュアンス表現まで調整をしていきました。
こうして出来上がったのが次のデザイン原則ver1.0です。(Miroの中で描いた最初のデザイン原則の姿…!今見ると色々ブレがありますね^^;)

「迷わない」というUI面での大項目を土台とし、その上に4つのUX項目「楽しくて学びたくなる」「自分らしくいられる」「心に火が灯る」「一人では起こせない変化が生まれる」を定義しています。
さらにこの原則が概念として形骸化するのを防ぐため、具体的な粒度まで落とし込んだ「デザイン品質チェックリスト」を30項目ほど展開していきました。

このチェックリストは、デザイナー同士で自分の担当していないアウトプットをフィードバックする際に活かしています。
この横断フィードバックの取り組みは、SHEの組織構造が大きく関係しています。

SHEの開発チームはミッションごとにグループが組まれており、デザイナーは普段それぞれ異なる施策に従事しています。この体制は目指す体験を解像度高くスピーディーに形にしていけるという利点がありますが、その反面、アウトプットにそれぞれのデザイナーのスキルバランスが反映されやすくなるという懸念もあります。
そこでSHEのデザインとして一定水準を担保していくために、現在は週1回の頻度で「デザイン品質定例」という機会を設けています。
品質定例では、チームみんなでチェックリストと照らし合わせながらアウトプットを確認していき、気になったところや疑問点があれば改善策を話し合っています。

こうして、属人化しない品質担保の仕組みを整えています。
②コンポーネントライブラリの構築
二つ目はコンポーネントライブラリの構築です。

これまではコンポーネントをうまく一元管理できていない現状があり、それによっていくつもの誤差が生じ、デザイン・実装・コミュニケーションコストにつながっていました。
そこでミッショングループとは別にプロダクトデザイナーとエンジニアの中から「デザインシステム推進チーム」を結成し、これらの課題の改善を目指しました。

進め方としては、メインミッションの傍ら週1回の定例を立て、そこでスケジューリングから相談・仕様確定・管理等をしています。

ただこれだけだとチーム外のメンバーはやや距離が空いてしまうので、デザイナーに対しては週次定例の中で「デザインシステムキャッチアップ」というコーナーを新設し、実際に使ってもらえるまで浸透させる取り組みも始めました。
そんなコンポーネントライブラリのデザインデータはこちらです。
(引きの画像で失礼します…!)


まだまだ構築途中ではありますが、チームメンバーからはここまでの効果として
デザイナー・エンジニア双方でコンポーネントの共通認識を持ちやすくなった!
手を動かす単純作業より体験の思考へ時間が分配できるようになった!
シンプルに実装・デザイン速度が上がった!
などの声が上がっています。
まとめ
他にもFigmaの整備について話し合ったり、フィードバックルートを整理したり、リモート環境でもスピーディーに連携できる体制を整えたり…。
はたまた、いろんな企業のデザイナーさんたちとピザでつながる「ピザイナーの会」を主催していたり…。(?)
日々デザインの基盤を丁寧に整えてます。
これからそんな取り組みを色々な場所で発信できたらと思うので、どうぞよろしくお願いいたします!
よろしければSHEデザインユニット主催のPodcast「SHEデザインよもやま」にも遊びにきてくださいね。
また現在SHEではUIUXデザイナーを大募集しています。
直感が働いた方、まずはお話から聞いてみたいという方がいらっしゃったら、お気軽にカジュアル面談しましょう!(怖くないよ!)
どうもありがとうございました 👋