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

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

にて発表した資料。

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

Transcript

1. チームラボプラネッツ 「チケット購⼊から⼊場まで」の体験設計 合同会社DMM.com ⿑藤 卓真
2. ⿑藤 卓真 合同会社DMM.com エンターテインメント本部 デザイン部 部⻑ 事業会社でデザイン・ディレクション経験を経て2016年にDMM⼊社。 新規事業のデザインリードを務めたのち、複数の事業に開発⽀援を⾏うデザ イン組織を組成し現職。「主体性」と「デザイン+α」のスキルで事業貢献 するデザイナー集団を⽬指す。 (※ 今回は ⾃⾝のUI/UXデザイン実績をご紹介)
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 東京 豊洲 （ 新豊洲駅前 ）
4. 開業３周年を迎え 7⽉2⽇から拡張 ２つの庭園が新たに誕⽣し 「⽔に⼊るミュージアムと花と⼀体化する庭園」に。
5. チケット・⼊場システム 構築 購⼊・⼊場する 観る 作品制作・管理 問い合わせる 施設運営・販売管理… etc ( 株式会社PLANETS ) ( 合同会社DMM.com ) ( チームラボ株式会社 )
6. 結果的に ”デザインした主要な 媒体” WEB リアル PCサイト SPサイト 印刷対応 券売機 ( UI/外形 ) 出⼒ チケット サイネージ 多⾔語対応
7. WEB とリアルを 繋ぐ体験設計⼿順
8. チケット・⼊場システム 構築 購⼊者 同伴者 STEP.1｜チケット利⽤者を分類
9. チケット購⼊・分配する・⼊場 購⼊者 同伴者 チケット分配される・⼊場 “各種属性情報を整理” しつつ ボリュームゾーンを想定 STEP.2｜⼤きく想定ニーズを分類
10. STEP.3｜”デジタル”リテラシーレベルを追加 チケット購⼊・分配する・⼊場 ニーズ チケット購⼊・分配する・⼊場 ニーズ チケット分配される・⼊場 ニーズ チケット分配される・⼊場 ニーズ 購⼊者 リテラシー : ⾼ リテラシー : 低 同伴者 リテラシー : ⾼ リテラシー : 低
11. ⼊場 購 ⼊ STEP.4｜⾏動区分を追加 購⼊者 リテラシー : ⾼ リテラシー : 低 同伴者 リテラシー : ⾼ リテラシー : 低 ネットで買う リアルで買う 分配する 分配する 分配される 分配される 施設を知る 施設を知る 施設を知る 施設を知る 認 知 分 配 ・・・・・・・ ・・・・・・・ “類似サービスの競合調査”を たくさんやりました ⼊場する ⼊場する ⼊場する ⼊場する
12. ⼊場 購 ⼊ STEP.5｜時間の概念を追加 施設を知る 施設を知る 購⼊者 リテラシー : ⾼ リテラシー : 低 同伴者 リテラシー : ⾼ リテラシー : 低 ネットで買う リアルで買う 分配する 分配する 分配される 施設を知る 施設を知る 認 知 分 配 ・・・・・・・ ・・・・・・・ 1〜2ヶ⽉の空⽩ 当⽇する⼈も… 分配される ⼊場する ⼊場する ⼊場する ⼊場する
13. STEP.6｜対応媒体を当てはめる ⼊場 購 ⼊ ネット出稿 TV出稿 購⼊者 リテラシー : ⾼ リテラシー : 低 同伴者 リテラシー : ⾼ リテラシー : 低 SNS⼝コミ 購⼊者の誘い WEBストア 券売機 WEBで分配 ( 印刷して分配 ) ⼿で分配 される ⼿で受取り ( 券売機 / 印刷 ) ⼿で分配する WEB受取り 認 知 分 配 WEBチケット 券売機 チケット WEBチケット 券売機/印刷 チケット ・・・・・・・ ・・・・・・・
14. 会場サイネージ (時間/価格) STEP.7｜連結要素・⾏動分岐 を整理 (※ざっくりイメージ) 例) 購⼊者 WEBサイト(販売) 認 知 (分配) アド出稿 記事出稿 検 索 サーチ エンジン TV出稿 SNS拡散 関連媒体 券売機 (販売) 現地スタッフ・インフォメーション ヘルプ 当⽇ (注意事項…etc) 未来⽇ 区分/枚数選択/決済 訪 問 購 ⼊ WEB チケット 表⽰ ( or 印刷 ) 対象選択 ⽅法選択 …etc ⼊場ガイド 購⼊完了 通知 ⼊場⽇前リマインドメール (利⽤) 会場付近 掲⽰物 ⼊場 ⼊場可能時間の アナウンス / 掲⽰ ⼊場列 ゲート ⽇時選択 チケット出⼒ ※ PC / SP
15. 体験設計が 正しいか検証
16. 会場サイネージ (時間/価格) STEP.8｜メインシナリオの合意形成 例) 購⼊者 WEBサイト(販売) 認 知 (分配) アド出稿 記事出稿 検 索 サーチ エンジン TV出稿 ⼝コミ 関連サイト / SNS 現地スタッフ・インフォメーション ヘルプ 当⽇ (注意事項…etc) 未来⽇ 区分/枚数選択/決済 訪 問 購 ⼊ WEB チケット 表⽰ ( or 印刷 ) 対象選択 ⽅法選択 …etc ⼊場ガイド 購⼊完了 ⼊場⽇前リマインドメール (利⽤) 会場付近 掲⽰物 ⼊場 ⼊場可能時間の アナウンス / 掲⽰ ⼊場列 ゲート ⽇時選択 チケット出⼒ 券売機 (販売)
17. STEP.9｜検証シナリオ(仮説)の 抽出・分解 WEBサイト(販売) 認 知 検 索 ⼝コミ ヘルプ 訪 問 購 ⼊ WEBチケット 表⽰ ⼊場ガイド 購⼊完了 ⼊場⽇前 リマインド メール (利⽤) ⼊場 ⼊場可能 時間の掲⽰ ゲート サーチ エンジン ⼊場列 1〜2ヶ⽉の空⽩ ❶ 認知から購⼊完了まで ❷ 前⽇のチケット表⽰ ❸ 来園して⼊場
18. STEP.10｜検証の準備 ❶ 認知から購⼊完了まで プロトタイプA ❷ 前⽇のチケット表⽰ プロトタイプB ❸ 来園して⼊場 合成イメージ写真 ライティングも本番並み UIも実サイトに近い精度 認 知 検 索 ⼊場 (利⽤) WEBサイト(販売) 実際の建物はまだ ないから想像で
19. STEP.11｜ユーザテスト実施 認 知 検 索 ⼊場 (利⽤) WEBサイト(販売) 「 券売機のUI・外形 / サイネージ / 出⼒チケット 」 もデザインしたので合わせてユーザテスト 擬似的な環境再現 来園して ⼊場できるか？ ⽇を開けて リテラシー別 (⽇本語) 続き 体験設計に ⽳がないか？ ⺟集団 形成 類似商品の利⽤実態を”事前インタビュー” 国内常識への 依存はないか？ ⺟集団 形成 インバウンド対応 ( 英語 )
20. STEP.12｜結果を踏まえ優先順位つけて補強 認 知 検 索 ⼊場 (利⽤) WEBサイト(販売) どこに ある施設？ チケットの 種類の差は何？ パッと⾒で ワクワクしたい ! WEBチケットだけ？ 紙はないの？ チケットを どう使うんだろう？ もうそろそろ、 ⼊場⽇だっけ？ チケットを 会場でどう使うの？ どう会場に いくんだっけ？ もうそろそろ、 ⼊場⽇だっけ？ どんな ⼊場⼝？
22. STEP.13｜仕組みと⼈の連動が⼤事 WEB 訪問 購⼊ チケット表⽰ ヘルプ/アクセス ⼊場ゲート ⼊場⼿順ガイド 券売機 来園 / 確認 画⾯操作 スタッフ インフォ メーション カスタマーサポート 機材操作 リマインド 出⼒ ⼊場列 運営
23. 体験設計の 様々な使い道
24. 幅広い関係者 の 「こうあるべき」が 体験設計 で 明確 になる
25. リリース後 は 「さらに、こうあるべき」への 改善 に 役⽴つ
26. 体験設計 プロトタイピング 開発の ⾼速化 KPIの 設計 円滑な 意思決定 運営との 連動 ・オペレーションの効率化 ・定性情報に基づいた改善⽴案 ・体験全体をいつでも俯瞰 ・「あるべき」を前提に議論 ・完成像を具体的に共有 ・開発者のUXへの意識醸成 ・KPIツリーの設計/ 計測⽅法の明確化 ・定量情報に基づいた改善⽴案 / 組織⽬標への転⽤ 現地での⾏動観察
27. この話は、またの機会に…
28. 最後に⼀つ
29. UI/UXデザイナー育成を強化中 詳しくは… 【トーク内容】 【トーク内容】 DMMデザインリード2⼈が 語るこれからの サービスデザイナー デザイナーの ⼈材育成と組織連携 https://inside.dmm.com/entry/2021/07/16/yondemasu11 https://inside.dmm.com/entry/2021/03/11/devlead-3