家計簿サービス Zaim のデザイナーの今泉です。

今回は普段の施策とは別に、エンジニアとの雑談の中から生まれたアイデアで、少し空いた時間を使って、かゆい所に手が届くような改善ができた話をします。

メインの施策の進め方は以下の記事を読んでください。

改善したのはレシート撮影の機能です。

カメラで文字を読み取るレシート撮影機能

Zaim はレシートをスマホのカメラで撮影すると、家計簿に必要な品名、日付、金額、店名などを自動で読み取る機能があります。

レシートを撮影するだけで自動で家計簿を記録できる便利な機能ですが、使いこなすにはちょっとしたコツがある機能です。
例えば、「まっすぐ・水平に撮る」「明るい場所で無地の背景の上で撮る」など、撮影に成功しやすい条件がいくつかあります。
この操作に慣れるまで、「なんかうまく読み取れない！」という体験になってしまうことも。
実際、私自身もレシートを撮影して家計簿をつけている中で、外で買い物している時や、何枚もまとめて撮影しているとうまくいかないことがありました。

お題は【レシート撮影をもっと楽しくしたい！】

レシートの読み取り精度が変わらなくても、撮影がうまくいきやすくなる UI 改善はできないだろうか？と考えました。

サービスの「かゆい所」のお題ができました。

雑談からアイデアが生まれる様子

そんなお題をエンジニアに相談してみることにしました。
すると雑談から「こんなのどう？」「こんな方法もあるかも」と、お互いにアイデアが出てきました。
実際にあった会話の一部です。

デザイナーとエンジニアの壁打ちみたいな感じですね。
Zaim には「よもやま」という 1 on 1 の制度があるので、その時間を利用して雑談ベースでアイデアを出し合っていました。

今回実装されたアイデアが登場

逆にエンジニアからもアイデアをもらいました。
結果的に今回実装したのはこの「撮影のプレビュー機能」が原案です。

今度は逆にエンジニアのアイデアにデザイナーが壁役になります。
お互い Figma でプロトタイプを作れちゃうので、アイデアを絵にして見せあいながら調整していきました。

さらに、エンジニアは実際に動くアプリを作れちゃうので話が早いですね！！

実際にテストアプリを入れて、自分でも週末に操作感をユーザーの気持ちになって体験してみました。
結果めっちゃ良かったのでこれでいこう！となりました。

最終的にリリースした変更

最終的にリリースした改善案が以下となります。

レシート撮影を始めると「読み取り中」になり、うまく読み取れると合計金額と日時が表示されます。
失敗している時は数字が間違っていたりブランクになるので、撮影ボタンを押す前にカメラの位置をずらしたりして、うまく読み取れるまで調整できます。

これまでは撮影するまで読み取り結果が分からなかったのですが、撮影ボタンを押す前に撮影がうまくいっているかが見えるようになりました。
実際に動いている様子はぜひ iOS 版の Zaim アプリをダウンロードして見てみてください！（Android 版は未対応です）

リリース後の結果

リリース前後で撮影の成功率を比較してみると、約 3 ％の改善ができました！

ユーザーからのフィードバックにも「劇的に取り込み作業が楽になって感動」「何度か撮影するケースが地味に面倒だったからめっちゃ便利になった！」「シャッターを押す前に数字が出るようになって、撮り直しがすごく減りました」というようなお声をいただきました。
地味な改善ですがちょっとした面倒さを取り除くことができて成功です！

雑談の中から生まれるアイデアは「こんなのあったら良いよね」と夢物語で終わってしまうケースもあると思います。今回は具体的なプロトタイプを作って話を進められたので、「これめっちゃ良い！進めましょう」と実現まで持っていけられたんじゃないかと思います。
雑談から発散していくと、「実装が難しそう」など制約を気にせずに提案できるので楽しかったです。

Zaim ではユニット別の大きな施策から、今回のようにメンバー発信で小さな改善を行うケースもあります。
自分のアイデアでユーザーの課題を解決したい人は、ぜひ一緒に働きませんか？

Zaim のデザイナーとエンジニアの働き方は以前にも記事にしたので良かったらご覧ください！