PLAIDEngineer Blog
エンジニア積極採用中

PLAID流プロダクト改善術をお見せします！

kantetsu

Posted on

PLAIDでエンジニアをしている@kantetsuです。

現在はKARTEのユーザーを知る画面のリニューアルや改善を主に行なっています👨‍💻

PLAIDでは、ここ数年デザイナーとエンジニアが一緒のチームとなり、デザイナーも機能公開に携わるようになって、機能を公開するプロセスが仕組み化されてきました🤖

例えば、シナリオテストやユーザビリティテストもここ最近では定着してきました（以前に書いたKARTEのアンケートフォーム（β版）公開までの道のりでも一部触れています）。

このような王道のテストをやりつつも、実は機能を公開するまでの手順でKARTEや社内ツールを用いたユニークな改善方法があるので、今回この場を借りて共有したいと思い、執筆しました✍️

KARTEとは

どのような改善方法があるのかを紹介する前に「KARTEって何なのか？」を説明させてください。ここをすっ飛ばしちゃうと、あとでよく分からないことになりそうなので🙏

https://karte.io をチェック！

KARTEでは、サイトに計測タグを貼ることによって、ユーザーの行動解析をします。そのサイトでのエンドユーザーの一つ一つの行動（これをKARTEの中ではイベントと言う）をクライアントさんはKARTEの管理画面内で見ることができます。その中でエンドユーザーの行動を見れるのはもちろん、エンドユーザーに配信するアクションの編集やライブ・レポートの閲覧などができます。

KARTEでイベントを発火させてユーザーを観察する

KARTEでクライアントさんがどの画面でどのような行動をしているか見るために、実はKARTEの管理画面ではKARTEのタグを入れています。

で、これをどう開発で利用しているかというと、画面のリニューアルや改善をした際に「この週にどのくらいの人が保存ボタンを押したのか」「この日にどのくらいモーダルが開かれたのか」をKARTEのイベントを発火させることで観測しています📊

私たちのチームでは開発後にデザイナーがどの機能が使われているかを下記のようにリストアップして、それらを計測できるようにソースコードに計測のコードを入れていきます👨‍💻

取りたい指標をリストアップしています

そして、実際にイベントが発火すると、KARTEのイベント画面やストーリー画面に表示され、「誰がどのタイミングで、どのくらいの人が〇〇ボタンを押したのか」などがKARTEで見ることができました👏

計測されるとイベント画面に発生数と発生したユーザーと時刻が表示されます
もっと解像度高く見たい場合はストーリー画面で見ることもあります

一部のメンバーはModeを使って、SQLを書くことでこれらのイベントをより細かく集計もして、定期的にslackに通知してチームにシェアしています。

実際に発生したイベントをModeで集計したレポート

KARTE Liveで管理画面をどのように利用しているか見てみる

KARTEの管理画面ではKARTE Liveによって可視化しているので、クライアントさんがどのように管理画面を使っているのかを視覚的に見ています。

例えば、新画面をリリースした場合にその新画面にクライアントさんがアクセスしたら、社内のSlackに「〇〇さんがこの画面にアクセスしました」っていう通知を飛ばして、その人のストーリーに飛んで、KARTE Liveを開いて見てみます👀

これによって、自分たちの新画面で想定された使い方をされているのか、画面上で戸惑っている部分はあるのかを実際の画面を通して見ることができます。

KARTEを使った通知の仕組み
該当ユーザーが通知され、チーム内で会話しています
KARTE Liveでユーザーの動きをもっと強烈に見て、改善に繋げています

自分たちのチームはユーザーを知る画面をKARTEを使ってまさに「ユーザーを知る」ことで改善しています！

手前味噌ですが、KARTEは画面の改善にも強力なサービスでもあると思っています🚀

KARTEの管理画面にコメントして、Issueに起票する

今までのはKARTEを利用したKARTEの管理画面の改善方法を紹介しましたが、社内ツールもKARTEを進化させています💪

下記の二つのアプリを使っています。（これら二つはPLAIDの社内アプリなので外部公開していないので悪しからず…🙇‍♂️）

自分たちのチームではチーム内で自分たちの開発した画面を触って、バグのある箇所やユーザビリティが低い箇所にP Appでコメントしていくぽちぽち会を実施しました👨‍💻

P Appを使うことでブラウザ上でどこに誰がコメントしているのかを簡単に見ることができ、また簡単に投稿もできます。そして、Slack上でもその要素の画像も添えて投稿されるので、Slackにフィードバックを集約もすることができます。

P AppにコメントされるとSlackにも同期される
サイト上の要素にコメントできるP App

そして、PLAIDでは基本的にはGitHubのIssueに起票してから開発するので、先ほどP Appで投稿されたSlackの投稿をS Appを使ってIssueにします。

さっきP Appで投稿された投稿をSlack上でIssue化するS App
Issueのタイトルを記入して、Issueを作るボタンを押すと該当のレポジトリにIssueが起票される

これによって、画面でおかしいと思った箇所を逐一スクショしてSlackやGitHubに共有する手間がなく、シームレスにIssueにあげることにできました👏

最後に

今回はKARTEの開発ではPLAIDだからこそ、KARTEだからこそできる管理画面の観察方法や改善方法を紹介しました😊

もし他のチームで使われている改善方法があったり、新しい改善術があれば、別の機会で紹介したいと思います！

CX（顧客体験）プラットフォーム「KARTE」を運営するプレイドでは、KARTEを使ってこんなアプリケーションが作りたい！ KARTE自体の開発に興味がある！というエンジニア（インターンも！）を募集しています。0詳しくは弊社採用ページまたはWantedlyをご覧ください。