Personalized Insights

Personalized Insightsは、従来利用していた外部APIから内製化され、コスト削減とユーザー体験の改善を同時に進める機会となった。

既存ページのリデザインに加え、インサイトをより明確で実践的な内容にするため、コンテンツ自体の改善にも取り組んだ。

この機能は、LinkedInのプロフィールや投稿を分析し、営業リードを「Director」「Relator」「Thinker」「Socializer」の4つのコミュニケーションスタイルに分類する。それぞれのスタイルに合わせたアプローチ方法やメッセージテンプレートを提供し、ユーザーによるアウトリーチのパーソナライズと、返信率や商談獲得率の向上を支援する。

COMPANY

CoPilot AIは、LinkedInを活用したアウトバウンド営業を支援するAIツール。見込み顧客の分析や、一人ひとりに合わせたメッセージ作成をサポートし、返信率や商談獲得率の向上につなげる。

MY ROLE

UI/UX Designer

TEAM

  • UI Designer (me)

  • PM

  • 2 Developers

  • Machine Learning Engineer

SCOPE

  • Feature restructuring & information architecture

  • UI design for product feature

  • Design system contribution

  • Cross-functional collaboration with product & engineering

TIMELINE

2 months: Jan 2024 – Entire project
1 month: Feb 2024 – Design part

(Chrome Extension)
2 months:  Mar 2024 – Entire project
1 month:  Apr 2024 – Design part

TOOLS

  • Figma

CHALLENGE

実際の営業フローで活用できるインサイトへ

Personalized Insights機能はリードに関する有用な情報を提供していた一方で、アウトバウンド営業担当者の実際の業務フローに沿った構成になっていなかった。そのため、ユーザーはインサイトを具体的なアクションへ落とし込むことが難しく、営業プロセス全体で効果的に活用できていなかった。

SOLUTION

インサイトを構造化し、行動につながる体験へ再設計

営業フェーズに沿ってインサイトを確認できるよう機能を再構成し、ユーザーが現在の営業ステップに応じて必要な情報へアクセスできるようにした。情報の優先順位を明確にするとともに、シナリオ別のメッセージテンプレートを導入。次に取るべき行動を素早く理解できるようにし、インサイトを実践的なアクションへつなげた。

a woman using a laptop

DESIGN PROCESS

1

探索

ユーザーフィードバックをもとにしたリデザイン方針

CSチームを通してプロダクトマネージャーが収集したユーザーフィードバックをもとに、ページ構成とコンテンツの両面を改善する方針でリデザインを実施。

最初にプロダクトマネージャーが作成したローファイワイヤーフレームを出発点として、初期のリデザイン案を検討した。

1st 改善案

❶ ヘッダーサマリー:
「氏名、会社名、役職、LinkedInリンク」「コミュニケーションスタイルの特徴」「スタイルの簡単な説明」など、リードに関する主要情報をヘッダー内に整理。情報量が多くなりすぎないよう、見やすく簡潔なレイアウトにまとめた。

❷ 営業フェーズ
インコンテンツを、LinkedInでのメッセージ送信前「効果的にメッセージを送る」、ミーティング前「戦略的にミーティングを進める」、ミーティング後「成果につながるフォローアップ」の3つの営業フェーズに分類。
左側のメニューボタンから各セクションへ直接移動できるようにし、長いページをスクロールする負担を軽減した。

❸ コミュニケーションスタイル別のメッセージテンプレート
各コミュニケーションスタイルに適したトーンで、メッセージテンプレートを生成。
コピーボタンを設置し、テンプレートを素早くコピーして使用できるようにした。テンプレート内には[相手の会社名]や[業界]など、リード情報を入力するためのプレースホルダーを含め、それぞれの説明を下部のドロップダウンから確認できる設計とした。

❹ コミュニケーションスタイルの詳細
各コミュニケーションスタイルの特徴をより詳しく説明し、スタイル間の違いをチャートで可視化。一目で特徴を比較し、理解できるようにした。

BEFORE: Previous Design

AFTER: First redesign iteration

❺ 4つのコミュニケーションスタイルそれぞれの特徴に合うカラーを選定。エラーや警告を示すUIで一般的に使用される赤と黄色は避け、各スタイルを直感的に区別できる配色とした。

2

テスト

ユーザビリティテスト

プロダクトマネージャーとカスタマーサクセスチームのメンバー5名がプロトタイプを検証し、デザインチームからもビジュアルとUIに関する追加フィードバックを収集。

  • ユーザーは全体の構成を理解し、主要なタスクを完了できた一方で、一部のセクションタイトルはより明確にする必要があった。

  • 左側のメニューにより、営業フェーズ間をスムーズに移動できた。一方で、メッセージテンプレートは目的のものをより素早く見つけられるよう、カテゴリ分けを明確にする必要があった。

  • シンプルなレイアウトは好評だった一方で、ダークカラーのヘッダーによって、ページ全体が重く、情報が詰まっているように感じられた。

3

改善

2nd 改善案

CSチームとデザインチームからのフィードバックをもとに、以下の改善を実施。

❶ ヘッダーの再設計
圧迫感を軽減し、コントラストを改善するため、ヘッダーの背景を右側のセクションと調和する明るいトーンへ変更。より開放感のある印象に仕上げた。また、コミュニケーションスタイルのチャートを想起させる円形のアクセントをヘッダー左側に追加し、視覚的な特徴を持たせた。

❷ セクションタイトルとサブタイトルのスタイリング
セクションタイトルとサブタイトルにカラーを加え、ボックス型のレイアウトを適用。情報の区切りを明確にし、視覚的な階層を強化した。

❸ メッセージテンプレートのカテゴリ拡張
これまで1種類のみだったメッセージテンプレートを、「コネクション後のエンゲージメント」「見込み顧客の育成」「ミーティングの依頼」「反論への対応」の4カテゴリに拡張。利用シーンに合わせて、より適切なメッセージを選択できるようにした。

BEFORE (Previous Design)

AFTER (The First fraft of redesign)

プロトタイプ

インタラクションの仕様を開発者やプロダクトマネージャーと共有するため、Figmaでインタラクティブプロトタイプを作成。

4

展開

Chrome拡張機能

LinkedIn上での営業活動を直接サポートするため、Personalized Insightsの体験をChrome拡張機能へ展開。画面を切り替えることなくインサイトやメッセージテンプレートへアクセスできるようにし、リードとのコミュニケーション中でも、提案内容をリアルタイムで活用しやすくした。

OUTCOME

インサイトの使いやすさを高め、利用率を向上

インサイトを理解しやすく、実際の営業活動へ適用しやすくしたことで、機能の利用と定着が大きく向上。

  • 月間平均利用回数が103%増加

  • 機能を利用するアクティブユーザー数が174%増加

インサイトを読むだけの受動的な利用から、営業活動で積極的に活用する状態への変化が見られた。

※2023年10月から12月までの月間平均と、2024年2月から4月までの月間平均を比較。

Other Projects:

Available for full-time opportunities or freelance projects.

Please email me or message me on LinkedIn to get in touch.

annaoshiro32@gmail.com

Email Copied!

Copy

Copy component

Copied