Product Led Team によるオンボーディングツアー開発
はじめに
ストックマークのプロダクトであるAstrategyのオンボーディングツアーを作り込んだ結果、
受注までのリードタイム短縮
カスタマーサクセスチームリソースの最適化
といった効果が生まれています。何より顧客の声として、もともと「UIが分かりづらい」というフィードバックをいただいていましたが、一転して「UIがわかりやすい」という真逆の声をいただくようになりました。
オンボーディングツアーの作り込みといっても、なかなかイメージが湧きにくいかと思います。そこで本記事では、プロダクト開発の1パーツとして、オンボーディングツアーの開発に必要な3要素を紹介いたします。
本記事を読むことで次の3つを理解いただけます。
なぜオンボーディングが重要なのか？
どうやってオンボーディングツアーを作り込むのか？
オンボーディングツアー開発時の工夫ポイントは？
なぜオンボーディングが重要なのか？
The Moment of Truth という概念をご存知でしょうか？もともとは、スカンジナビア航空 元CEOのJan Carlzon氏の書籍 “真実の瞬間” で紹介される概念であり、簡単にいえば、お客様に対応する15秒間の体験が、サービス・プロダクトの良し悪しを判断するという考え方です。SaaSに概念を応用して具体化すると、お客様がプロダクトを触りはじめて15秒程度で、「もっと使ってみようかな？」「難しいからやめようかな」といった気持ちになるということです。
この考え方は、ストックマークのSaaSにとって特にクリティカルであると考えています。なぜならば、AstrategyはいわゆるBI(Business Intelligence)ツールであるため、お客様が様々なインサイトを得るために一定の操作を加える必要があるからです。もちろんUIは極力シンプルに開発するものの、お客様のBIツールに対する要求条件が複雑になればなるほど、UIだけでは解決できなくなります。
操作が難しいからといって、使いはじめてすぐに離脱してしまっては顧客体験が最悪となってしまいます。そのため、もともとはお客様が本格的に使い始める前に、CS（カスタマーサクセス）チームが説明することで、オンボーディングの一端を担っていました。お客様に説明を一通り聞いていただければ、お客様がAstrategyを使いこなせるようになります。
しかし、これはあるべき姿ではないと考えています。本来は、CSチームから説明を受けずともお客様がプロダクトを使いこなせれば、より早い段階で価値を得られるようになります。
そこで、お客様がプロダクトにログインした段階で、画面上でコアな価値を体験できるオンボーディングツアーの開発をはじめました。オンボーディングそれ自体は、SaaS上での接点だけでなく、CSチームとの接点も含めた全ての体験がスコープになりますが、本記事で扱うオンボーディングの範囲は次のとおりです。
どうやってオンボーディングツアーを作り込むのか？
オンボーディングツアーといっても、何を作ればいいのか最初は検討がつかないかもしれません。ここで、最重要な情報ソースになるのはやはりお客様です。
もともと、CSチームがお客様向けに操作を説明する機会があったため、そこにまず同席します。この際、お客様のカメラ映像をひたすら注視します。カメラ越しであるため、対面ほど情報が得られるわけではありませんが、カメラ越しの表情のみでも貴重な情報が得られます。たとえば、ある地点までは和やかな表情だったのに、理解が難しい箇所になると、眉間にシワが寄るなどの変化が生じるのです。（カメラ映像がオフの場合は、お客様からの質問など、全体のトーンで判断します）
この段階で、カスタマージャーニー上で特にプロダクトの理解が難しい箇所がわかってきます。お客様の感情の起伏と、発生しているイベントをまとめていきます。次の画像は、実際にMiro上で作成したものの一部キャプチャです。
ここまでの作業で、重要度の高い課題の目処がたってきます。そこで、続けて課題に対する解決策の有効性を検証する際のプロトタイプを作ります。もちろんいきなりゼロから実装するのではなく、Figmaを用いて、絵コンテ的に流れを作成していきます。最初は数が多くなってしまいますが、UIを見て判断できそうな箇所などを削除し、必要な画面を極限までシンプルにしていきます。
参考までに、実際にFigmaで作成していた絵コンテは次のようになります。
あとは、この画面を1つのオンボーディングツアーとして、実際のプロダクトと統合していきます。この統合時にも工夫ポイントがあります。
オンボーディングツアー開発時の工夫ポイントは？
オンボーディングツアーの画面遷移自体も、いきなり正解が見つかるわけではありません。オンボーディングツアーに対するお客様の反応をみて、細かい仮説検証を回していきます。細かい点であれば、文字をいくつか削るなど、小さな変更をデザイナー中心に変更していきます。
高速なフィードバックサイクルを実現するため、今回はIntercomを使ってなるべくコーディングしないように実装を進めました。
実際に作成したオンボーディングツアーのイメージは次のようになります。
もちろん完全にノーコードで実装できるわけではないため、そこはプロダクト開発チームと連携します。たとえば、オンボーディングツアー中に何らかの事象(誤ってダイアログを閉じてしまうなど)によって、お客様がツアーから途中離脱するケースがあります。その後、お客様が再度画面を開いたときに、最初から始まるのでは最適なユーザー体験とは言えません。そこで、ツアーの途中から再開できるような機能は、プロダクト本体と連携して実装しています。
その他、細かい工夫ポイントがたくさんあるのですが、非常に長くなってしまうため本記事では割愛します。もし詳しい内容を知りたい場合は、是非カジュアル面談しましょう！
Product Led Team による総力戦
今回のオンボーディングツアー開発は、Astrategyというプロダクトに関わるチームの総力戦でした。すなわち、プロダクト開発チームだけではなく、CSチーム、デザイナ、プロダクトマネージャ含めて、全員で最高のオンボーディングツアーを考えて、作ってきました。
オンボーディングツアー開発では、プロダクト自体に実装する箇所、デザイン部分、お客様サポートなど複数の観点が絡んでおり、お客様にとっては全部揃って1つのユーザ体験になります。
ストックマークでは、Productを中心にカジュアルに議論する文化があるため、今回の開発が上手く進めたのではないか、と考えています。
で、オンボーディングツアーを導入した結果は？
もともと、CSチームからお客様に説明する打ち合わせを設けていましたが、その打ち合わせが不要となりました。結果として、CSチームはより深い価値提供にリソースを割けるようになっています。（＝CSチームリソースの最適化）
また、当然のことながらCSチームの説明を待つ必要がないため、実際にプロダクトの価値を早くお客様が体験できます。オンボーディングツアー自体も、お客様が理解しやすいように常に改善しているため、結果として受注リードタイムの短縮につながっています。
おわりに
ストックマークは、Astrategyの他にもAnewsといった、業界最先端のAI技術を使ったプロダクトを提供しています。ご興味ある方はこちらの採用ページをご覧ください！
こちらのニュースも御覧ください！