マーケティングツールを提供するHubSpotのサイトは、毎月400万人以上のユーザーが訪問し、90カ国、18,000社以上の企業にサービスを提供しています。
HubSpotにとってこのサイトは、ビジネスの要となる存在です。HubSpotが一民間企業から、世界規模の組織へと大々的に成長する段階で、サイトのリニューアルが必要となりました。
リニューアルは突如限られた期間内で行わなければならず、プロジェクトのキックオフからわずか1.5カ月後に控えた、HubSpotが年に一度行う産業イベント「INBOUND」での新製品のグランドリリースに間に合わせることが条件でした。
UXデザイナーのAustin Knight氏がこのプロジェクトを先導し、ビジュアルデザイナーとエンジニア、そしてマーケティングマネージャーの３人によるチームがそれをサポートしました。Knight氏はこの即席のチームの他にも、製品のポジショニングやコピーライティング、技術的な開発などにも携わる６人の人間と働いていました。
今回の記事は、窮屈なスケジュールの中で収益性をクリアするために、デザイナーがリーン思考における集約的な検証やコラボレーション、徹底した顧客主義をどうプロジェクトに取り入れたかをご紹介します。
リニューアル後のHubSpot
以下の文章はThe Project Guide to Enterprise Product Designからの抜粋です。実際のプロジェクトに基づく最適な実践方法を無料で提供しています。
ステップ１：入念な分析と常時行われるユーザーテスト
HubSpotプロジェクトは、Knight氏がより反復的なLean UXのアプローチをチーム内に導入した時点から始まりました。Jeff Gothelf氏によって考案されたLean UXは、ビジネスにおける戦略を、「構築－計測－学習」という流れの「学習のループ」を通じて行われる、軽量なデザインのプロセスを列挙したものです。
この仕事の最初のステップでは、仮説を迅速に立証するために、詳細な分析とユーザーに関するリサーチを行いました。
アナリティクスとヒートマップ
一般的には、マーケティング分析の担当者がデザイナーのチームに、Webのデータに関する解析結果を提供しますが、Knight氏は今回自分自身でデータ分析を行いました。
膨大な量のデータは、HubSpot、Google Analytics、Mixpanelのツールで処理されました。主たる目的はデータを整理して、有意なパターンを明らかにすることでした。
それにより、Knight氏は次のような行動を示す、一定数量のユーザーがいることを発見しました。
・サイトに来てからすぐに値段の確認を行う（製品のメリットが自分たちとは関係ないと決めつけている）
・サイトからまっすぐにFAQに行く（不明点に対して、コンテンツを見るだけでは解決していないことを意味する）
・サイトからまっすぐにサイト検索に行く（製品について分からないことがあって、コンテンツだけでは求めている情報がすぐには入手できないことを意味する）
様々なコンテンツを掲載しているものの、サイトは決定的な情報を欠いており、コンバーションを減らしていることが明らかになりました。
Knight氏は、25,000人のユーザーを対象としたヒートマップとスクロールマップを作成し、467,308個の一意なデータを入手しました。過去数年から現在までのマップを用いて、Knight氏はどの時点でエンゲージメントの失敗が起きているか、より理解することができ、特にサイトをスクロールするユーザーは25％にしか過ぎないことを発見しました。
セッションレコーディング
最後に、量的・質的双方の調査にもなる、ユーザーとのセッションレコーディングが行われました
セッションレコーディングでは、実際のヒアリングセッションを生で記録し、匿名かつ調査中であることを知らせずに行います。自然な状況下でのユーザーの行動を知ることができて、大変信頼性のある結果が得られました。
セッションの記録はプロジェクト全体の期間を通して継続的に行われ、ユーザーへのインタビューやユーザビリティテストを立証するための、データを集めることができました。
質的調査
量的調査は、統計的に「何が」を集計するのに有効な手段で、基本的には「どうして」を明らかにするものではありません。ユーザーの行動やUXの背景にある動機を探るために、デザイナーはユーザーやステークホルダーにインタビューを行います。
1． 顧客へのインタビュー
HubSpotのサイト内でのユーザー行動の10％が、HubSpotの顧客によるログインや資料などの収集なので、デザイナーはこれらの利益をもたらすユーザーグループを無視することは出来ません。
Knight氏は顧客へのインタビューを通して、その他のデータの立証をするだけでなく、新しいサイトにおいて特定のユーザー層にインパクトのあるコンテンツを届けられるための基礎概念を築くことを目的としました。
ユーザーへのインタビューのプロセスを入念に構築し、質問と結果を結びつけることで、Knight氏は大変有用なフィードバックを入手しました。
2．ステークホルダーへのインタビュー
プロジェクトは文字通り、HubSpotのデジタル領域における顔となるものを変革させるものでしたので、Knight氏は会社内の首脳陣や開発チーム、マーケティング、営業、カスタマーサポートチームの人間にもインタビューを実施しました。
その際にKnight氏は、ユーザーへのインタビューから得たフィードバックや、サポートセンターに対する問い合わせ記録、勝手に行われたHubSpotのサイトのリニューアル案、ツイート、メール、そしてKnight氏の個人的なイベントに参加した人々との会話記録なども合わせて、調査結果を分析しました。
「データにしっかりと基づき、人を中心としたデザイン。これが私たちの行うものです」
「デザイナーは自分自身でデータを解釈して用いる必要があり、どんな時でもいけると思ったら自分自身のデザインに関する決定を、客観的に認められたものだとしなければなりません。
私たちはデザイナーとして、質的・量的なデータにより基づいたデザインが要求される産業の中で働いています。例えば、単なる印象論や「好き・嫌い」などに基づいて、意思決定をすることはまずできません。それを超えたものの存在に気づかなくてはなりません。
今日（こんにち）において、デザイナーがあやつる真のマジックとは、内的・外的なデータをそれぞれ理解して、情報をソリューションの形へと、よく考慮して変身させることです。
多変量分析による微調整
最後にKnight氏は、最初の調査を用いて、多変量分析を用いた実証に向けて多少の付け足し分のデザインを素早く行うことが出来ました。
多変量分析は特定のデザインの要素が、よいものか改善すべきかを判断するのに有用です。サイト全体のリニューアルの段階になったときに、チーム全体の戦略的な意思決定に影響するものです。
ステップ２：「生きている」デザインを構築する
The Project Guide to Enterprise Product Designの記事で解説したように、Knight氏は「まず広いところから始めて、検証、学習、反復をしながらそれぞれのステップで最適な解決案へと狭める」というプロセスを実践しました。
ローファイなプロトタイピング
開発チームが案を３つ程度にしぼれた段階で、彼らはローファイなプロトタイプを作成しました。ステークホルダーも見れるようにし、必要に応じて修正を加えました。
方向性が決定しても、Knight氏はまだビジュアル要素のデザインに取り掛かる前に、複合的に見直しを行うためにローファイの段階で作業を行いました。
実際に見てみると、ローファイのプロトタイプは最終的な製品と驚くほど似ています。ほとんどの時間はユーザーからのフィードバックや方向性を集めることに注がれました。
「私たちは、紙の上のプロトタイプからデザインの骨組み、ビジュアルデザインに移行する作業段階まで、ユーザーと徹底的に検証を行いました。」
「顧客の声は、工程の中に全て組み込まれています。デザイナーとして、耳に入るこのプラスアルファな声こそが重要なのです。あらゆる決定を左右するものではありませんが、方向性を決めるのにとても役に立ちます。」
モックアップ
ビジュアルデザインの段階では、Knight氏はビジュアルデザイナーと密接に仕事をしました。
これ以前にKnight氏は、プロジェクトのそれぞれの段階で、開発者とデザインに関する話し合いを何度も重ねていました。より精度の高いプロトタイプを作成するまで、コーディングを大々的には始めておらず、チーム全体がデータ分析の結果に基づき、同じページの作業段階を共有するようにしていました。
開発チームは、力強い配色と高解像度のイメージ、変則的なグリッド構造を用いて、モダンな美しいデザインを作成しました。このグリッド構造は、新しいサイトで「生きているデザイン」を表現するために、採用されました。
グリッドをベースとしたモジュール構造は多数のデバイスに対応し、コンテンツは容易に移動や変更ができ、ステークホルダーやユーザーの意見を即座に反映しやすくしました。
変則的なグリッド構造に関するもう一つの興味深い要素が、フォトフレーミングです。
とてもユニークなセットの写真を、グリッド構造に完璧にフィットするように配置しました。通常では写真はぼやけた状態で表示され、ホバー状態になると写真が拡大されて全サイズでの表示になり、その中に追加の情報が一緒に出てくるようにしました。
この写真の使い方が、特徴的なデザイン要素・インタラクションとなり、ユーザーのエンゲージメントを飛躍的に増加させました。また、最初の段階での顧客へのインタビューで得られた意見から、ユーザーにパーソナライズされたダイナミックなコンテンツの開発を行いました。
最後に、HubSpotへのアクセスの16％がモバイルからであり、アメリカ全人口の19％以上が何らかのアクセシビリティ需要を持つことから、互換性とアクセシビリティへの配慮がデザインにおける重要な要素であるとし、コードを含めた工程の全行程においてこれらが考慮されました。
赤と緑が見えない方向けのシミュレーション
プロジェクトのその他全ての項目に関しても、モバイル版とPC版双方において同時進行で、見直しが行われました。
ステップ３：コーディングと動作テスト
次の段階では、HubSpotのCMSを用いてのコード設計が行われました。
Knight氏とビジュアルデザイナー、エンジニアとが協力して、あらゆる機器に対して互換性をもつように作業を行い、プロトタイプで定期的に品質保証のテストを行いました。
チームは様々なデバイスや、ChromeやSafari、Firefox、IE、Edge、Opera、Yandexなど複数のバージョンにおける解像度について、サイトの動作テストを行いました。サイトを実際のデバイス上でエミュレートするためにはBrowserStackが使用されました。
それぞれのプラットフォームを使用するユーザーの割合を事前に把握していたので、割合の大きいもの且つ緊急性の高いものから順に優先度をつけて進めることができました。
ステップ４：継続的な動作テストとイテレーション
新しいサイトは予定通り「INBOUND」にて発表され、HubSpotの共同設立者により新製品とその特徴がお披露目されました。このスタートは大きな成功を収めました。
しかしリーン思考の実践者として、この開発チームに成功の余韻に浸る暇などありませんでした。
チームはGoogle AnalyticsとHubSpotのオンタイムでのデータを照らし合わせて集計し、以下のような指標をより深く分析しました。
・コンバーション率
・提出率
・離脱率
・目標達成率
・サイト内でのナビゲーションの要約（最初のページから最終到達ページまで）
・特定の検索クエリ
直帰率やページ滞在時間などに関しては、上記のより重要なKPIをよりよく把握するための参考程度にしか見ていませんでした。
デザインの最適化を継続するために、チームは25,000人のユーザーを対象に更なるヒートマップを用いたテストとユーザビリティテストを行いました。
結論：データに基づくUXデザインの成功
今回のプロジェクトはKnight氏とチームメンバーにとって、リーン思考による手法をフルで用いた最初の事例であり、データとデザインを統合して素早くビジネスとしての結果を出すことに成功した事例でもありました。
最終的に完成したサイトは、更なるユーザーのニーズやビジネスゴールが発生しても、その開発プロセス同様、迅速にかつ柔軟に対応できるような作りとなっています。
NDA（秘密保持契約）により、具体的な数字をここで明らかにすることはできませんが、今回は以下のような成果を残すことができました。
・最も重要なCTA（行動喚起）におけるエンゲージメントの増加
・ナビゲーション要素におけるエンゲージメントの増加
・トライアル登録の増加
・製品チームからのストレス・不満の減少
HubSpotはリーン思考によるアプローチに対して、今や絶対的な信頼を寄せています。Knight氏は最後にこう述べています。
「私たちのチームは効率的にコラボレーションができたと思います。そしてプロジェクト全体のプロセスに常にユーザーを巻き込むことができ、結果としてインパクトのある、自慢できるプロダクトができました。」
このようなケーススタディをもっと読みたい方は、無料のProject Guide to Enterprise Product Design（英語）をダウンロードしてみるといいでしょう。
