チケット販売サイトの全面リニューアル

Overview

ローソンエンタテインメントが展開しているローソンチケット（略称：ローチケ）の全面リニューアルを担当しました。目標はユーザーのニーズを徹底的に分析して、最適のUI/UXを提供すること、Design System及びUIアセットの構築で今後のUX改善の効率性を上げる事でした。

ローソンチケットの集客ページである「興業まとめ」ページのUX改善を実施するためのプロジェクトに取り組みました。目標は、ユーザーの購入までのフローをより正確に追跡し、「興業まとめ」ページに必要な要素、適切なUIをユーザーに提供することでした。
私の役割はユーザーシナリオを検討し、どのような状況でもユーザーが必要としているソリューションを考案することでした。

My role

Information architect
User research
UI design
User test

BACKGROUND

全面リニューアルを決めるまで

ローソンチケットはエンタテインメントで日本を元気にするという企業理念の元で様々な取り組み、サービスを展開し、長年に渡って業界をリードしてきました。現在もチケット販売業界の激しい競争の中で、売上額No1の地位を数年間維持しています。

しかし、ローソンチケットのECサイトは時代的な変化、ユーザーのニーズをスピーディーに対応するには、下記の大きな問題がありました。

・UIの統一性・コンセプトの不在
・情報設計・コンテンツの構造の不在

時代的に遅れたUIは煩雑で使いづらく、一貫性のないコンテンツ構造はユーザーの混乱をどんどん増加しているだけでした。この状況を迅速に打開できる方法について社内の関係者と話し合って得られた結論は

“解決策：全面リニューアル”

でした。

リニューアルのためには、幅広いジャンルの商品・コンテンツを論理的に表現出来る新しいデザインシステムを作る必要がありました。また、ローソンチケットブランドのアイデンティティを生かせるモダンで魅力的なデザインを作ることも重要なタスクの一つでした。

DESIGN PROCESS

どのように進めて行くのか

数多いビジネス要件、技術的な制約、複雑な社内調整の課題がある場合、体系的なアプローチは非常に重要だと思います。関係部署とビジネスビジョンを定義した後はデザイン思考のダブルダイヤモンドプロセスにをベースに「discover(探索)」フェーズに移行しました。

Double diamond process

STEP1 - Discover(探索)

どの問題を解決するか、何に重要視して解決策を作るのかは、全面リニューアルのような大きなプロジェクトでは成功を左右するポイントだと思います。今までの経験や感覚で何が問題で解決策なのか分かるよう感じがしたとしても、客観的な立場でユーザーのニーズを考えないと本当の問題は発見できないと思います。

ヒューリスティック評価表の一部

そのため、ユーザーインタビュー、ヒューリスティック評価、様々タイプのペルソナを利用したユーザーニーズの考察などの方法でユーザーのニーズとサイトの課題をリストアップしました。

STEP2 - Define(定義)

しかし、既存の問題を全てリストアップしたとしても、それはあくまで「本当の問題」を見つけ出すためのステップに過ぎないと思います。解決すべき問題を定義するためには、ユーザージャーニーを深く理解して、様々なシナリオを考える必要がありました。

“Requirements cannot be “gathered” from your stakeholders like Easter eggs
— they must be defined, through research and scenarios.”

Alan Cooper - Father of Visual Basic

そのため、問題の収集時に得られたインサイトとサイト分析結果をベースに様々なシナリオに対応できるように基本的なサイトの構成を見直しました。サイトの構成はシンプルさを維持することに気をつけながら、既存のサイト構成をベースに必要なページ・機能の追加、不要なページと要素を削除した案を作成しました。

サイトのフロー図

サイトの基本的な構成が決まった後は、各ページ単位でユーザーのニーズが最適に達成できる方法のアイデア出しに着手しました。

STEP3 - Develop(展開)

アイデア出しのステップでは、MVP（実用最小限の製品）にフォーカスするように注意しながら、できるだけ多数のアイデアを集めるようにしました。

ページ構成案の例

構成案のアイデア出しで、先に試してみるアイデアを決めた後は重要な目標でもあったUIシステム制作に入りました。
しかし、UIデザインに必要なローソンチケットのコンセプトも存在していませんでしたので、サイトのコンセプトから決めておく必要がありました。

コンセプトを利用したカラー抽出

また、既存のUIシステムはありませでしたので、新しいUIシステムを作る必要がありました。しかし、サイトのコンセプトを考えた独自でUIシステムを０から構築するにはかなりの時間とリソースが必要になるため、公開されているUI KITをカスタマイズする方法を選択しました。候補のUI KITはIBMのCarbon、MicrosoftのFabricなど様々種類がありましたが、汎用性の側面でGoogle Material Designを採択し、継続的に使っていくためのUIアセットを制作しました。