チームラボプラネッツの「チケット購入から入場まで」の体験設計

「DMM meetup #32 〜なんでもやる会社のサービスデザイン〜」
https://dmm.connpass.com/event/218769/

にて発表した資料。

WEB( PCサイト / SPサイト / 印刷対応 )・リアル( 券売機UI / 券売機筐体 / 出力チケット / サイネージ) のトータルデザインをした際に行った、ユーザー行動設計を行った手順とその応用についてご紹介しております。

Transcript

1. チームラボプラネッツ
   「チケット購⼊から⼊場まで」の体験設計
   合同会社DMM.com ⿑藤 卓真
   

   View Slide

2. ⿑藤 卓真
   合同会社DMM.com エンターテインメント本部
   デザイン部 部⻑
   事業会社でデザイン・ディレクション経験を経て2016年にDMM⼊社。
   新規事業のデザインリードを務めたのち、複数の事業に開発⽀援を⾏うデザ
   イン組織を組成し現職。「主体性」と「デザイン+α」のスキルで事業貢献
   するデザイナー集団を⽬指す。 (※ 今回は ⾃⾝のUI/UXデザイン実績をご紹介)
   

   View Slide

3. 超巨⼤な4つの作品空間と2つの庭園など、計9作品による
   「⽔に⼊るミュージアムと花と⼀体化する庭園 」。
   ⼈々は、他者と共に、「Body Immersive」というコンセプ
   トの超巨⼤な作品に、⾝体ごと没⼊することによって、⾝
   体と作品との境界を曖昧にし、⾃分と他者と世界との境界
   を連続的なものに変え、私たちと世界との境界のない新し
   い関係を模索する。はだしとなって、超巨⼤な作品に、他
   者と共に、⾝体ごと、圧倒的に没⼊していく。
   Floating Flower Garden: 花と我と同根、庭と我と⼀体 / Floating Flower Garden: Flowers and I are of the Same Root,
   the Garden and I are One
   東京 豊洲 （ 新豊洲駅前 ）
   

   View Slide

4. 開業３周年を迎え 7⽉2⽇から拡張
   ２つの庭園が新たに誕⽣し
   「⽔に⼊るミュージアムと花と⼀体化する庭園」に。
   

   View Slide

5. チケット・⼊場システム 構築
   購⼊・⼊場する 観る
   作品制作・管理
   問い合わせる
   施設運営・販売管理… etc
   ( 株式会社PLANETS )
   ( 合同会社DMM.com ) ( チームラボ株式会社 )
   

   View Slide

6. 結果的に ”デザインした主要な 媒体”
   WEB
   リアル
   PCサイト
   SPサイト
   印刷対応
   券売機
   ( UI/外形 )
   出⼒
   チケット
   サイネージ
   多⾔語対応
   

   View Slide

7. WEB とリアルを
   繋ぐ体験設計⼿順
   

   View Slide

8. チケット・⼊場システム 構築
   購⼊者
   同伴者
   STEP.1｜チケット利⽤者を分類
   

   View Slide

9. チケット購⼊・分配する・⼊場
   購⼊者
   同伴者 チケット分配される・⼊場
   “各種属性情報を整理” しつつ
   ボリュームゾーンを想定
   STEP.2｜⼤きく想定ニーズを分類
   

   View Slide

10. STEP.3｜”デジタル”リテラシーレベルを追加
    チケット購⼊・分配する・⼊場 ニーズ
    チケット購⼊・分配する・⼊場 ニーズ
    チケット分配される・⼊場 ニーズ
    チケット分配される・⼊場 ニーズ
    購⼊者
    リテラシー :
    ⾼
    リテラシー :
    低
    同伴者
    リテラシー :
    ⾼
    リテラシー :
    低
    

    View Slide

11. ⼊場
    購 ⼊
    STEP.4｜⾏動区分を追加
    購⼊者
    リテラシー :
    ⾼
    リテラシー :
    低
    同伴者
    リテラシー :
    ⾼
    リテラシー :
    低
    ネットで買う
    リアルで買う
    分配する
    分配する
    分配される
    分配される
    施設を知る
    施設を知る
    施設を知る
    施設を知る
    認 知 分 配
    ・・・・・・・
    ・・・・・・・
    “類似サービスの競合調査”を たくさんやりました
    ⼊場する
    ⼊場する
    ⼊場する
    ⼊場する
    

    View Slide

12. ⼊場
    購 ⼊
    STEP.5｜時間の概念を追加
    施設を知る
    施設を知る
    購⼊者
    リテラシー :
    ⾼
    リテラシー :
    低
    同伴者
    リテラシー :
    ⾼
    リテラシー :
    低
    ネットで買う
    リアルで買う
    分配する
    分配する
    分配される
    施設を知る
    施設を知る
    認 知 分 配
    ・・・・・・・
    ・・・・・・・
    1〜2ヶ⽉の空⽩ 当⽇する⼈も…
    分配される
    ⼊場する
    ⼊場する
    ⼊場する
    ⼊場する
    

    View Slide

13. STEP.6｜対応媒体を当てはめる
    ⼊場
    購 ⼊
    ネット出稿
    TV出稿
    購⼊者
    リテラシー :
    ⾼
    リテラシー :
    低
    同伴者
    リテラシー :
    ⾼
    リテラシー :
    低
    SNS⼝コミ
    購⼊者の誘い
    WEBストア
    券売機
    WEBで分配
    ( 印刷して分配 )
    ⼿で分配
    される
    ⼿で受取り
    ( 券売機 / 印刷 )
    ⼿で分配する
    WEB受取り
    認 知 分 配
    WEBチケット
    券売機
    チケット
    WEBチケット
    券売機/印刷
    チケット
    ・・・・・・・
    ・・・・・・・
    

    View Slide

14. 会場サイネージ (時間/価格)
    STEP.7｜連結要素・⾏動分岐 を整理 (※ざっくりイメージ)
    例)
    購⼊者
    WEBサイト(販売)
    認 知 (分配)
    アド出稿
    記事出稿
    検 索
    サーチ
    エンジン
    TV出稿
    SNS拡散
    関連媒体
    券売機 (販売)
    現地スタッフ・インフォメーション
    ヘルプ
    当⽇
    (注意事項…etc)
    未来⽇
    区分/枚数選択/決済
    訪 問
    購 ⼊ WEB
    チケット
    表⽰
    ( or 印刷 )
    対象選択
    ⽅法選択
    …etc
    ⼊場ガイド
    購⼊完了
    通知
    ⼊場⽇前リマインドメール
    (利⽤)
    会場付近 掲⽰物
    ⼊場
    ⼊場可能時間の
    アナウンス / 掲⽰
    ⼊場列
    ゲート
    ⽇時選択 チケット出⼒
    ※ PC / SP
    

    View Slide

15. 体験設計が
    正しいか検証
    

    View Slide

16. 会場サイネージ (時間/価格)
    STEP.8｜メインシナリオの合意形成
    例)
    購⼊者
    WEBサイト(販売)
    認 知 (分配)
    アド出稿
    記事出稿
    検 索
    サーチ
    エンジン
    TV出稿
    ⼝コミ
    関連サイト / SNS
    現地スタッフ・インフォメーション
    ヘルプ
    当⽇
    (注意事項…etc)
    未来⽇
    区分/枚数選択/決済
    訪 問
    購 ⼊ WEB
    チケット
    表⽰
    ( or 印刷 )
    対象選択
    ⽅法選択
    …etc
    ⼊場ガイド
    購⼊完了
    ⼊場⽇前リマインドメール
    (利⽤)
    会場付近 掲⽰物
    ⼊場
    ⼊場可能時間の
    アナウンス / 掲⽰
    ⼊場列
    ゲート
    ⽇時選択 チケット出⼒
    券売機 (販売)
    

    View Slide

17. STEP.9｜検証シナリオ(仮説)の 抽出・分解
    WEBサイト(販売)
    認 知 検 索
    ⼝コミ
    ヘルプ
    訪 問
    購 ⼊ WEBチケット
    表⽰
    ⼊場ガイド
    購⼊完了
    ⼊場⽇前
    リマインド
    メール
    (利⽤) ⼊場
    ⼊場可能
    時間の掲⽰
    ゲート
    サーチ
    エンジン ⼊場列
    1〜2ヶ⽉の空⽩
    ❶ 認知から購⼊完了まで ❷ 前⽇のチケット表⽰ ❸ 来園して⼊場
    

    View Slide

18. STEP.10｜検証の準備
    ❶ 認知から購⼊完了まで
    プロトタイプA
    ❷ 前⽇のチケット表⽰
    プロトタイプB
    ❸ 来園して⼊場
    合成イメージ写真
    ライティングも本番並み
    UIも実サイトに近い精度
    認 知 検 索 ⼊場
    (利⽤)
    WEBサイト(販売)
    実際の建物はまだ
    ないから想像で
    

    View Slide

19. STEP.11｜ユーザテスト実施
    認 知 検 索 ⼊場
    (利⽤)
    WEBサイト(販売)
    「 券売機のUI・外形 / サイネージ / 出⼒チケット 」
    もデザインしたので合わせてユーザテスト
    擬似的な環境再現
    来園して
    ⼊場できるか？
    ⽇を開けて
    リテラシー別 (⽇本語) 続き
    体験設計に
    ⽳がないか？
    ⺟集団
    形成
    類似商品の利⽤実態を”事前インタビュー”
    国内常識への
    依存はないか？
    ⺟集団
    形成 インバウンド対応 ( 英語 )
    

    View Slide

20. STEP.12｜結果を踏まえ優先順位つけて補強
    認 知 検 索 ⼊場
    (利⽤)
    WEBサイト(販売)
    どこに
    ある施設？
    チケットの
    種類の差は何？
    パッと⾒で
    ワクワクしたい !
    WEBチケットだけ？
    紙はないの？
    チケットを
    どう使うんだろう？
    もうそろそろ、
    ⼊場⽇だっけ？
    チケットを
    会場でどう使うの？
    どう会場に
    いくんだっけ？
    もうそろそろ、
    ⼊場⽇だっけ？
    どんな
    ⼊場⼝？
    

    View Slide

21. View Slide

22. STEP.13｜仕組みと⼈の連動が⼤事
    WEB
    訪問 購⼊ チケット表⽰
    ヘルプ/アクセス
    ⼊場ゲート
    ⼊場⼿順ガイド
    券売機
    来園 / 確認 画⾯操作
    スタッフ インフォ
    メーション
    カスタマーサポート
    機材操作
    リマインド
    出⼒
    ⼊場列
    運営
    

    View Slide

23. 体験設計の
    様々な使い道
    

    View Slide

24. 幅広い関係者 の
    「こうあるべき」が
    体験設計 で 明確 になる
    

    View Slide

25. リリース後 は
    「さらに、こうあるべき」への
    改善 に 役⽴つ
    

    View Slide

26. 体験設計
    プロトタイピング
    開発の
    ⾼速化
    KPIの
    設計
    円滑な
    意思決定
    運営との
    連動
    ・オペレーションの効率化
    ・定性情報に基づいた改善⽴案
    ・体験全体をいつでも俯瞰
    ・「あるべき」を前提に議論
    ・完成像を具体的に共有
    ・開発者のUXへの意識醸成
    ・KPIツリーの設計/ 計測⽅法の明確化
    ・定量情報に基づいた改善⽴案 / 組織⽬標への転⽤
    現地での⾏動観察
    

    View Slide

27. この話は、またの機会に…
    

    View Slide

28. 最後に⼀つ
    

    View Slide

29. UI/UXデザイナー育成を強化中
    詳しくは…
    【トーク内容】 【トーク内容】
    DMMデザインリード2⼈が
    語るこれからの
    サービスデザイナー
    デザイナーの
    ⼈材育成と組織連携
    https://inside.dmm.com/entry/2021/07/16/yondemasu11
    https://inside.dmm.com/entry/2021/03/11/devlead-3
    

    View Slide