Tech & Design LAB

カスタマーサクセス×デザイナーの越境プロダクト開発

#デザイン #カスタマーサクセス #プロトタイプ #越境
author icon
Posted on
design

UI/UXデザイナーの山崎です。カスタマーサクセス向けのツールを提供するHiCustomerにおける、カスタマーサクセスとデザイナーの協業プロセスをご紹介します!

そもそもカスタマーサクセスって?

一言でいうと、カスタマーサクセスは「顧客が自社プロダクトから多くの価値を引き出せるよう支援するお仕事」。顧客が困った状態に陥る前に能動的にサポートをしたり、プロダクトを最大限活用できるようガイドします。

顧客がプロダクトから価値を引き出せれば、契約の継続や、利用拡大につながります。サブスクビジネスでは、顧客が契約を継続してくれるかどうか、単価を上げてくれるかどうかが事業成長に大きく影響するため、カスタマーサクセスはいま注目されている職種なのです!

カスタマーサクセスとデザインは似ている

カスタマーを主語に語り、カスタマーに価値を届ける/引き出すという点で、デザイナーとカスタマーサクセスはよく似ていると感じます。

個人的なデザイナーとカスタマーサクセスの解釈はこんな感じ。

デザイナーとカスタマーサクセス、2つの職種は同じゴールを見ているのだから、協業しない手はないです!

カスタマーサクセスを開発に巻き込む!

HiCustomerでは、実装前のプロトタイプに対して、カスタマーサクセス (以下CS) からレビューをもらい、一緒にプロダクト開発をしています。

プロトタイプはFigmaで作成しています

エンジニアとデザイナーだけで開発を進めると、とんでもない見落としがあったり…

実際に、CSによるレビューでプロトタイプがどのようにブラッシュアップされたか紹介します。

機能のアップデートに取り組む

HiCustomerには、各顧客に紐づく情報の項目その値を、APIを通して自由に送信できる機能がありました。これは、WebUIからの参照はできますが、情報の変更ができないものでした。

今回はこの機能のアップデートとして、APIを使わずにWebUI上で値を変更できるようにします。

UXの検討が甘かったプロトタイプその1

最初は、「値が設定されている項目」と「値が未設定の項目」を別々に表示していました。※画像はプロトタイプをデフォルメしたものです。

このUIを、HiCustomerのCS高橋さんと白坂さんにレビューしてもらいました!

HiCustomer CS高橋さん🤔「値が設定済みか未設定かに関わらず、すべての項目を一覧で表示できませんか?お客さんが設定を編集するとき、『この顧客はあの項目が未設定のはずだから、未設定の一覧から目的の項目を探して入力しよう』とはならないと思うんです。」

HiCustomer 白坂さん🤔「お客さんは、APIでエクセルなどの表を送信していたので、表の感覚が強いんです。値が設定されている項目、未設定の項目を分けて考えることはないと思います。」

思わぬ罠があったプロトタイプその2

お二人のフィードバックから、「値が設定されている項目」と「値が未設定の項目」を分けず、全てを一覧表示することにしました!

白坂さん 🤔「値が未設定であることを “-” で示していますが、文字列としての “-” を設定する場合もあるんです。これら2つの区別が付くようになりませんか?」

文字列の “-“が設定されているとは、PdMも私も認識していなかったところ。

三度目の正直、最終プロトタイプ

”-“の未設定/設定済みの区別がつくように見た目に差をつけ、細かなユーザビリティを検討し、最終版が完成しました!

CSレビューは、CSが把握している独特なユースケースや、顧客からの要望など共有してもらうことで、PdM・デザイナー・エンジニアの解像度が上がっていくので、とても重要だと感じています。

あ〜〜そこは見落としてたな!という発見が毎回あります!

プロダクトチーム×カスタマーサクセスの体勢

HiCustomerでは、プロダクトチームとカスタマーサクセスは具体的にこんな関わり方をしています。

  1. カスタマーの要望を社内で共有 CSが吸い上げた、カスタマーからの「こんな機能欲しい」とか、「ここ使いづらい」などのご意見を、定例会でPdMとデザイナーに共有。適宜Backlogに積みます。 定例会は耳も心も痛いイベントです…でも作り手側には見えてなかった課題が把握できるので、CSが強い組織ならではの、重要な場。

  2. 定例会で、チームの枠を越えてBacklogの優先順位を決定 プロダクトチームだけでなく、CEO、PdM、CS、営業メンバーで集まり、溜めたBacklogの優先度を整理しつつ、カスタマー要望の真意を掘り下げるなどリサーチを行います。 社内でも職種によって、お客様に届けたい機能や施策の優先度が違うので、この定例会は静かにアツいイベント。

  3. Figmaでプロトタイピング & レビュー 実装に入る前に、PdMとカスタマーサクセスにレビューをもらいます。Figmaで作ったプロトを見てもらいながら、その場で意思決定をしていきます。

  4. リリースとデリバリー 要望をくださったカスタマーに、カスタマーサクセスからご報告とお礼を伝えます!

カスタマーサクセスにデザイン相談するとき気をつけていること

カスタマーサクセス×○○

デザイナーとカスタマーサクセスは目的が同じで似ている、という話をしましたが、営業だってエンジニアだって顧客が成功することを願ってやまないはず。みんなの向かう方向がカスタマーの成功なら、カスタマーのことを前者でもっと理解していこう!ということで、HiCustomerでは、全社員参加でカスタマー交流会を行い、プロダクトに対し多くのフィードバックをいただきました。

都合の良いフィードバックだけではない…

カスタマーに対する解像度が上がり、「カスタマーが成功できるようもっとプロダクトを良くせねば!」というモチベーションが職種を越えて高まりました。開発側としてはお尻に火がつきます…

カスタマーが書いた付箋を見ながら盛り上がるエンジニア

HiCustomerが、[サービス提供会社] と [カスタマー] というカテゴリーを越えた一つのコミュニティになっていくといいな。

ここから宣伝~~~~

やりたいことたっくさんあり、Backlogにすごい量が溜まってるのに、エンジニアさんが足りません…!!!!弊社、理知的で大人、ほんわかしたエンジニアが多いです。

興味のある方はぜひ遊びに来てください!最寄りは五反田駅。自慢のコーヒーマシンがあるので、美味しいコーヒーご馳走します!

https://hicustomer.jp/recruit/engineer/

author icon
デザイナー

大切にしてること:観察を通してお客さんを理解する。負けずに何度もプロトタイピングする。周りを巻き込みチームでワクワクものづくりをする。夏になったら虫採りと渓流釣りに行く。