直感的に気づきをより得られるプロダクトへ、KARTEの「知る機能」リニューアルの舞台裏

プレイドでは、KARTEの管理画面を2020年から2021年にかけて大きくリニューアルしました。対象になったのは、ユーザーを知る機能である「ユーザーリスト」、「ユーザーストーリー」です。ユーザー行動を直感的に理解しやすく、そこからの気付きも得やすい画面になりました。

KARTEのトップ画面でもあり、重要な価値のひとつとしているなぜ「知る機能」のリニューアルに注力したのか。デザインや機能を一新するにあたり、どんなことを大切にしたのか。

リニューアルに携わったメンバーであるデザイナーの鈴木、エンジニアの韓、プロダクトマネージャーの谷に、リニューアルの背景や、どのようにデザイン・機能を変更したのか、そしてなぜKARTEでは「知る機能」を重視しているのかを聞きました。

一人ひとりを様々な角度から理解するための3つの「知る機能」

まず、今回リニューアルしたKARTEの「知る機能」について教えていただけますか。

谷：「知る機能」には代表的なものとして「ユーザーリスト」、「ユーザーストーリー」、「KARTE Live」があります。その一部を私たちがリニューアルをしました。

私たちは、相手に合わせたコミュニケーションをとるためには 「相手を知る」ことが何より大切だと考えています。相手を知るには、オフラインのようにユーザーを一人の人間として捉え、様々な角度から理解していく必要がある。 そのために、知る機能があります。

谷早苗 / プロダクトマネージャー プレイドではカスタマーサポート、カスタマーサクセスを経て、2021年4月からユーザーを知る機能に関わっている

鈴木：「ユーザーリスト」、「ユーザーストーリー」、「KARTE Live」それぞれどんな機能かというと、まず「ユーザーリスト」は、属性や行動など特定の条件を指定し、該当するエンドユーザーをリアルタイムでリスト化できる機能です。

「ユーザーストーリー」では、個別のユーザーの行動を詳しく見ることができます。 エンドユーザーがどこから来訪し、どのようなページを閲覧しているか、どのような行動をしているかなどを確認できます。リピーターの場合、過去の訪問時にどのような行動をとったかなどの履歴もわかります。

「KARTE Live」では、エンドユーザーのサイト上の動きを動画で確認できる機能です。 例えば、マウスの動き、スクロール状況など、まるでユーザーが目の前でサイトを利用しているかのように見ることが可能です。

韓：エンドユーザーを、ユーザーリスト、ユーザーストーリー、KARTE Liveの順で見ていくことで、俯瞰から詳細へ、より深くユーザー行動を知っていけるようになっています。

まずユーザーリストで知りたいエンドユーザーの行動で検索して、エンドユーザーを絞り込み、次にユーザーストーリーで特定のユーザー行動をいくつか確認、さらに深く知りたい場合はユーザーストーリーの詳細を読み込む、またはKARTE Liveを見るという流れです。

韓徹 / エンジニア プレイドでは主にKARTEの管理画面のリニューアルや新規開発を担当。ここ1年以上「ユーザーを見る」機能のリニューアルに携わっている

行動データの羅列から、気付きを得やすい情報の粒度へ、見せ方をリニューアル

知る機能は2020年に大幅にリニューアルされました。リニューアルの背景にはどのような課題があったのでしょうか。

鈴木：以前は、一度に表示される情報量が多く、どこから何を読み取ればいいのかわかりにくいという課題がありました。エンドユーザーの気になる行動を検索しやすくし、気付きを得るためのポイントが分かるようにしたかったんです。

リニューアル前に洗い出した課題

具体的に、ユーザーリストとユーザーストーリーのデザインや機能をどのように刷新したのでしょうか。

韓：まず、ユーザーリストは行動を条件に設定したらすぐに条件に合うユーザーを探せるようにしました。KARTEでは、セグメントを設定すると条件に合うエンドユーザーのデータがKARTE内に蓄積されていきます。以前はデータが蓄積されてからでないと見たいユーザーを絞り込むことができませんでした。

ですが、ユーザーリストでは、リアルタイムで様々な条件を設定し、当てはまるエンドユーザーを絞り込み、サイトでの動きを観察できるようになりました。あらかじめセグメントを作成していなくても「知りたい」と思い立った瞬間に条件を設定すれば、ユーザーを一覧で見られるんです。

また、ユーザーリスト画面で特定のエンドユーザーを選択すると、そのユーザー行動の概要を見られる「ユーザーストーリーモーダル」も新たに追加しました。

これまでは今来訪しているエンドユーザーが並んでいる「リアルタイムユーザー画面」から一人のユーザーストーリーを見に行こうとすると、個別のユーザーストーリーページに遷移する仕様になっていました。ただ、逐一新しいタブでユーザーストーリーが開かれたり、ページの読み込みなどに時間がかかることもあり、その行き来がストレスになっていたんです。これが遷移しなくても、モーダルで見られるようになりました。

検索の条件を指定した上で、ユーザー数名の行動を連続的に見て共通点を探したり、特に気になる動きをしているユーザーを見つけたりというのが、より簡単にできるようになりました。

リニューアル前のリアルタイムユーザー画面とリニューアル後のユーザーリスト

鈴木：ユーザーストーリーは、エンドユーザーの状態や行動の流れをより直感的に理解できるように、デザインを一新。エンドユーザーの来訪日をカレンダー表示にしたり、どのページにどれくらい滞在していたかを塗りで表現したチャートを使って可視化したりなど、表示するデータと見せ方をブラッシュアップしました。

ユーザー行動が時系列で羅列されていた以前の画面と比較すると、一人ひとりの行動の特徴を捉えやすく、より良いコミュニケーションの実現に向けたアイデアも得やすくなったのではないかと思います。

リニューアルの過程で難しかった部分や苦労した点はありましたか？

韓：ユーザーリストの機能を強化する際に、機能や実用面と、KARTEのコンセプト表現のバランスをとるのに苦労しました。

機能の強化を始めた頃の設計では、リアルタイムで条件を設定してユーザーを絞り込めるという実用的な価値を優先しており、条件設定から解析、画面への表示の速さや検索しやすさを重視した機能および画面構成にしていたんです。

しかし、KARTEはサービスとして産声を上げた当初から「今サイトやアプリに来ているユーザーが見える」ことを大切にしてきました。 ユーザーリスト機能のリニューアル案を社内で共有したときに、今お伝えしたような観点で「KARTEが重視しているコンセプトを表現できていないのではないか」というフィードバックが出てきて。

鈴木：そこで改めて議論を重ねて、やっぱりKARTEのコアコンセプトを表現するのは大事だよね、ということになりました。結果として、リアルタイムで人が来ていることが感じ取れるような表現を追加しました。

例えば、画面左上に「N人が来訪中」という表記とチャートを入れたり、新しく条件に当てはまるエンドユーザーがサイトに流入した瞬間に「新しいユーザーをみる（N人）」と通知のようにバナーを表示させてオフラインの店舗のように「たった今来てくれたお客様」を見えるかしたりなどです。また、細かい文言の観点だと、人をより感じられるように「xxを閲覧しています」など、現在進行形でどこを見ているかをわかるようにしました。

リニュール後のユーザーストーリー

知る機能を活用し、仮説立てと分析の精度をあげる

ユーザー行動を直感的に理解できるようになり、改善に向けた気付きも得やすくなったんですね。知る機能をどのように活かせばいいのか、具体的な活用イメージを教えてください。

鈴木：例えば、商品を購入した人の動きからインサイトを得たい場合、まずユーザーリストで購入した方を検索します。気になるユーザーがいたらユーザーストーリーで行動の概要を確認。そこで深く知りたい行動があれば、さらにユーザーストーリーを詳細に読み込むことができます。

加えてKARTE Liveでは、エンドユーザーがページをスクロールしながらどこの情報を重点的に確認し、どこで迷い、最終的に購入ボタンを押したのかなど、動画を見ながらユーザーの心の動きをありありと感じ取れます。

▲実際の活用イメージ

韓：あとは、今回のリニューアルによって、定量情報と定性情報を行き来しながらの分析がスムーズにできるようになりました。

まず定量的な情報として、ユーザーリストで特定の条件に当てはまるユーザーがどれくらいいるのか全体感を把握。ユーザーストーリーで数名の動きを見て共通項を探ります。次に定性的な情報として、ユーザーストーリーの詳細やKARTE Liveを確認。定量情報の分析で発見した共通項を軸に一人のユーザー行動を見て、ユーザー心理への理解を深めます。

そして、定性分析で得た気付きから仮説を立て、共通項を持つユーザーにも仮説が当てはまりそうか、また数名分の行動を見てみる。ここで仮説同様の行動が見られたり、その発生ボリュームを確認できれば、定性分析から見えた仮説を定量的にも担保できるようになります。

このように定量情報と定性情報を行き来することで、仮説と実態のズレを減らし、精度の高い仮説をもとに、ユーザーとのコミュニケーションを改善できます。

谷：また、私たちもリニューアル後の画面を使うなかで気付いたのですが、メンバーやKARTE Friendsの皆さんと話すとき、ユーザー像や課題の共通認識を作りやすくなりました。

見やすくなったユーザーストーリー画面やKARTE Liveで同じユーザーの行動を見ながらディスカッションすると視点が揃っていきます。直感的に課題を共有でき、一緒に解決策を考えていきやすいんです。普段データ分析などをしない方でもハードルを感じずにエンドユーザーを理解でき、より顧客視点の議論がしやすい環境を作れているなと。

KARTE Friendsの皆さんには、このリニューアルを機に、より幅広いメンバーを巻き込んでみてもらえたらうれしいなと思います。

オフラインで自然にしている「相手を知る」行動を、オンラインでも実現したい

ここまで、知る機能の活用によって実現できることをお伺いしたのですが、そもそもなぜKARTEではユーザーを知る機能にこだわられているのでしょうか。

谷：一人ひとりに合わせたコミュニケーションをする前提には、「相手を知る」ことが必要だと思っています。「相手を知る」ことって、オフラインの場面だと自然に行われていることですよね、例えば、初めて会った方と会話するとき、どんな表情や服装をしているのか見たり、質問してどんな人なのか理解しようとしたりしますよね。私たちは、相手を知ることの重要性をすでに育ってきたなかで直感的に分かっているんです。

ただ、オンラインになると、そんな当たり前のことが抜け落ちてしまう。そもそもオンライン上に人がいるんだということ自体を感じ辛い、見えない構造になっているために、Webサイト上のテキストや、ポップアップなどの施策をコミュニケーションとして捉えにくい。 仮にエンドユーザーとのコミュニケーションとして認識できても、どのように相手を知ればいいのか分からないからなんじゃないかと思います。 オンラインで「相手を知る」ためのソリューションって少ないですから。

鈴木：オンラインで相手を知ろうとすると、統計情報のような定量データの分析に頼ることがほとんど。これが、エンドユーザーを知ることに対して大きなハードルになっています。

鈴木健一 / UIデザイナー プレイドではデザインシステムを用いた既存画面の利用体験向上と、直近は見る機能のリニューアルに関わっている

オフラインで会った方を数字で測ったり、分類したりはしないのに、デジタルやWebの仕事となるとデータだけを使い、分析して、数字で理解しようとしてしまう。相手を知るために日常的にやっていることと、かけ離れてしまっています。

それなら、もっとオフラインと同じ感覚で、オンラインでも相手を知ることができないか。KARTEはそこにチャレンジしています。 サービスを提供する人たちが一人ひとりのエンドユーザーに向き合い、データといった定量面だけでなく定性面からも理解できるようにしたい。オフラインの当たり前をオンラインでも実現したいですね。

KARTEを楽しみながら活用してもらい、「知ること」の重要性を広げていきたい

オンラインでも定性面を含めてエンドユーザーを理解できたら、ニーズに寄り添ったコミュニケーションもとりやすくなりそうです。最後に、知る機能を強化することで実現したいことを聞かせてください。

谷：KARTEを活用いただく皆さんに「相手を知るって楽しいんだな」と思ってもらえるようにしたいですね。 よく知っている人へのプレゼントを選ぶのが楽しいように、エンドユーザーを理解することで、「どのようなコミュニケーションをとったら喜んでもらえるか」を楽しく考えられる方が増えるといいなと思います。

韓：楽しみながらより良い顧客体験を考えていただくために、KARTEの使い勝手をさらに良くしていきたいです。KARTEを活用いただくと、直感的にすぐにエンドユーザーを深く知れて、細やかで配慮のあるアクションにきちんと繋げられるようにしていきたい。

そのために、各画面の操作性や視認性を高めたり、気になるユーザー行動を深堀りしていく際の導線をよりスムーズにしたりなど、まだまだ開発面でできることはたくさんあると思っています。

鈴木：デジタルやオンラインで「相手を知る」ことの重要性を理解し、実践できている企業はまだ多くないと思います。だからこそ、プレイドのメンバーはもちろん、KARTE Friendsと一緒に「知る」ことの重要性を広めていきたい。「相手を知り、合わせる」活動をKARTEがサポートすることで、あらゆる生活シーンで「より良い顧客体験」が今よりもっと生まれていったらいいなと思っています。