🌔

Clarityを導入してプロダクト改善した話

2024/03/07に公開

はじめに

スペースマーケットでAndroid/Flutterエンジニアをしていますseoです。

最近、弊社Appチームではデータドリブンな開発を目指して、日々、試行錯誤を行なっています。
その一環でAndroidアプリに導入したClarityというツールについて、本記事で紹介できたらと思います。

https://clarity.microsoft.com/mobile-apps

Clarityとは


*Clarity Apps Demoより抜粋

Microsoft社が提供しているツールです。
主な機能として、ユーザーがどれくらいの頻度で、画面のどの部分をタップしたかがわかるヒートマップ機能があります。

他にもスクリーンレコード機能など、ユーザーがどのような使い方をしているかが具体的にわかるツールとなっております。

Clarityからわかった課題

弊社のスペースマーケットアプリにもClarityを導入し、数週間データを蓄積したところ、このようなヒートマップが浮かび上がってきました。

上記のスクリーンショットは、貸し出しされているスペースの詳細画面となっておりますが、最もよくタップされている箇所が、以下の通りになります。

  1. 空き状況確認ボタン(右下)
    2,3. 戻るボタン(左上)
  2. お気に入りボタン(右上)
  3. 共有ボタン(右上)
  4. 見取り図を見るボタン(サムネイル右下)
    7,8. レビュー評価の星(画面中央右)

1~6は意図して設置した機能で、タップされることでアクションが発生するボタンですが、レビュー評価の星は、タップされることを想定しておらず、あくまでこのスペースの評価を星で視覚的に表示しているだけでしたが、このヒートマップから比較的タップされていることがわかりました。

改善案を考える

レビューの星がデッドタップとなっていることがわかったので、改善案を考えます。
レビューをタップするということは、他のユーザーがスペースを使った時の声が関心度が高いことが伺えます。

そこで、レビュー件数をタップしたら、レビューエリアへスクロールする機能を開発してみようとなりました。
デザイナーにも協力頂き、このようなデザインでFixしました。

この機能追加によって、アプリ起動から予約完了までの平均時間が短縮されるのではないか、と期待しています。

アプリのダウンロードはこちらから↓

注意点

2024年3月現在、Clarity sdkはまだJetpack Composeに対応しておらず、Composeの画面はヒートマップ上、真っ白な画面になってしまいます。

ただ、公式のissueにて、composeにも対応を予定しているとのアナウンスがあるため、気長に待ちたいと思います。

https://github.com/microsoft/clarity-apps/issues/26

最後に

スペースマーケットでは一緒に働く仲間を募集しています!
カジュアルに話を聞きたいだけという方でも大歓迎ですので、ちょっとでも興味があれば以下からご応募お待ちしております!

▼インフラエンジニア
https://herp.careers/v1/spmhr/qZ-3RxrPtDgM

▼Webエンジニア
https://herp.careers/v1/spmhr/9zYSnsOQ0UMA

▼フロントエンドエンジニア
https://herp.careers/v1/spmhr/oZ-mn0UYmzXj

▼アプリシニアエンジニア(EM候補)
https://herp.careers/v1/spmhr/3R1WuEBp6TlT

▼バックエンドエンジニア(EM候補)
https://herp.careers/v1/spmhr/f8x6AkIueBSb

▼エンジニア採用ページ(迷ったらこちらからどうぞ!)

スペースマーケット Engineer Blog

Discussion