KATCHアプリ

地域の情報を放送、ライブ、記事で発信するケーブルテレビ、通信事業会社KATCH、KATCHアプリのリニューアルプロジェクト

デザイン・チェック期間、リリース日

2024.6.3~2025.3.17

2025.3.17 リリース

メンバー

App制作チーム13人

企画2、デザイン2(デザインチームリーダー、本人)、開発9

担当業務

リサーチ、WF設計、UI制作、アニメーション&イラスト制作、デザイン仕様書作成、デザインチェック

KATCHアプリ メインビジュアル

既存会員の維持とアプリの利用率向上のためのリニューアル

KATCHアプリは、ケーブルテレビ、通信事業会社であるKATCHの公式アプリです。
会員の契約内容や請求書など個人情報が確認でき、放送、記事、ラジオで地域の情報を発信しています。

今回のリニューアルでは下記のターゲットと目標、課題を設定してリニューアルを進めました。

ターゲット KATCHサービスと契約している会員と家族
目標 既存会員の維持とアプリの利用率の向上
課題 既存会員により多くの価値を提供するための新機能の導入と全体的なリニューアル

既存会員により多くの価値を提供するための新機能導入 - クーポン機能

より多くの価値を提供するための戦略の一つとしてユーザーに実質的なロイヤルティを与える新機能の導入を検討しました。
KATCHは様々な地域施設と交流して地域情報を発信するサービス特性を持っています。
この特性をもとに、施設のPR記事の制作・掲載を行う対価として施設からロイヤリティを受け取る仕組みを活用し、「クーポン機能」を導入しました。

既存会員にとって価値のあるコンテンツは何だろう?→ KATCHだけの地域情報 / ロイヤルティプログラム → クーポン機能 既存会員にとって価値のあるコンテンツは何だろう?→ KATCHだけの地域情報 / ロイヤルティプログラム → クーポン機能

ユーザーリサーチを通じて、クーポン機能に関するインサイトを抽出

初めて導入する機能であるため、ユーザーと店舗双方にとって分かりやすいUI設計に注力しました。
他社クーポンの利用経験がある顧客(ユーザー)と従業員(クーポン利用先)の視点からインサイトを得るため、以下の方法でリサーチを実施し、課題を抽出しました。

  • クーポン機能を備えた他社アプリのApp Store・SNSレビューの調査
  • プロジェクトメンバーおよび飲食業従事者へのユーザーインタビュー

クーポン機能がある他社アプリのApp StoreおよびSNSレビュー調査

他社アプリのクーポン機能に対するユーザーの不便な点をまとめ、その中から重複する点を抽出しました。

1. クーポン使用時、画面を開いたときにすぐ使用ボタンが見えない
2. 使用方法が明確に記載されていない
3. 使用したいクーポンをすぐに見つけにくい
4. ユーザーが望む基準での並び替え/フィルタリングができない
他社アプリのクーポン機能に関するレビュー調査結果 他社アプリのクーポン機能に関するレビュー調査結果

ユーザーインタビュー

プロジェクトメンバーおよび飲食業従事者を対象にユーザーインタビューを実施し、UIにおけるより具体的な問題点を抽出しました。

インタビュー時期 2024年6月
インタビュー対象(氏名/年齢/国籍/職業)

ハヤシ/32/日本/企画者

フジワラ/41/日本/エンジニア

スミ/28/日本/定食チェーン店 O社の従業員

顧客の問題
1. 不適切なクーポン利用方法の配置

「『クーポンを使う』ボタンを押さないと利用方法が表示されませんでした。どのように、どのタイミングでクーポンを使えばいいのかを本文に記載してほしいです。」

ハヤシ/32/日本/企画者
2. ユーザーと従業員のコミュニケーションに混乱を招くボタン

「ボタン名が『クーポンを使う』になっていたので、押してから従業員に提示したら、押す前に従業員が確認すべき内容があり、スマホを挟んで従業員と戸惑った経験があります。」

ハヤシ/32/日本/企画者
3. 誤操作の懸念が考慮されていないUI

「誤って『クーポンを使う』ボタンを押したら、そのまま使用されてしまいました。元に戻すこともできず…普通は本当に使用するか確認しません?」

フジワラ/41/日本/エンジニア
従業員の問題
コミュニケーションの順序が考慮されていないUI

「クーポンを利用する際は、そのクーポンがうちのものかどうかをまず確認する必要がありますが、クーポン利用のポップアップ画面を先に見せてくるお客様がいるため、ポップアップを閉じてもらうようにお願いしています。ボタンは押せないようにしてほしいです。」

スミ/28/日本/定食チェーン店 O社の従業員

価値あるロイヤルティと、分かりやすくて使いやすい環境で
会員を満足させるクーポン機能

クーポンの特典がいくら魅力的であっても、利用プロセスが不便であれば利用しづらく、結局アプリの利用率向上にはつながらないと仮定しました。
そのため、分かりやすくて使いやすい機能として設計することに注力してデザインしました。

分かりやすくて使いやすいクーポン機能

ミッションをもとに、顧客と従業員の課題に対する解決策を提示しました。

1. ファーストビューにクーポン利用に必要な要素の配置と分かりやすい文言の使用

端末のファーストビューにクーポン情報、使用方法、ボタンを配置し、クーポン使用時に顧客と従業員が必要な情報を迅速に見つけられるようにした。
また、利用方法およびボタンには、取るべきアクション・対象・タイミングを明確に記載した。

ファーストビューにクーポン利用に必要な要素の配置 ファーストビューにクーポン利用に必要な要素の配置
2. クーポン利用確認ダイアログの表示

ボタンを押すと確認ダイアログを表示し、ユーザーが行おうとしている行動が正しいかどうかを改めて認知させた。
ボタンの色を赤にすることで、アクションへの注意を促した。

クーポン利用確認ダイアログの表示 クーポン利用確認ダイアログの表示
3. クーポンを保存できる「いいね」ボタンの設置と一覧画面

「いいね」ボタンを設置し、使用したいクーポンが保存でき、使用の時にいいね一覧画面ですぐ見つけられるようにした。(ポートフォリオ用にブラッシュアップした作業)

クーポンを保存できるいいねボタンの設置と一覧画面 クーポンを保存できるいいねボタンの設置と一覧画面
4. 並び順と地域フィルター機能の設置

新着順や有効期限順での並び替えができ、ユーザーの居住地域で絞り込んで、クーポンを確認できるようにした。

並び順と地域フィルター機能の設置 並び順と地域フィルター機能の設置

価値あるロイヤルティと使用環境を提供するクーポン機能

リリース後、データに基づいて使用状況を確認し、ユーザーインタビューの対象者からフィードバックをもらいました。
また、SNS上の反応を確認することで、目標とミッションに沿った機能となっているかを検証しました。

目標 既存会員の維持とアプリ利用率の向上
ミッション 価値あるロイヤルティと、分かりやすくて使いやすい環境で会員を満足させるクーポン機能

実際のユーザー行動を促す要素として機能

リリース後10ヶ月間、計205種類のクーポンを運用し、全ユーザーの約13%(4,038件)の使用が発生しました。
これにより、クーポン機能が実際のユーザー行動を促す要素として機能していることを確認しました。

使いやすい機能と満足度の高いクーポン内容

「クーポン詳細に入るとすぐに使用ボタンとクーポン情報が見え、使いやすい」
「使用方法が明記されており、ボタンの文言も具体的で混乱しない」

ハヤシ/32/日本/企画者

「ダイアログで使用するかどうかを確認するから、誤って押しても安心できる」

フジワラ/41/日本/エンジニア

「誰が押すボタンなのかが明確で、ユーザーが誤って押すことはなさそう」

スミ/28/日本/定食チェーン店 O社の従業員

クーポン情報の適切な配置と明確な使用方法により、使いやすいというフィードバックをもらいました。
また、SNS上ではクーポン機能を歓迎し、積極的に使用しようとする反応が確認できました。

リリース後SNSでのユーザー反応 リリース後SNSでのユーザー反応

クーポン機能が会員に価値あるロイヤルティと使用環境を提供し、
今後の既存会員の維持とアプリ利用率の向上に寄与する可能性を確認

今後は、クーポン機能が実際にアプリ利用率の向上にどのくらい寄与したかを継続的に確認し、改善していく予定です。