Micoworksの番匠谷です。2020年1月にスタートした採用管理ツール「HR PRIME」のフルリニューアルを担当しました。ここでは、リニューアルをどう進めていったか、toBのSaaSプロダクトのデザインについてまとめていきます。また、今回一緒にリニューアルを進めたCSの後藤さんからのコメントも入れています。ビジネスサイドとの連携方法など、toBサービスのデザイナーの方にとって参考になれば嬉しいです。
採用管理ツール「HR PRIME」toB向けSaaSプロダクトのリニューアルプロジェクト
正式リリースまでの期間：4ヶ月 PdM：1名 デザイナー：1名 カスタマーサクセス：1名 エンジニア：1名（社内） サービスはこちら https://hr-prime.jp
「HR PRIME」は2019年2月にサービスを開始して以降、多くの顧客に利用されてきました。採用管理のシステムはもちろん完成していたのですが、ずっと「使いづらい」という顧客からの声、改善要望が出ていたんです。ユーザーではない僕から見ても「使いづらそうだしデザインを変えたほうがいいな」と思っていました。現場も経営陣もそのことには気づいていて、ついに昨年1月にデザインのリニューアルの意思決定が下されました。
リニューアル担当にアサインされた僕は、情報設計やビジュアル作成といったデザインはできるけど、事業ドメインに関する知識はゼロ。採用、人事領域にも全く詳しくありません。なので、設計に入る前に、100社以上の顧客を担当していたCSの後藤さんに、顧客が実際にどのようなことを思って使っているのかを教えてもらいました。
後藤さん：『リニューアルの話が本格的に出る前に、直接利用企業の担当者と接していた私は、プロダクトの機能に対する要望をずっと聞いてきました。要望や意見が出るたびに、スプレッドシートでずっとまとめてきたんです。番匠谷さんには最初のタイミングでそのシートを共有し、顧客がHR PRIMEをどう使っていて、どういうことを期待しているかを伝えました。』
最初にPdMとエンジニアと僕の3人で全体の設計を議論して、紙やFigmaでラフを作っていきました。まず一つの機能のラフを作り、PdMに確認してもらい、もっと現場に詳しいCSの後藤さんに意見をもらいました。このサイクルを回していくうちに、PdMを介さず、顧客のことを良く知るCS後藤さんから直接Figmaのプロトタイピングに対して意見をもらうフローが出来上がっていきました。
複雑な遷移をする機能について簡単なワイヤーフレームを作ってすり合わせた
1月にプロジェクトがスタートし、リリースの目標が5月でした。スケジュールがタイトになることは当初からわかっていたので、「とにかく作らないこと」をテーマに、なるべく最小限で必要な機能だけを作ることにしました。リニューアル前のプロダクトから「この機能は削れるのではないか」というものを洗い出して、1つひとつ取捨選択しました。
後藤さん：『「これは絶対いるのに...」と思う機能も正直ありました。でも「間に合わない」と言われ、その都度激論になりました。顧客からの要望を番匠谷さんと一緒に優先順位付けして、機能を決めていきました。』
タイトなスケジュールの中でデザインを完成させなくてはいけない僕は「とにかくシンプルに」作ることを意識していました。一方で、毎日顧客と接しているCSの後藤さんは「この機能は顧客のためになる」という意見を持っています。
例えば、HR PRIME にはLINEフォームを使ってクライアントの採用候補者の情報を集めることができます。このフォームを使って集計した情報をCSVファイルとしてダウンロードすることができる機能があるのですが、開発スケジュールの関係からこの機能を当時ぼくは削りたいと考えていました。しかし、後藤さんはこの機能を削ると困るクライアントがいるので出来るだけ削りたくないという意見でした。
どうして削れないか数値感をしっかり伝えてくれる後藤さん
なぜ必要な機能なのかを具体的に教えてくれる後藤さん
その後もなぜ必要な機能なのかを聞くなどしてすり合わせいきました。ふたりで話し合っていった結果として、クライアントが本当に必要なのは「集計結果をCSVとしてダウンロードできること」ではなく「集計結果をCSV風なビューで横並びに一覧できること」ということがわかりました。
僕も後藤さんもそれぞれポジションをちゃんと取り合いながら、最適解を探っていく。こうして、機能の優先順位づけを進めていきました。
開発すべき機能の優先順位を決めるシート。何百回も触った思い出のシート。
Figmaでプロトタイプを作っては、Slackでリンクを共有して後藤さんにメンションを飛ばして見てもらう。後藤さんは顧客の声をもとにフィードバックを行う。このサイクルを繰り返し、デザインを完成させていきました。
上司の石井さんがCSさんの意見をプロダクトに強く反映していこうとチームを巻き込んだところ。特にここからCSの皆さんの意見を反映できるようになった気がする。
システムのリニューアルによって以前使えた機能でも新しいシステムに実装する余裕がないことがあり、このメモ機能も一部使えなくなってしまうことになった。それを今回のリニューアルのスコープから削っても大丈夫そうかを確認しているシーン
リニューアル前のシステムにはある機能だが、リニューアル後のシステムにも実装するにはスケジュールがキツく、優先度をすり合わせながらデザイン・実装を進めた。
Slackに大量に投げたFigmaファイルに大量の返信をくれる後藤さん。忙しい中確認してくださっているのに毎回すごい量のコメントをいただけた。
後藤さん：『作ってくれたプロトタイプに対して生の声を反映するために、契約更新の企業へのアポイントにFigmaのプロトを毎回持っていっていました。最初からその体でアポイントをとっていましたね。「こういう機能、こういうデザインになります」というのを伝え、要望を回収し、アポイントが終わるたびに番匠谷さんに共有していました。1日1社は企業と接していたので、意見や要望を伝える回数もかなりありました。』
作っては顧客のフィードバックが飛んでくる。後藤さんと強く連携していたので、大量に材料をもらえたのはとても有り難かったです。「完成したら絶対に使ってもらえる」という確信を持ちながらデザインをすることができました。
CSチームの榮さんもクライアント企業の担当者の方にFigmaのプロトタイプを見せて意見をもらっていたが、プロトタイプがうまく繋ぎ合わせられてない部分をご指摘いただいた時のSlack...
CSの後藤さん以外にも、多くのビジネスサイドの方にフィードバックをもらいました。Figmaを触ったことがない人がほとんどだったので、最初にリニューアルに関わる全員に僕主催でFigmaの勉強会を開きました。Figmaの触り方、フィードバックの伝え方などを最初にインプットさせてもらい、それ以降は遠慮なくFigmaのリンクを共有していました。
ひたすら生のFigmaファイルを触ってもらいながら説明をして操作に慣れていただきました。こんなに荒い勉強会でもFigmaを使いこなせるようになるCS・セールスの方々は最強でした...
また、CSの人はめちゃくちゃ忙しいので、時間をとってレビューをもらう申し訳なさは正直ありましたが、遠慮は一切しませんでした。「1分だけいいですか？」と声をかけ、結局1分では終わらないのですが、何度も顧客目線でのレビューをもらい続けました。当時はリモート勤務もできたのですが、レビューを気軽にもらえるようにほとんど毎日出社して、PCを持って横で作ったデザインを解説しながらレビューをもらったりしていました。
最終的なデザインはこちらです（プロトタイプはこちら）。
今回、デザインのフルリニューアルは自分自身初めての経験でした。toBのSaaSという専門性の高いプロジェクトを完遂できたのも、常にCSの後藤さんが顧客の声をフィードバックしてくれたからです。
また、後藤さん以外、社長やPdM、セールスの方々全員が非常に高いレベルでクライアントを理解していて、自分の業務もある中でデザインに積極的に意見してくれたのは非常に有り難かったです。期間内でやり切れたのは、ほとんどみなさんのおかげです。
Micoworksのバリューの1つに「Ownership（オーナーシップ）」があります。今回のプロジェクトはまさに、関わる人全員のオーナーシップが発揮されていました。その中で、デザインの専門家として自分でしっかりポジションを取って「何を作って何を作らないか」という取捨選択の部分にこだわれたのは我ながらよかったと思っています。
このリニューアルが終わったのは2020年6月なので、既にクライアントからのフィードバックもたくさんあり、今後ももっと改善がんばっていきたいと思います。
最後まで読んでいただき、ありがとうございました！