![[Asset] Hotjar/heap/Contentsquare](http://images.ctfassets.net/gwbpo1m641r7/1ueoMEqNMJT9VRlSe3YiYb/c25abf4ed3f67bb861c60203465689fe/CSQ_-_CoBrand_-_Desktop_-_Light_Mode.png?w=3840&q=100&fit=fill&fm=avif)
この顧客事例は元々Hotjar.comに掲載されており、Hotjar製品に関するお客様の体験談を反映しています。 HotjarがContentsquareグループに統合されたことに伴いこの顧客事例は、統合コンテンツエクスペリエンスの一環として、Contentsquareウェブサイトに移行しています。
HubSpot Academyは、インバウンドマーケティングとセールス教育における世界的リーダーです。2012年の設立以来、HubSpot Academyは、デジタル時代に対応したオンライントレーニング(コース、プロジェクト、認定資格、ソフトウェアトレーニング)を提供することで、人々と企業の成長を変革することを使命としています。
先日、 HubSpot Academy のシニアグロースマーケター、Eric Peters氏にお話を伺いました。HubSpotがVoC(Voice of Customer、顧客の声)機能を持つHotjar(現在はContentsquare上で同様の機能の利用が可能)を活用して、訪問者がコース登録ページを放棄する理由を把握する方法や、フィードバックに基づいてユーザー主導の意思決定を行い、効果的なページ再設計を行う方法について説明していただきました。
ー まず、Hubspot アカデミーについて、アカデミーはどのように始まったのか、そして誰を対象としたものなのかを教えてください。
Eric氏 : アカデミーではインバウンドマーケティングとセールスの教育コンテンツを提供しており、毎月約 1 万人が登録しています。
HubSpotは2012年から2013年にかけて、当初はお客さま限定でコースの提供を開始しました。お客さまを成功に導くには、HubSpotソフトウェアの使い方を教えるだけでなく、 優れたマーケターになる方法を教えることが重要だと考えていたからです。
当時、学生が大学で学んでいることと、実際に仕事をする上で必要な知識との間には大きなギャップがありました。
これは、長年旧来のマーケティング手法を実践してきたベテランマーケターにとっても同様で、近年になって突然ウェブサイトでの「コンバージョン」を気にする必要に迫られたのです。
お客さまかどうかにかかわらず、人々がこっそりとコースに足を運んでいることに気づき、私たちは誰でもコースを受講できるように開放することにしました。
![[Asset] Customer story - Hubspot website](http://images.ctfassets.net/gwbpo1m641r7/23J0Zifc4VPYCz8VOJnqZ8/e4266d75e0db4a800d7f3b79c862c3f3/Hubspot-hotjar-1.png?w=3840&q=100&fit=fill&fm=avif)
ー HubSpot アカデミーの訪問者のジャーニーは、到着から登録までどのようになりますか?
Eric氏 : アカデミーでは、 認定コースに2段階の登録プロセスを採用しています。訪問者が最初にアクセスすると、「スプラッシュページ」が表示されます。このページでは、コースと認定試験の内容、対象者、認定資格の取得で得られるメリットなどを簡潔に説明します。
訪問者がコースに登録するためにクリックすると、登録フォームが表示されます。
![[Asset] Customer story - Hubspot form](http://images.ctfassets.net/gwbpo1m641r7/5DQQ6Aa9zWPanytUIa6x0U/c92ac40a8128d494e1ed6b4c93825f61/Hubspot-Hotjar-2.png?w=3840&q=100&fit=fill&fm=avif)
ー 長い登録フォームを2つ目のステップに残しておくことのメリットは理解できます。この登録フローで最大の課題は何でしたか?また、ページを変更する必要があったのですか?
Eric氏 : 昨年末の時点では、ランディングページはまずまずの成果を上げていました。全体的に見て、訪問者から登録までのコンバージョン率は9%で、ランディングページとしては悪くない数字でした。しかし、前回のページデザイン以降、いくつか大きな変化がありました。
![[Asset] Customer story - Hubspot new page](http://images.ctfassets.net/gwbpo1m641r7/3IgPqrdOM0Xajr4fQObvE5/2b21f8082aea6b6b843878989d34e90f/Hubspot-Hotjar-3.png?w=3840&q=100&fit=fill&fm=avif)
アカデミーでは、ますます多くの新しい言語でコースの提供を開始し、様々な目的を持つ新しいタイプの訪問者が集まるようになりました。しかし、これが大きな問題となっていました。スプラッシュページは一度に多くの情報を伝えようとしすぎていて、メッセージが複雑になりすぎているのではないかと懸念していました。
また、デザイン面でも、ページが古くなってきていました。アカデミーはユーザーに最先端で常に更新される教育を提供しており、デザインもそれを反映する必要がありました。
私たちは、明瞭性の面でも非常にうまく機能する、 最新のページテンプレートを作らなければなりませんでした。
これを受け、まず最初に私たちはページのパフォーマンスとフォームの分析をかなり深く掘り下げて、リデザインに役立つパターンを見つけようとしました。
ですが、その話し合いの最中、UXデザイナーの一人が、私があまりに細かく話しすぎていると感じて、こうアドバイスしてくれました。
「そのページにの離脱意図調査を載せて、なぜこのページを離れようとしているのか尋ねてみればどうですか? 」
なるほど、すごくシンプルだと思いました。これまでHotjarのアンケート機能を使ったことはありませんでしたが、試してみる価値はあると思いました。その日の朝、すぐにHotjarでオンサイトアンケートを設定しました。
その日の終業時までに、私が探し求めていた答えのいくつかがすでに得られていたことに驚きました。 そしてそれは私が期待していた答えとは違ったものでした。
「こんにちは。デジタルマーケティングの無料コースを探しています。」
「これが私のキャリアにどう役立つのか分かりません。」
「アカウントが作成できません。求職中なのに、フォームで会社名の入力を何度も求められます。助けてください。」
調査により、私たちがこれまで知らなかったページ上のフリクションが明らかになりました 。Hotjarの調査回答に基づき、まずは既存のページのコンテンツを更新するという、最も簡単な問題の修正に着手しました。
サイト離脱の理由 | 問題 | 改善施策 |
|---|---|---|
「デジタルマーケティングに関する無料コースを探しています。」 | このコースではデジタルマーケティングがカバーされていないと思う。 | 「インバウンド マーケティング」をより明確に定義し、デジタルマーケティングの一形態であることの説明を追加 |
「これが私のキャリアにどう役立つのか分かりません。」 | 認定資格がキャリアアップにどのように役立つのか分からない。 | 直感的で認識しやすい、メリットを重視したコピーをページに追加 |
「フォームには会社名を何度も尋ねられますが、私は求職者です。」 | このコースは求職者向けではないと思う。 | 「誰が認定を受けるべきか?」というセクションをより分かりやすく表示、フォームに求職者オプションを追加 |
そして、そのページのコンバージョン率が上昇し始めました。
![[Asset] Customer story - Hubspot Academy logo](http://images.ctfassets.net/gwbpo1m641r7/17c5w810P6SKcq47cc531l/02e7c92e479ee5005ed446c0a27755c9/hubspot-academy.webp?w=750&q=100&fit=fill&fm=avif)
Hotjar 調査からの変更により、新しいページ テンプレートの設計を開始するのに十分な自信が得られ、その後、A/B テストを行って最終バージョンを作成しました。
ー それは嬉しいですね。今のデザインにたどり着くまでに、何回くらいバージョンアップをされたんですか?
Eric氏 : 最終的に採用されたデザインにたどり着くまでに、2つのバージョンを試作しました。Hotjarのオンサイトアンケートの回答を基に、インバウンド認証ページの新しい英語ページのデザインでコンバージョンが10% 向上したことを確認しました。その後、この成果を他のすべての言語にも展開しました。
![[Asset] Customer story - Hubspot](http://images.ctfassets.net/gwbpo1m641r7/5KX2kB7NWDEiaNXMk2oG2s/59a6a62eb4f71e26ca299c3a9382bcbf/Hubspot-Hotjar-6.jpeg?w=3840&q=100&fit=fill&fm=avif)
ー 確かな結果ですね。今回の調査結果から導き出された、現在のスプラッシュページの重要な要素についてお話しいただけますか?
Eric氏 : 多くの回答者は、コースの最後に認定試験があることを理解していませんでした。この問題を解決するための改善策として、一番目立つ画面に認定の詳細に関するより明確な説明セクションを設け、認定に必要な試験についても明記しました。
![[Asset] Customer story - Hubspot free course](http://images.ctfassets.net/gwbpo1m641r7/5YGdAYNzV9rAVX9gORJeUi/7151ae0ab5a6430395700a6e4dda73ad/Hubspot-Hotjar-7.png?w=3840&q=100&fit=fill&fm=avif)
他の回答者は、認定資格が自分にどう役立つのかよくわからなかったため、「認定資格取得のメリット」セクションを作成しました。簡潔で理解しやすくするために、ページ上で十分なスペースをこのセクションのために確保しました。
![[Asset] Customer story - Hubspot beneftis](http://images.ctfassets.net/gwbpo1m641r7/4I0Ih20kJx16ocoVVxj6q8/47cc8c38c0b59ee5abca2809ee2ea8a9/Hubspot-Hotjar-8.png?w=3840&q=100&fit=fill&fm=avif)
また、アンケート回答で、ユーザーがコースを受講できるかどうかについて懸念する声が多数寄せらていました。
そこで、ページに「認定資格を取得すべき人」 セクションを追加しました。現在は「デジタルマーケティングを学びたいやオンラインで見つけてもらいたい」表現にすることで、認知段階の異なる訪問者とのコミュニケーションを改善しています。
![[Asset] Customer story - Hubspot - Whats in the course](http://images.ctfassets.net/gwbpo1m641r7/2lZACkY1YwHcP7yPTofjts/ed199fc2bbe2f4a2af2afe9216fb08f4/Hotjar-hubspot-9-1.png?w=3840&q=100&fit=fill&fm=avif)
ー この経験に基づいて、ランディングページのパフォーマンスを向上させるためにサイト内アンケートを試してみたいと考えている人たちに何かアドバイスはありますか?
Eric氏: このプロジェクトでチームにとって最も困難だったことの一つは、デザインプロセスから私たちの意見を排除することでした。デザインがかなり洗練されていると思っても、データがそうではないことを示している場合は、耳を傾けなければなりません。
リニューアルを行う際は、主観的な意見に惑わされないよう注意しましょう。代わりに、収集した訪問者のインサイトに基づいて意思決定を行うことが大切です。
ー このプロセスで Hotjarを使用することで得られた追加のメリットは何でしょうか?
Eric氏 : Hotjarを使用するのは、アンケートを表示するURLを決めるだけです。UXデザイナーが試してみるように勧めてから1時間後には、アンケートはすでに公開され、回答が得られ始めていました。
スピードは素晴らしかったです。 私たちには、誰がどこでコードを変更できるかについて多くの社内ルールがあります。もし2日間かけて実装し、私が開発者に依頼しなければならなかったら、おそらくそんなことは起こらなかったでしょう。
![[Asset] Customer story - Hubspot Cover image](http://images.ctfassets.net/gwbpo1m641r7/680bBywNjE8DqLuqvTptoK/7174423663f63c9000b1d4d4aa7d84e4/brooke-cagle-LCcFI_26diA-unsplash.jpg?w=3840&q=100&fit=fill&fm=avif)
![[Asset] Customer story - HeyOrca Logo](http://images.ctfassets.net/gwbpo1m641r7/3r2CZwgjPRFm6BsJ5JufNO/ab376a9e94de5ffe56271d84612814af/Heyorca_logo.webp?w=1080&q=100&fit=fill&fm=avif)
![[Asset] Customer story - DashThis logo](http://images.ctfassets.net/gwbpo1m641r7/xQTPUDEvhWCRNhTNW21ts/6a7b7bda3b97127175c143023f19245f/dashthis_logo.png?w=1080&q=100&fit=fill&fm=avif)