ウォレットアプリに進化した『Kyash』UI・UX刷新のポイント解説

※ Kyash株式会社のサービス＆プロダクトデザイナーである成澤さんから寄稿記事としてお送りします。

目次
・はじめに
・ウォレットアプリ進化までの道のり
　［1］現金チャージ機能の追加
　［2］Kyash Visaカードの発行フロー変更
　［3］UI変更にあたって｜ユーザーヒアリング
　［4］UI変更にあたって｜segmented controlを不採用した理由
・おわりに

はじめに

はじめまして、株式会社Kyashでサービス&プロダクトデザイナーをしている成澤真由美です。

Kyashはおかげさまでリリースから約1年、これまで個人間送金の体験を提供してきました。今後はさらなる飛躍を目指し、送金だけではなく決済を入口とした利用も促進していくことに。

そして2018年3月、これまで備わっていた決済の機能を活かし「ウォレットアプリ」として進化しました。必要だったのは、ユーザーとのコミュニケーションを変えていくこと。今回は、UI・UX変更の際に気をつけたポイントについてお話します。

ウォレットアプリ進化までの道のり

［1］現金チャージ機能の追加

Kyashはクレジットカードを紐づけておくことで、アプリからFacebookやLINEなどを通じ、カンタンに送金が可能です。受け取ったお金は、Kyash Visaカード(*)を介し、ネットショッピングやモバイルSuicaにチャージすることで実店舗でのお買い物に使用できる機能を提供していました。

(*).... KyashはKyash Visaカードというアプリ内で発行可能なオンライン専用のバーチャルVisaカードを提供しています。

2018年2月、現金チャージ機能をリリース。Kyash Visaカードに対し、コンビニや銀行口座から現金のチャージが可能になりました。

これにより、クレジットカードを持っていない方や、持っているけれども積極的に利用をしたくない方に対しても「現金を必要な分だけチャージして、ネットショッピングを楽しめる」という価値を提供できるようになります。

もともとKyash Visaカードでの決済機能は、受け取った残高をネットショッピングで使われることを主な用途として存在していました。今回の機能追加により、個人間送金ではなく決済でのみ利用したい方のニーズにも応えることができるようになりました。

2018年3月、今回のリニューアルではKyash Visaカードのタグラインも変更。

「スマホでチャージして使えるVisaカード」

これを掲げることで、Kyashは決済アプリとしても活用できることをより多くのユーザーに知っていただけたらと思っています。

［2］「Kyash Visaカード」発行フロー変更

もう１つの変更点に、Kyash Visaカードの登録フローがあります。今まではユーザーの任意のタイミングで発行する体験としていましたが、会員登録直後に発行を促す体験に変更し、最初からKyash Visaカードが発行されている世界を作りました。

この理由は、お買い物を目的にKyashを利用する方にとって、一番必要なアイテムをゲットする体験をアプリの最初の体験にしたかったためです。

これにより、Kyashがクレジットカードのようなカードを発行できるサービスだと理解を深めていただくことにも繋がりますし、個人間送金を目的とするユーザーの方にも今まで伝えきれていなかった価値をさらに伝えていくことに繋げられると考えていました。

［3］UI変更にあたって｜ユーザーヒアリング

さらに、ウォレット画面におけるUIの刷新も行いました。

(*) ウォレット画面.... Kyashを使う際のホーム画面のようなイメージ。

細心の注意を払ったのは、チャージ機能の見せ方です。コンビニや銀行ATMでのチャージは、その場所に出向かないと完結しない体験です。利用してくださるユーザーは、お金のサービスに親和性の低い属性、たとえば10代・20代の若者も想定されました。

インタビューを重ねた結果、彼らが持っているインサイトは、２つです。

・お金の使いすぎを心配している
・安全に利用したい

ウォレット画面を見た時、自身のお金がどのタイミングでアプリに補填されていくかを想像できる表現にすることが欠かせないと考えました。

そこで、A案とB案をもとにチャージ機能についてさらにヒアリングを実施。対象ユーザーはできるだけターゲットと近い属性の方々を選びました。得られた意見を紹介します。

・金額に対するアクションなのだとわかりやすい
・ただ、チャージボタンを押したら何が出るのかわからない

・情報がある程度多くても、何ができるのかわかる方が安心する

対象ユーザーからはB案の評価が高いという結果に。これらを踏まえ、より「安心感」を醸成するようなUIを作り込んでいきました。

・ウォレット画面の第一階層でチャージ手段を選べる
・チャージはボタンでの実行ではなく、セル型で表現
・description／説明文言を添え、体験を想起しやすく

［4］UI変更にあたって｜segmented controlを不採用した理由

もう１つ、ウォレット画面の設計で意識したのは「拡張性」です。これはウォレットアプリとしてベースを整えた後も、まだまだ新機能を搭載していくことを想定していたためです。

はじめはチャージと送金の機能を『segmented control』を用いて表現していました。ただ結果的には不採用に。 理由は、決済を目的とするユーザーにとってはわかりやすかったのですが、ラフデザインを元に議論した結果、「インタラクションが自動的に確定してしまう」という課題が出たためです。

具体的な議論の内容として次のようなものがありました

・将来的に「チャージ」や「送金」と並列の概念が現れた場合、項目の追加が困難になりうる
・controlエリアが固定化されることになるので、スクロール領域が狭まる・「チャージ」と「送金」のどちらかしか触れなくなる（非同期で存在させたい）

segmented controlで「チャージ」「送金」を表現したボツ案

そこから次なるUIを模索。

・決済アクションと送金アクションを並列概念に
・カード詳細・送金・請求のアクションボタンを設ける
・必要なユーザータスクをサポートできる機能を設ける

Kyash Visaカードの部分と、チャージ手法の部分は拡張要素

今後も決済手段と、チャージ手段の拡充を見込んでいます。理想は、スクロールで全ての要素を眺めることで、何ができるアプリなのかを把握できること。ここをベースに、拡張要素においては、コンポーネントによるインタラクションの制約が発生しない状態を目指しました。

また、決済ユーザーがネットショッピングをする際のアクションを整理した結果、カード詳細・送金・請求のアクションボタン枠が出来上がりました。ネットショッピングにKyashを利用するユーザーは、支払いの直前で決済手段の選択・登録を行います。その際にKyash Visaカードの情報をスムーズに登録してほしい。この思いでユーザータスクをサポートする機能としてアクションボタンの枠を設けることになりました。

おわりに

「買い物も割り勘もスマホ1つで」これがKyashの作ろうとしている世界です。実現のためには、既存のプロダクトの改善を続けながら、0-1レベルの新機能の開発を続ける必要があります。そういった中で、デザイナーに求められているのは、今訪れてくれているユーザーと、少し先の未来に訪れるユーザーの両方を見ていくこと。未来に必要となる体験設計を踏まえた上で、要件に応じて柔軟にかつ少しの情報設計の変化で賄っていける、そんなインターフェイスを考えていく必要があると思っています。

また、実装面で今回のウォレットUIを再現していく過程で、リリース後1年の間に積み重なったシステムとグラフィックの間での様々な問題が勃発しました。その課題に対し、エンジニアとデザイナーが互いに意見を出し、タイトなスケジュールの中でスピーディに意思決定を繰り返しながら至ったUI表現もあります。それについては今後、Kyash blogで開発秘話としてお話しできれば幸いです。

文 ＝ まっさん