複雑性をシンプルに。メルペイTOP画面に込めたデザインの思想。

こんにちは、Merpay Design Teamのnaricoです。
今回は、私が担当するメルペイTOP画面の制作裏話をお話ししたいと思います。

メルカリのお客さまの「お金」に関する体験を提供しているのが「メルペイTOP画面」です。
売上金の管理や支払い方法の設定、お店でのスマホ決済の操作など、すべてこの画面から始めることが可能です。
そのため、お客さまそれぞれの目的に応えられる状態を作り出す必要があり、この画面を担当するPM（プロダクトマネージャー）とデザイナーにとって永遠の課題であり試行錯誤の日々であります。

メルペイ体験を3つにフェーズ切りしてみる

100人いれば100通りの使い道があるのがメルカリ利用の特徴ですが、私たちは大きく3つの利用状況に表現を分けることにより、お客さまの体験をシンプルにまとめる試行錯誤をしています。

メルペイTOP画面の3つの段階
- 本人確認前：ポイントでの支払いが可能
- 本人確認後：銀行/ATMチャージでの支払いが可能
- メルペイスマート払い設定後：利用上限金額を使って支払いが可能

売上金をただ確認したいだけの人、銀行チャージしてスマホ決済したい人、より賢く便利にメルカリ・メルペイの支払いを管理できるメルペイスマート払いを使いたい人、それぞれの利用目的別で体験を提供することができます。

お客さまとサービス、それぞれの課題を解決する通称"N.A.S.A."とは？

しかし、こういった試行錯誤はまだ道半ばです。
メルペイTOP画面には、多くのプロジェクトチームからの意見が集まります。もちろんプロダクトの戦略だけでは成り立ちませんので、マーケティングやビジネスサイドのメンバーからの意見も加わります。
一方お客さま側では「この画面を開いたら、自分は一体何をすれば良いのか？」そんな迷いを抱く声がUXリサーチで多く寄せられました。
私たちが最適なタイミングで提供したい有益な体験と、お客さまの不安と期待がマッチングされる、そんな場所が必要でした。
そこで生まれたのが、通称N.A.S.A.「Next Action Support Area」です。

読んで字の如く、お客さまのその時の状態に沿って「自分が次に何をすればお得・便利になるのか」に気付いてもらい、行動に移せるエリアとなっています。

このサポートエリアに表示させるコンテンツは、メルペイTOP画面の開発チームとマーケティング施策を実施するGrowthチーム、そして新しい機能を生み出す別の開発チームなど、たくさんのチームとの議論の上で決定されます。

たった1つの情報だけを表示する理由

N.A.S.A.のコンテンツ配信を議論する中で「N.A.S.A.を複数設置すれば我々が提供したいことが同時に実現するのではないか？」という問いが出るのですが、それに対しては、N.A.S.A.を設計した担当PMと担当デザイナーの私からは必ず「NO」と回答してきました。

お客さまの次にやることを明確にすることがサポートエリアの役割なので、原則1つだけしか表示させないことが「体験価値」となるからです。

お客さまお一人に対して原則1つしか表示できない状態なので、当然出しわけ条件がとても複雑化します。担当PMの試行錯誤の末にできあがる表示条件によって、お客さまの元へ厳選された「1つの情報」を提供することができています。
ちなみに……。バックエンドの仕組み上はこのサポートエリアを無限に並べることが可能ですので、複数のN.A.S.A.を表示させるのはいとも簡単に実現できます。表示させるコンテンツを決定するPM（プロダクトマネージャー）には、時々悪魔のささやきが聞こえていることでしょう。

おかげさまで、どんなに魅力的で派手なバナーよりも、N.A.S.A.の方がお客さまの信頼が置かれていることが数値的にも確認ができています。

より良い体験を目指して

ここまで、簡単ではありますが、メルペイTOP画面の仕組みについてご紹介しました。

このように熟考されているメルペイTOP画面ですが、今後も、機能の追加やお客さまの利用方法の多様化に合わせたアップデートは続きます。
3つの利用状況に分けてはいますが、「売上金の管理・支払い方法の設定・決済画面の表示」と、今後より最適な状態に仕上げていくためにはその概念を拡張しなければなりません。
今後どう改善していくか。次の機会でお話しできるよう、さらに体験に磨きをかけて参ります。

執筆・図版作成：narico
編集： crema / taiyo