eコマースと実店舗の相互利益を目指したデザイン #yjtc

タグ yjtc

スライド概要

2021年の「グッドデザイン賞」ではヤフーから4案件が受賞しました。本セッションでは「PayPayモールの実店舗在庫連携」について、案件の立ち上げから、リリースを通して改善・工夫した事、グッドデザイン賞の受賞経緯など、デザイナー目線でお話しします。

Yahoo! JAPAN Tech Conference 2022は2022年2月3日、4日に開催しました。
https://techconference.yahoo.co.jp/2022/

アーカイブ動画はこちらからご覧ください。
https://youtu.be/MFnZd1j4SUk

profile-image

Yahoo!デベロッパーネットワーク

@ydnjp

作者について:

エンジニア・デザイナー向けのヤフー公式アカウント。イベント/登壇情報/ブログ記事など、ヤフーの技術・デザインに関わる情報を発信します。

スライド一覧
シェア
埋め込む»CMSなどでJSが使えない場合

公開日

2022-02-03 15:47:00

各ページのテキスト

1. eコマースと実店舗の 相互利益を⽬指したデザイン ヤフー株式会社 COOショッピング統括本部プロダクション1本部 デザイン企画部ストア・カート 平⽥ 美緖 ©2022 Yahoo Japan Corporation All rights reserved.

2. 平田 美緖 COOショッピング統括本部 デザイン企画部 2019年新卒入社。 Yahoo!ショッピング・PayPayモールのUI/UXデザイ ン・プロモーションデザイン制作等が主な業務。 趣味は旅行、麻雀、猫、読書、etc ©2022 Yahoo Japan Corporation All rights reserved.

3. はじめに ヤフーはグッドデザイン2021を4つ受賞 受賞した案件 • 新型コロナ予防啓発企画 #ようせいです • デスクリサーチツール DS.INSIGHT • eコマースにおける⾼負荷時のユーザー体験設計 • Xショッピング構想(実店舗在庫連携) ©2022 Yahoo Japan Corporation All rights reserved.

4. はじめに ヤフーはグッドデザイン2021を4つ受賞 受賞した案件 • 新型コロナ予防啓発企画 #ようせいです • デスクリサーチツール DS.INSIGHT • eコマースにおける⾼負荷時のユーザー体験設計 • Xショッピング構想(実店舗在庫連携) ©2022 Yahoo Japan Corporation All rights reserved.

5. 実店舗在庫連携サービスとは お店にある商品もオンラインで検索/購⼊できる ©2022 Yahoo Japan Corporation All rights reserved.

6. このセッションについて 2021年の「グッドデザイン賞」ではヤフーから4案件が受賞しました。 本セッションでは「PayPayモールの実店舗在庫連携」について、 案件の⽴ち上げから、リリースを通して改善・⼯夫した事など、 デザイナー⽬線でお話しします。 ©2022 Yahoo Japan Corporation All rights reserved.

7. 成り⽴ちの背景 ©2022 Yahoo Japan Corporation All rights reserved.

8. 実店舗在庫連携サービス成り⽴ちの背景 Xショッピング構想の⼀環 Xショッピング eコマースとリアルの 垣根をなくし お店にある商品も ネットで検索/購⼊できる世界 実店舗在庫サービスの誕⽣ ©2022 Yahoo Japan Corporation All rights reserved.

9. 実店舗在庫連携サービス成り⽴ちの背景 ⼩売業全体の永続と共存共栄 ユーザー 欲しいものが確実に すぐに⼿に⼊り便利 3者良し ストア ヤフー 物流費や⼈件費 などコスト減 実店舗持つ企業と 仲間に・収益拡⼤ ©2022 Yahoo Japan Corporation All rights reserved.

10. 実店舗在庫連携サービス成り⽴ちの背景 実店舗在庫サービスのメリット ユーザー ・店舗で受取することによってすぐに確実に商品を⼿にできる ・店舗で実際の商品を確認した上でキャンセルが可能 ・ネットに商品がない場合、店舗の在庫という選択肢が増える お店 ・配送不要&レジ不要のためコストが⼤幅に削減される ・ついで買いにより売上が増える 配送 ・運送業への負荷が軽減される ©2022 Yahoo Japan Corporation All rights reserved.

11. eコマースと実店舗の相互利益を⽬指したデザイン ©2022 Yahoo Japan Corporation All rights reserved.

12. eコマースと実店舗の相互利益を⽬指したデザイン サービスリリースまでの主な流れ ① 企画 ② デザイン ③ 開発承認 ④ コーディング 開発・テスト サービスの概 画⾯デザイン サービスマ HTMLやCSS、 実際に利⽤で 要・仕様検討 を作成 ネージャーに JS等主にWeb きるように 承認 の⾒た⽬の システム実装/ コーディング テスト実施 営業・ストア連携 ⑤ サービス導⼊の営業やストアがスムーズにサービスを利⽤できるように連携 ©2022 Yahoo Japan Corporation All rights reserved. リ リ " ス

13. eコマースと実店舗の相互利益を⽬指したデザイン ユーザーに寄り添う 検索・⽐較・決済など お買い物体験全体に ユーザーが満⾜できるかが⼤事 UXをデザインする ©2022 Yahoo Japan Corporation All rights reserved.

14. eコマースと実店舗の相互利益を⽬指したデザイン カスタマージャーニーマップ ユーザーの体験全体を可視化したもの(参考︓WEB製作者のためのUXデザインを始める本) ステージ タッチ ポイント ⾏動 思考感情 思い立つ 調べる ⽇常 SNS SNS 検索エンジン PayPayモール 友⼈の結婚式の スケジュールを 確認。 • • • ⽬的買い。 思ったより汚れ た為新しい靴が 必要。結婚式ま であと1週間。急 がなきゃ 😣 商品名検索 ブランド検索 シーンで検索 「結婚式 お 呼ばれ 靴」 お店を検索して 商品を⽐較した い・店舗の場所/ 営業時間を知り たい 以下改善案など ©2022 Yahoo Japan Corporation All rights reserved. 🙂 認知する SNS/記事 検索エンジン PayPayモール • • • SNS⼝コミで web広告で PPMアプリの モジュールで 「取り置き」 店に⾏って試し た後にキャンセ ルできるのであ れば、時間短縮 になって嬉しい から使ってみよ うかな 🙂 商品選択 SNS PayPayモール • • • • SNS上評判 商品検索画⾯ で⽐較 スペック/値 段/レビュー 近くの店舗に 在庫があるか 型と⾊違いで悩 んだ︕どっちが いいか決めきれ ないから実物を 試したい。 😣 店舗選択 PayPayモール 地図アプリ • • 店舗⼀覧を⾒ る 値段/アクセ ス/準備時間/ ストアの信⽤ 度etc.⽐較 すぐに受け取れ る/アクセスしや すい/信⽤できる /安い/悩んだ商 品全部在庫があ る店舗がいい︕ 🙂 注文する PayPayモール 地図アプリ • • • カートに⼊れ る 決済するor取 り置き 決済完了後完 了メール等を 確認 取り置きできた から安⼼。決済 は後で良いキャ ンセルOKだから 気楽︕商品を⼿ に⼊れるのが楽 しみ 🙂 来店する PayPayモール 地図アプリ • • • • 準備をする 店までのアク セスを調べる 来店する 取置商品の陳 列や他の商品 を⾒る 😄 商品を手に入れ るのが楽しみ。 他の商品も良い のがあった︕試 してみたい 試す、受取 PayPayモール 実店舗 • • 店員や専⽤ ロッカーに取 り置き商品⽤ 画⾯を表⽰ 実物を試す 😄 全部試せたか ら、1番良い商品 がわかった︕ 良い店だったか ら、頻繁に覗い てみよう

15. eコマースと実店舗の相互利益を⽬指したデザイン ユーザーに寄り添うUXをデザインする • プロジェクトメンバーの⽬線が合う • 複数ある施策にUX観点での優先度 をつけることができる ©2022 Yahoo Japan Corporation All rights reserved.

16. eコマースと実店舗の相互利益を⽬指したデザイン 実店舗在庫のフローパターン 新規サービスで関わる画⾯数が多い。またパターンが多数ある ECの在庫 ない ある バリエーション ある バリエーション ない 住所近郊の店舗 ある 住所近郊の店舗 住所近郊の店舗 ない 注文できる在庫 問合せのみ ©2022 Yahoo Japan Corporation All rights reserved. ない ある ある ない 注文できる在庫 問合せのみ ある 住所近郊の店舗 ない 注文できる在庫 問合せのみ ある ない 注文できる在庫 問合せのみ

17. eコマースと実店舗の相互利益を⽬指したデザイン デザインレビュー 先⼊観の少ない客観的な観点 ユーザー⽬線に近い観点 で意⾒がもらえる 品質の⾼いデザインへ ©2022 Yahoo Japan Corporation All rights reserved.

18. eコマースと実店舗の相互利益を⽬指したデザイン インタラクティブなモック作成 • リリースされたものを触っているように操作できる →ユーザー⽬線に近い⽅法でデザインをレビューできる ・企画さんとの仕様詰める際に認識のズレが少ない ・協⼒ストアの営業の際にイメージがつきやすい ・開発さんとのスムーズなコミュニケーション ©2022 Yahoo Japan Corporation All rights reserved.

19. まとめ ©2022 Yahoo Japan Corporation All rights reserved.

20. 実店舗在庫サービスは ユーザーに寄り添い、価値を創造 ©2022 Yahoo Japan Corporation All rights reserved.

21. ©2022 Yahoo Japan Corporation All rights reserved.