PayPayアプリにおけるオンラインとオフラインのユーザー体験 / YJTC19 in Shibuya B-5 #yjtc

1.6K Views

December 13, 19

#yjtc #PayPay #UXデザイン #アプリデザイン #オンラインオフライン #デザインプロセス

スライド概要

PayPayは、スマホひとつでカンタン・おトクにお支払いができるアプリです。
本セッションでは、QRコード決済戦国時代に立ち向かうPayPayアプリの「便利」に勝る体験設計への奮闘とUXデザインが浸透した社内でのデザイナーの役割についてお話しました。

profile-image
スライド一覧

2023年10月からSpeaker Deckに移行しました。最新情報はこちらをご覧ください。 https://speakerdeck.com/lycorptech_jp

シェア

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

（ダウンロード不可）

関連スライド

slide-thumbnail

深層学習による自然言語処理入門: word2vecからBERT, GPT-3まで
user-img Yahoo!デベロッパーネットワーク 165.2K
slide-thumbnail

ゼロから始める転移学習
user-img Yahoo!デベロッパーネットワーク 86.6K
slide-thumbnail

ヤフーにおける WebAuthn と Passkey の UX の紹介と考察 #idcon #fidcon
idcon fidcon
user-img Yahoo!デベロッパーネットワーク 74.2K
slide-thumbnail

OpenID Connectとネイティブアプリを取り巻く仕様と動向 Yahoo! JAPANの取り組み #openid #openid_tokyo
openid openid_tokyo
user-img Yahoo!デベロッパーネットワーク 58.1K
slide-thumbnail

運用業務とスクラムは本当に組み合わせにくいのか︖運用業務が大半を占めるプロダクト開発での試行錯誤
devsumi
user-img Yahoo!デベロッパーネットワーク 36K
slide-thumbnail

ヤフーのオンプレ機械学習基盤AIPFについて #ml_kubernetes
ml_kubernetes
user-img Yahoo!デベロッパーネットワーク 29.3K
各ページのテキスト
1.

PayPayアプリにおける オンラインとオフラインのユーザー体験 PayPay株式会社 デザイナー 青柳 麻紀 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

2.

青柳 麻紀 PayPay株式会社 今年の7月にPayPayにデザイナーとしてJoin 6月まではYahoo! JAPANアプリを担当 好きなものはお酒と女性アイドル 第4代 黒帯：ビジュアル設計 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

3.

6月までは、Yahoo! JAPANアプリの UX責任者とPayPay機能を担当 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

4.

PayPayのご紹介と アプリの体験のデザインにおいて PayPayが大切にしていることをお話します Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

5.

Hello PayPay Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

6.

Hello! PayPay PayPayアプリのご紹介 2018/10/5 launch! Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

7.

Hello! PayPay PayPayアプリのご紹介 App Store / Google Play Store アプリストア無料ランキング No.1 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. ※2019年12月9日時点

8.

Hello! PayPay PayPayアプリのご紹介 Google Play Award 2019 ユーザー投票部門 アプリカテゴリ 最優秀賞 引用：https://play.google.com/store/apps/uservoting/Apps%20-%20Best%20Of%202019%20User%20Voting%20Page? id=mc̲bestof2019̲uv̲apps̲page Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

9.

Hello! PayPay PayPayアプリのご紹介 ユーザー数 加盟店申込数 2,000 万人 170 万カ所 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. 累積決済回数 3 億回超 ※2019年12月現在

10.

Hello! PayPay PayPayアプリのご紹介 iOS Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. Android

11.

Hello! PayPay PayPayってこんな会社 共同出資会社 2018年6月15日に設立 技術提供 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

12.

Hello! PayPay PayPayってこんな会社 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

13.

Hello! PayPay PayPayってこんな会社 余談 実はヤフーとPaytmのカラーリング Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

14.

PayPayの開発体制 アプリデザイナーの担当領域 支払いアプリ Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. お店のツール

15.

Hello! PayPay PayPayアプリのご紹介 iOS Android あらためてよろしくお願いします！ Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

16.

体験をデザインする上でPayPayが大切にしていること Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

17.

PayPayが大切にしていること 体験デザインをするうえで大切にしていること リリース時点で完璧は目指さない バランスの良い状態・”完璧”の手前で リリースし、その後改善する Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

18.

PayPayが大切にしていること リリースサイクル MON TUE WED THU FRI 要件・デザイン 開発 開発完了 コードFIX App審査 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. テスト開始 Appリリース テスト終了

19.

PayPayが大切にしていること リリースサイクル MON TUE WED THU FRI D：要件・デザイン C：開発 B：開発完了 B：コードFIX A：App審査 B：テスト開始 A：Appリリース 週1回のリリース Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. B：テスト終了

20.

PayPayが大切にしていること Home画面の変遷 10月 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. 12月 4月 5月

21.

PayPayが大切にしていること 体験デザインをするうえで大切にしていること スピーディーなリリースサイクルの中で 多くを実験し、ユーザーの声を聞いて 改善してゆく Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

22.

PayPayが大切にしていること 体験デザインをするうえで大切にしていること リリース時点で完璧は目指さない バランスの良い状態・”完璧”の手前で リリースし、その後改善する Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

23.

PayPayが大切にしていること 体験デザインをするうえで大切にしていること 何のバランス？ Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

24.

PayPayが大切にしていること 体験デザインをするうえで大切にしていること オンライン✕オフラインの バランス Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

25.

PayPayが大切にしていること オンライン✕オフラインのバランス ONLINE アプリの認知 インストール 利用登録 お店の認知 決済 OFFLINE アプリの中と外で行き来が発生する Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. 確認

26.

PayPayが大切にしていること オンライン✕オフラインのバランス ONLINE アプリの認知 インストール 利用登録 お店の認知 決済 OFFLINE どれか1つでも欠けると体験は止まってしまう Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. 確認

27.

PayPayが大切にしていること オンライン✕オフラインのバランス ONLINE アプリの認知 インストール 利用登録 お店の認知 決済 OFFLINE どれか1つでも欠けると体験は止まってしまう Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. 確認

28.

PayPayが大切にしていること バランス感覚 口座登録の 簡略化 お店の検索 機能を拡充 パフォーマン スを改善 ボーナス還元 の演出 利用登録 お店の認知 決済 確認 加盟店数 拡大 加盟店用 アプリの提供 ONLINE アプリの認知 インストール OFFLINE 体験を止めないよう双方に施策をうつ Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

29.

PayPayが大切にしていること バランス感覚 施策 施策 ONLINE OFFLINE Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

30.

PayPayが大切にしていること バランス感覚 一部のお店でしか 使えない 使えるお店検索の ユーザビリティを 磨き込む OFFLINE ONLINE Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

31.

PayPayが大切にしていること バランス感覚 お店が 探しにくい 加盟店を 全国に増やす ONLINE OFFLINE Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

32.

PayPayが大切にしていること バランス感覚 お店が探しやすく すぐ見つかる 使えるお店が いっぱいある ONLINE OFFLINE Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

33.

PayPayが大切にしていること バランス感覚 使えるお店がかなり増えた 検索機能のリニューアル Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

34.

PayPayが大切にしていること バランス感覚 オンライン✕オフラインの体験の設計には 双方のバランスの取れた状態を保つことを 心がけている Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

35.

PayPayが大切にしていること バランス感覚 担当領域外との密なコミニュケーション Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

36.

PayPayが大切にしていること バランス感覚 アプリの外で何が起こっているかを可視化 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

37.

PayPayが大切にしていること スピード どのようにスピードを保っている？ Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

38.

PayPayが大切にしていること スピード ビジュアルで会話する スピードを保つためにやっていること Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

39.

PayPayが大切にしていること スピード 要件定義からビジュアルラフで検討する ワイヤーフレームなどでの議論を省く Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

40.

PayPayが大切にしていること スピード 要件 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. UXフロー

41.

60%程度のビジュアルラフで要件ツメをしていく Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

42.

PayPayが大切にしていること スピード 要件定義 画面フロー ワイヤー フレーム 検証 一般的なデザインフロー Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. ビジュアル デザイン

43.

PayPayが大切にしていること スピード 承認会議 要件定義 承認会議 画面フロー ワイヤー フレーム 承認会議 検証 一般的なデザインフロー Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. ビジュアル デザイン

44.

PayPayが大切にしていること スピード プロダクト責任者 レビュー プロダクト責任者 レビュー 要件定義(PM＋Designer） ラフビジュアルデザイン UXフロー作成 検証 PayPayのデザインフロー Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. ビジュアル ファイナライズ

45.

PayPayが大切にしていること スピード 事例 ・銀行口座登録フローの改善 ・本人確認機能の追加 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. 約2ヶ月でリリース

46.

PayPayが大切にしていること スピード Yahoo!マネーの銀行口座登録画面 ▼ PayPay独自の口座登録画面を開発 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

47.

PayPayが大切にしていること スピード PayPay内で簡単に本人確認が できるようにする Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

48.

60%程度のビジュアルラフでUXフローを作成 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

49.

議論検証を重ね、何度もアップデート Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

50.

PayPayが大切にしていること スピード 初稿のUI Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. リリース版

51.

PayPayが大切にしていること スピード 初稿のUI Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. リリース版

52.

PayPayが大切にしていること スピード ビジュアルラフ込みのUXフローで 正常系のみ、全体の70%ほどの要件定義を完了 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

53.

PayPayが大切にしていること スピード ビジュアルで会話することのメリット Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

54.

PayPayが大切にしていること スピード はじめから最終イメージに近いもので議論ができ、 リリースするもののイメージが経営層含め全職種で 合致した状態でプロジェクトが進行できる ワイヤーではいい感じだったけど ビジュアルにしたらそうじゃなかった…を防げる Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

55.

PayPayが大切にしていること スピード 仕様書やワイヤーフレームだけでは気づかない穴に 早い段階で気がつくことができ、戻りも少ない そのままプロトタイプツールで最終イメージに近いかたちで検証ができる 早い段階で実装難易度がわかる Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

56.

PayPayが大切にしていること スピード ビジュアルで会話する ＝ 総合的に見て効率的 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

57.

PayPayが大切にしていること スピード 気をつけるべき点 ・議論中、ビジュアルの細かい点で議論が発散しないよ うに注意が必要 ・要件定義とビジュアルデザインの同時進行はある程度 の知識経験がないと逆効果になる場合がある Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

58.

PayPayが大切にしていること バランスとスピードをバックアップするもの 良いバランス スピード 2つをバックアップするもの Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

59.

PayPayが大切にしていること バランスとスピードをバックアップするもの 質の高いジャッジ Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

60.

PayPayが大切にしていること バランスとスピードをバックアップするもの プロダクト責任者がUX責任者を兼任 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

61.

PayPayが大切にしていること バランスとスピードをバックアップするもの プロダクト責任者 レビュー プロダクト責任者 レビュー 要件定義(PM＋Designer） ラフビジュアルデザイン UXフロー作成 検証 ビジュアル ファイナライズ 都度プロダクトの責任者であるUX責任者と議論 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

62.

PayPayが大切にしていること PayPayが大切にしていること バランスとスピードをバックアップするもの バランスとスピードをバックアップするもの ビジネス要件とデザイン観点での ビジネス要件とデザイン観点での ジャッジが同時に行える ジャッジが同時に行える Copyright© Copyright© 2019 2019 Yahoo Yahoo Japan Japan Corporation. Corporation. All All Rights Rights Reserved. Reserved.

63.

まとめ Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

64.

PayPayが大切にしていること 体験デザインをするうえで大切にしていること リリース時点で完璧は目指さない バランスの良い状態・”完璧”の手前で リリースし、その後改善する Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

65.

まとめ アプリの体験デザインをするうえで大切にしていること 良いバランス Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. スピード

66.

まとめ 良いバランス オンライン✕オフラインの体験の設計には 双方のバランスの取れた状態を保つことを 心がけている Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

67.

まとめ スピード ビジュアルで会話する スピードを保つためにやっていること Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

68.

まとめ スピード UX責任者 レビュー UX責任者 レビュー 要件定義(PM＋Designer） ラフビジュアルデザイン UXフロー作成 検証 早い段階でビジュアルで会話 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. ビジュアル ファイナライズ

69.

PayPayが大切にしていること バランスとスピードをバックアップするもの プロダクト責任者がUX責任者を兼任 ビジネス要件とデザイン観点での ジャッジが同時に行える Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

70.

PayPayはまだまだこれから… より良いものをご提供できるよう 日々精進します dummy Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

71.

ご清聴ありがとうございました Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

72.

Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.