Figma:プロトタイプでより有意義なフィードバックを取得

概要

プロダクトマネージャーは、顧客の真の課題を解決できるように、開発プロセスおよびブレーンストーミングプロセスの早い段階で、常により多くの情報を必要としています。PendoとFigmaを使えば、ワイヤーフレームやプロトタイプを顧客のいる場所、つまりアプリの中に持ってくることができます。データによると、タイミングよく顧客に表示すれば、より高い回答率が得られることが分かっています。例えば、Pendoを使って再設計したいプロダクトエリアを測定した後、今度はアプリ内のFigmaプロトタイプを使って、そのエリアに頻繁にアクセスするユーザーをターゲットにできます。その顧客セグメントは、プロダクトの対象部分のエキスパートであるため、最良のフィードバックを提供してくれます。

材料(必要なもの)

  • ガイダンス付きのPendoアカウント
  • Figma 

 

利点

  • プロトタイプに対する回答率を向上できる
  • 使用状況と行動データを使用して、より有意義なフィードバックが得られるようにターゲットを選定できる

 

方法

Figmaでの操作:

  1. Pendoガイドに埋め込むファイルを開きます。
  2. Figmaファイル内の特定のフレームにリンクするために、埋め込むフレームを選択します。
  3. ツールバーの[共有(Share)]ボタンをクリックします。
  4. [選択したフレームへのリンク(Link to selected frame)]チェックボックスをオンにします(任意)。
  5. リンク共有の権限を更新して、埋め込みを操作できるユーザーを設定します(任意)。
  6. [埋め込みコードを取得(Get Embed Code)]をクリックします。mceclip0.png
  7. ボタンをクリックして、提供されたパブリックな埋め込みコードをコピーします。mceclip2.png

Pendoでの操作:

  1. Pendoにログインし、[ガイド(Guides)]セクションに移動します。
  2. [ガイドの作成(Create Guide)]ボタンをクリックします。mceclip4.png
  3. [ガイドをどう改善できるか?(How Can We Improve?)]という自由記入式の投票調査テンプレートを選択します。
    mceclip5.png
  4. ガイドに名前を付けて、[自分のアプリで管理する(Manage in My App)]を選択します。mceclip7.png
  5. アプリのURLを入力し、[デザイナーを起動(Launch Designer)]をクリックします。mceclip8.png
  6. ガイドテンプレートのテキストボックス上部にある青いプラス記号をクリックして、新しいガイドセクションを追加します。mceclip9.png
  7. ビルディングブロックパレットの[高度(Advanced)]セクションで、[コードブロック(Code Block)]を選択します。mceclip10.png
  8. HTMLセクション内のFigma埋め込みコードにペーストします(必要に応じて、ガイドに合わせてコードの幅と高さを調整します)。[完了(Done)]をクリックします。mceclip11.png
  9. 必要に応じて、ガイドの残りの部分を変更します(変更はリアルタイムで反映されます)。アクティベーション機能を使用して、ガイドを表示する所をターゲットに設定します。問題がなければ、[保存(Save)]をクリックし、[終了(Exit)]をクリックしてPendoに戻ります。mceclip12.png
  10. [セグメント(Segment)]セクションで[編集(Edit)]をクリックしてPendoセグメントを選択するか、新規にセグメントを作成してガイドを表示します。
    mceclip15.png
  11. 最後は、ガイドを[ドラフト(Draft)]から[公開(Public)]に変更して公開します。mceclip3.png
  12. これで、フィードバック用のアプリ内で、訪問者のターゲットセグメントにFigmaプロトタイプが直接表示されます。おめでとうございます!