teamLab チケットシステム

発券機で展示チケットを購入できるチームラボのチケットシステム
発券機の機種変更による発券機UIリニューアルプロジェクト

デザイン・チェック期間、リリース日

2024.1.9~5.20

2024.7.1 リリース

メンバー

UI制作チーム 11名

企画 1、デザイン 2(デザインチームリーダー、本人)、開発 8

担当業務

リサーチ、情報・WF設計、UI制作、デザイン仕様書作成、デザインチェック

teamLab チケットシステム メインビジュアル

発券機の機種変更と複合施設側の依頼による、全体的なフローおよびUIリニューアル

チームラボの発券機は複合施設に設置されており、現在開催中の展示を確認し、チケットを購入できる非対面型サービス機器です。
2024年より2つのアップデートが予定されており、それに伴う課題を設定し、スムーズなチケット購入体験を実現するためのリニューアル案を提案しました。

アップデート内容
  • 横型キオスク → 縦型キオスクへの機器変更
  • 複合施設側のアンケートと展示の追加
主な課題 全体的なフローとUIのリニューアル
旧型キオスクから新型キオスクへの機器変更 旧型キオスクから新型キオスクへの機器変更

複合施設側の要件およびユーザーリサーチを通じて、
既存UIに関するインサイト抽出

複合施設側の要件

1. 展示とチケット選択画面の分離

展示とチケットを1画面で選択していた構成から、展示の増加に伴い、展示選択とチケット選択の画面に分離

2. アンケート画面の追加

ユーザーの居住国および国籍を把握するためのアンケート画面を追加

ユーザーインタビュー

チームラボの発券機の利用経験があるプロジェクトメンバーを対象にインタビューを実施し、既存UIの課題を抽出しました。

インタビュー時期 2024年1月
インタビュー対象(氏名/年齢/国籍/職業)

ミヤザキ/40/日本/企画者

トウ/32/日本/エンジニア

1. チケット種類による情報過多と一貫性のない情報提供
「開催中の展示とチケット種類が1画面にすべて表示されていて見づらいです。また、名前が長いせいか、チケット情報の一部しか表示されていないものもありました。」既存のUIは、展示とチケットを同時に選択する構造で、各展示ごとのチケットを1画面ですべて表示している。
また、チケット種類が少ない場合は展示タイトルと価格情報が表示される一方で、チケット種類が多い場合は展示タイトルのみが表示される。
チケット種類が少ない場合と多い場合の比較 チケット種類が少ない場合と多い場合の比較
2. 画面単位で確認できない選択履歴
「ちゃんと選択しているか確認ができず不安でした。他のキオスクみたいに選択履歴が画面ごとに表示されてほしいです。」
既存のUIは選択履歴を画面単位で確認することができず、支払い方法選択画面で突然表示される。
画面単位で確認できない選択履歴と支払い画面での突然の表示 画面単位で確認できない選択履歴と支払い画面での突然の表示
3. 決済完了後に発生する不要な追加アクション
「支払い後、やっと終わったと思って発券を待っていたら、急に領収書ボタンが表示されました。後から気づきました。また、領収書を発行しようとしたらボタンが非活性になって押せませんでした。」
チケット発券中に突然表示される領収書発行ボタン チケット発券中に突然表示される領収書発行ボタン

実際に使用して発見した課題

ユーザーインタビューに加え、実際に使用してみることで課題を抽出しました。

適用されているクーポンの確認および変更不可
複数のクーポンが適用できるにもかかわらず、適用済みクーポンの一覧を確認することができない。
また、変更ではなく削除のみ可能なため、クーポンを変更したい場合は、適用したクーポンをすべて削除してから再入力する必要がある。
適用済みクーポンの確認とクーポン変更ができない問題 適用済みクーポンの確認とクーポン変更ができない問題

ポジティブな展示体験のための、親切なチケット購入ジャーニー

展示体験はチケット購入前から始まります。
ポジティブな体験を提供するため、利便性が高く親切なチケット購入ジャーニーに集中してリニューアルを行いました。

高い利便性のフローとUI

ミッションをもとに、複合施設側の要件と課題に対する解決策を提示しました。

1. 展示選択とチケット選択で画面を分離

展示は「何を観覧するか」、チケットは「どの条件で観覧するか」という異なる判断基準を求める。これに基づき、画面を展示選択とチケット選択に分け、1画面で判断すべき情報量を制限し、段階的に進められるようにした。また、各画面で提供する情報を最小限にし、一貫性を保った。

展示・チケット選択画面の分離、一貫した情報提供 展示・チケット選択画面の分離、一貫した情報提供
2. 選択履歴の追加

選択履歴を追加し、履歴領域と選択領域を明確に分けることで、ユーザーが選択履歴を一目で確認できるようにした。
また、各カテゴリの横に「変更」ボタンを設置し、該当画面へ遷移して内容を変更できるようにした。
選択履歴は最終的に1枚のチケットのように表現され、ユーザーがチケットを完成させていく過程を想起させた。

選択履歴と変更ボタンの追加、チケットを完成させていく過程を想起させるUI 選択履歴と変更ボタンの追加、チケットを完成させていく過程を想起させるUI
3. 決済画面の前に領収書発行およびモーダル(アンケート・同意)の表示

領収書発行のようにユーザーの操作が必要なモーダルを決済画面の前に表示した。
決済後は追加操作なしで待つだけで明細・領収書・チケット発券が完了するフローに改善し、利便性を向上させた。

4. クーポン入力・確認・変更の改善

クーポン入力画面で入力したクーポンの確認・削除ができるようにし、以前の画面にはクーポン変更ボタンを追加した。

クーポン入力・確認・変更の改善 クーポン入力・確認・変更の改善

単なるUI改善にとどまらず、
サポートを通じて親切なチケット購入ジャーニーへ

リリース後、現場にいるプロジェクトメンバーと複合施設のスタッフからフィードバックをもらいました。

全般的にユーザーの不便を一つひとつ解消することで、丁寧なサポートを受けながらクーポンを購入する体験へ変わったというフィードバックをもらいました。

今後はこのような改善の経験をもとに、本プロジェクトで対応しきれなかった障がい者や高齢者も対象に含め、バリアフリー(Barrier-Free) 機能を導入するなど、より多くのユーザーが快適に利用できるUIを構築していきたいと考えています。

振り返り

プロジェクトを振り返って

学び①

実際の利用環境に近い場所で無人端末を自ら操作したことで、複合施設に設置された無人端末はスマートフォンとは異なり、「空間」と「距離」を考慮したUI設計が重要であることを学びました。

例えば、

  • 無人端末とユーザーの距離が平均50〜70cmであるところを考慮し、重要な要素は画面の中央に配置する
  • 販売停止や点検中の画面を表示する際には、広い空間での移動の負担を減らすために遠くからでも目立つフォントサイズを使用する
など、実際の利用環境を意識しながら、UI設計を行いました。

空間と距離を考慮したUI設計例リスト 販売停止画面 本日販売終了画面 空間と距離を考慮したUI設計例リスト
販売停止画面 本日販売終了画面

学び②

「一般的に使われている手法」が必ずしも最適とは限らないことを学びました。

多くの無人端末のUIでは、機器の画像やイラストを使って利用方法を案内しており、当初はこのような方法が直感的であると考えていました。
しかし、大型の無人端末から50〜70cm離れた距離で画面を操作しながら、イラストが指している位置を探す行為が本当にユーザーにとって便利な方法なのかという疑問を持ちました。

本プロジェクトの無人端末はすべて同じサイズと位置に、決済端末、QRコードリーダー、発行口が設置されているため、画像やイラストで案内する方法よりも、直接その位置を指す表現の方が、より素早い認知と行動につながると判断しました。
そのため、プロジェクト終了後にUIを改善し、デザインチームのメンバー3名に比較検証を行った結果、改善案の方がより直感的であるという評価を得ることができました。

今後は既存の慣習にとらわれず、ユーザーと利用環境に適しているかを常に検討しながらデザインに取り組んでいきたいと考えています。