カオナビのデザイン組織は、ブランド / プロダクト / マーケティングの3つのデザインチームに分かれています。
その一つ、プロダクトデザインチームには、2024年6月時点で10数名のプロダクトデザイナーが所属。プロダクトデベロップメント本部の各開発チームに、それぞれ1-2名ずつ所属しています。
各開発チームに一人ひとりのデザイナーが所属する体制だからこそ、カオナビプロダクトデザインチームでは、デザインシステムやブランディングを意識し、横串でデザイナー同士がUIの統一性などを常に連携・共有することを意識しています。
直近リニューアル・公開したデザインシステム「sugao」の改善などを例にしつつ、UIから「カオナビ」というプロダクトの優位性をつくるプロダクトデザインチームの動きについて具体的にまとめていきます。
前述したように、カオナビのプロダクトデザインチームには現在10数名のプロダクトデザイナーが所属しています。
現在カオナビには20以上の機能があり、常に10数チームの開発ラインが走っています。開発チームは担当機能ごとに縦割り型になっていて、PO、エンジニア、デザイナー、QCがそれぞれに所属しています。
デザイナーのアサインは以下の2種類があります。
- 所属チームの担当機能の改修
- チームが持つ担当機能の改修はチームに所属しているデザイナーが担当します。
- 新機能の開発
- この場合はプロジェクト単位でチームが立ち上がる場合もあれば、関連機能の担当チームが持つ場合もあります。前者の場合はデザイナーがどこかのチームから異動や兼任のような形でアサインされ、後者の場合は所属チームのデザイナーが担当することが多いです。
私たちが開発する「カオナビ」は、すでに10年以上運営されているプロダクトです。人材管理市場をリードするプロダクトとして、3,600社 (※1) を超える企業・団体にご利用いただき、8年連続国内No.1シェア(※2) を獲得しています。
ここ数年のプロダクト開発においては、競合サービスも増える中で、カオナビにまだ足りていない機能を追加していくことにリソースを大きくかけていました。
その結果、現在のプロダクトには、タレントマネジメントシステムとして求められる機能はある程度揃ってきています。もちろん今後も新機能開発を続けていきますが、これまで以上に機能の使いやすさ・ユーザビリティをUIによって高めていくことも重要になっています。
そのため、プロダクトデザインチームとして「UI改善」「ウェブアクセシビリティへの対応」「未来のカオナビのUIを描く」といった、ユーザビリティを高めつつ将来に向けて投資していく役割にも現在は注力しています。
そのような背景からカオナビのプロダクトデザインチームでは、デザインシステムの開発・運用改善に力を入れています。
カオナビでは、2019年ごろからデザインシステムの設計を開始。
甲斐や北村が入社した2022年には、すでにデザインシステムはコンポーネント単位ではかなり整理されていて、「そこにあるコンポーネントを使えば開発はできる」状態になっていました。
その後、事業状況の変化を受けて、2024年1〜6月にかけてデザインシステムの運用体制をアップデート。より一層お客さまにとって使いやすいプロダクトを目指し、「sugao」という名前に生まれ変わりました。
世の中を見ると、デザインシステムを ”つくる” こと自体はこの数年でかなり一般的になってきたように感じています。一方で、デザインシステムがどのように事業貢献に繋がるのか？ということまで整理して、日々運用に取り組めている組織はまだ多くはないように思います。
その中で、カオナビプロダクトデザインチームでは、“デザインシステムから、プロダクトの優位性を高める” という意識で「sugao」を開発しています。
2019年から、2023年ごろまでのカオナビにおけるデザインシステムの位置付けは「コンポーネントを整理し、開発効率を高める」というものでした。
一般的に必要とされているような、カラーやフォントの定義、ボタンやフォームなどの各種コンポーネントはほとんど揃えられており、UIデザイン・フロントエンドの開発をする上では特に問題ないくらいまで運用に乗せられていました。
この時の課題としては、機能追加に注力していることもあり、デザインシステムの改善の優先度はなかなか上げづらいことでした。
具体的には、デザイナー側から改善案をチケットとして貯め、エンジニア側が手が空いた時に改善するような運用になっていました。ただ、機能追加開発の優先度のほうが高く、デザインシステム改善にリソースを割くことが難しい状況でした。
そんな中、2023年の後半あたりから、デザインシステムに求めることが変わってきます。
当時のデザインシステムでは、コンポーネントの扱い方などは定義されておらず、画面上での配置などは各デザイナーがよしなに判断しているような状況。また、新機能開発のスピードを優先していたことで、デザインシステムと実装のズレも時たま発生していました。
結果として、機能ごとにUIの差分が生まれやすい状態となっており、導入を検討するお客さまから、競合サービスとのUIのクオリティを比較され失注してしまうことも起こっていました。
必要なコンポーネントは揃っているものの、UIごとの差分が生まれてしまう
前述したように、2023年後半には、事業計画で予定していた新機能追加が一通り終わり、タレントマネジメントシステムとして必要な機能は「カオナビ」に最低限揃ってきていました。
事業状況的にも、新機能開発よりも、すでにある機能の使いやすさを高めることに注力しやすい状況となっていたことを踏まえて、このタイミングでデザインシステムの運用をアップデートし、開発組織全体で「お客さまにとって使いやすい体験」に共通認識を持つことを目指しはじめました。
“プロダクトとしての優位性” をつくるために、改善が必要だったのは以下の2点です。
デザインシステムが日々改善されるように、開発との連携を強める
コンポーネント単位以上に、体験の共通認識をつくれるようにする
そのために、以下の3つの流れで、運用体制をアップデートしていきました。
デザインシステムの位置付けの認識を揃える
継続的な改善ができる運用体制をつくる
コンポーネント以上の共通認識をつくる
はじめに、デザインシステムの位置付けを見直す必要性を、開発チーム全体で腹落ちできるように動いていきました。
カオナビというサービスの根本的な価値は「従業員の情報が集まる人材データベース」であることです。なので、お客さまにとって、従業員のデータを出し入れしやすい「操作性の高さ」は、プロダクトとしての優位性につながっていくだろうと考えています。
さらに、市場の動きも早く、競合も増えているこれまでまとめたような事業状況の中で「速さ」を重視する必要性もあります。リリースの頻度を早くすることもそうですし、お客さまの業務スピードを効率化するという意味でも速さが大事になります。
そして、この「速さ」を実現するには、”ただデザインシステムがある” というだけでは足りず、お客さまが必要としている体験の共通認識をつくることが必要です。
このような背景でデザインシステムに注力していく必要がありましたが、その認識は開発チーム全員でそろえられていない状態でした。
そんな中で、まずは業務委託で関わるプロダクトデザイナーと一緒に、今の開発プロセスにおける問題点や理想を話し合うワークショップを開催します。
その中で、やはりデザインシステムについての問題意識がいくつも挙げられました。(*あくまで、デザイナー側が感じている主観です)
機能ごとのUIの統一ができていない
開発とデザインの足並みが揃っていない
デザインシステムを改善したくても、なかなか進まない
エンジニアメンバーがデザインシステムを変えることに積極的じゃないように思う
これらの問題を放置せず、解決に向かうためには、エンジニアメンバーとも課題の認識をすり合わせないといけないと考え、2023年末に、プロダクトデザイナーとエンジニアメンバー全員で、合同ワークショップを開催しました。
結果として
スピードを重視して、独自実装になってしまっていることは問題だと認識している
デザインシステムの改善をすべきだと思っているけど、ボランティア的になっていて手が回っていない
というように、エンジニア側にも課題意識があること、さらには改善したい意思があることをすり合わせることができました。
ここまでの動きから、根本の課題は「運用体制」にあるのではないかと捉えて、高頻度で継続的にデザインシステムの更新が起こるような体制に変えていくようデザイナー/エンジニア間で連携を強めていきました。
例えば、プロダクトデザインチームのops機能を担当する甲斐と北村といったデザイナーの代表メンバーと、エンジニアチームの代表メンバーで、30分定例mtgを隔週で行っています。
そこで、優先度の高いチケットはリソースを割り当ててもらえないかという相談をしたり、代表者に持ち帰って検討してもらったり、という形で運用しています。
これまでデザインシステムの改善は「手が空いていた人がやる」というボランティア的な運用体制でした。しかし、それでは形骸化しやすく、デザイナーから出した改善チケットが消化されない状態が続いていました。
まだまだ運用体制は試行錯誤中ではありますが、以前よりもデザイナー / エンジニア間の連携が強まり、これまで宙に浮きがちだったデザインシステムの改善チケットも順調に消化されはじめました。
さらに、プロダクトデザイナー側からも、以前より積極的にデザインシステムの改善提案を行えるようになっています。デザインシステムの相談事を持っていけるデザイナー/エンジニアの定例の場があるため、安心してデザインシステムに注力できる体制が敷かれています。
さらに、コンポーネントの管理だけでなく、お客さまに必要な体験の共通認識をつくるために、UIのパターン化・ガイドライン化などにも取り組みはじめました。
コンポーネントの取捨選択・位置付けの明確化
ユースケース単位で、どのようなUIを提供すべきかをパターンとして整理
ライティングなど各種ガイドラインを整備
なども、デザインシステムとして拡充していこうとしています。
例として、これまでの運用でボタン/アイコン周りのコンポーネントが充実しすぎていたため、取捨選択して、それぞれの役割や用途を明確に表しました。
さらに、各デザイナーが個別に判断しなくてもページやレイアウト単位で最適なUIを選べるようにしていくことや、ライティングなどのガイドライン整備も進めています。
着手すべきことはまだまだ多くありますが、このように、機能ごとのUIに一貫性が生まれるよう改善を進めています。
現在も、カオナビデザインシステムの改善が進んでいます。先日「sugao」をFigma Community上にも公開しました。よろしければぜひ中身も見てみてください。
( https://www.figma.com/community/file/1388050089826010129 )
内部的にも、デザインシステムに対する位置付けの理解が進み、運用が改善されてきています。
例えば、以前は新機能開発のスピードを意識して、デザインシステムに無いコンポーネントがあった場合、よしなに実装されているようなことがありました。
今回のようなプロジェクトを経て、エンジニアからも「デザインシステムを場当たり的に改変するのは、やめよう」「デザインシステムを中心にUIの一貫性を保てるようにしよう」という話が出るようになっています。
「sugaoの運用アップデート」のような長期的なプロジェクトに取り組むことができるのは、カオナビのプロダクトデザインチームが、パーパスを常に意識して注力領域を決めるようにしているからこそです。
なんのためにデザインシステムに力を入れるかというと、当然、良いプロダクトをお客様に提供するためです。
カオナビの考える良いプロダクトを提供することは、カオナビのパーパスである「“はたらく”にテクノロジーを実装し、個の力から社会の仕様を変える」をデザイナー自らが体現することだと考えています。
最終的にパーパスを実現するためには、ブランドデザインやマーケティングデザインによってつくられたカオナビに対する期待を、確実に体験として提供していくプロダクトデザインが必須です。
カオナビプロダクトデザインチームでは、今後も長期的なUI改善に注力することをチーム内外に明確に示すため、チームの注力を表すキービジュアルも制作しています。
「UI進化論」というチームコンセプトを掲げ、時代や事業の状況に合わせてUIも変えていき、さらにその先のプロダクトに向けた投資をしていく意思を表しています。
ブランドとプロダクト体験を一貫させ、カオナビというプロダクトの優位性をUIからつくり、パーパスの実現に近づけられるよう、「sugao」の運用をはじめ、プロダクトデザインチームとしてさらに事業貢献を進めていきます。