アーセナルFCの公式Eコマースサイトのリニューアルによりもたらされた結果は驚くべきものだった。
SAP Hybris Commerceと提携した小売り販売サイトのリデザイン後、モバイルでのトランザクションは86%増加し、売上は42%増加、ページのロード時間は57%減少した。
ユーロ、米国ドル、オーストラリアドルでの支払いを可能にしたことで、イギリス外での売上は48%増加した。これは実に素晴らしい結果であると言える。一体どのような変更を加えたのかについては、以下の二つの画像を比べられたい。
今回のリデザインにより、以下のような変更が加えられた。
- 主な商品と画像に注目したクリアなデザイン
- 主なカスタマージャーニーの更なる可視化。シャツのカスタマイズなど
- シャツのカスタマイズにおけるレンダリングの改善
- モバイルデバイスを第一に考えた、シャツのカスタマイズの改善
- モバイルデバイスを第一に考えたデザインに基づく、会計画面のリデザイン
この記事では、上記5つの項目のうち、特に最後の2つに注目したい。モバイルデバイスによるトランザクションが86%増加したというのは、やはり驚異的だ。そして何事もライバルが居た方が盛り上がるため、ここではホットスパーズ（私の地元のチームだ）のモバイルUXと比較してみたい。
公平な評価を行っていること確認するため、またプレミアリーグのデジタル化について詳しく知るには、以下を記事を参照されたい。（英字）
まずはトップページ。ヒーローイメージが掲載されており、新商品の購入を促している。いずれも現実のスーパーヒーローと言える選手で、ついつい『Shop now（今すぐ買う）』を押してしまいそうになる。
商品ページも分かりやすいデザインで、シャツのカスタマイズが可能とある。高額商品の購入を促すようなダークな戦術が用いられていることにも気付くだろう。
（参考：ダークな戦術についての解説記事はこちら [英字]）
シャツに名前を入れたり番号を入れたりするのもとてもシンプルで、選択するとそれがすぐに商品画像に反映される。ここまでで革新的なところは見当たらないが、非常に使いやすくユーザーフレンドリーなUXだと言える。
一つ苦言を呈するとすれば、シャツの値段が55ポンドから71ポンドに跳ね上がる場合があるにも関わらず、その際に警告が出ないことだ。カスタマイズした場合の金額はCTAボタン（『スリーブパッチを追加する』）の下に出てしまうため、このCTAボタンに目を向けなかったユーザーは変更後の金額を見落としてしまう可能性がある。これに気付かなかったユーザーは、会計の際に値段の違いに気付いて足を止めてしまうかもしれない。
ちなみに、スリーブパッチは追加8ポンドだった。
評判通りというべきか、会計画面はとてもシンプルでベストプラクティスと言えるあらゆる要素を兼ね揃えていた。進行度を表すバーのおかげで購入完了まで時間がかからないことが分かりやすかったし、ポストコード（郵便番号）の検索ツールにより個人情報の入力もシンプルになっていた。また、PayPalでの支払いも可能だった。
注：ベストプラクティスの要素については以下を参照のこと。（英字）
標準的な発送費用は5ポンドとなっていたが、多くの小売業者が無料発送やクリックアンドコレクト（訳注：場所を指定して荷物を受け取ること）のオプションを提供している昨今、これは少し高額な気もする。私の場合、総合的な金額は83.95ポンドとなった。
カスタマイズしたアーセナルのシャツを購入するまでのモバイルデバイスでのカスタマージャーニーは、全体としては非常にクイックで使いやすいものだった。商品ページから支払いの完了までの道程は滑らかで直感的であり、それぞれの画面で求められる入力なども最低限のものになっていた。
会計のプロセスは一画面にまとめた方が良いのではないかという意見もあるが、進行度を示すバーがあり、それぞれのページが簡潔にまとまっていれば、一つにまとまっていなくても良いと私は思う。
まずはホットスパーズにモバイルサイトがあって一安心だ。ここで躓いていては話にならない。
トップページを見てみるとヒーローイメージがあり、チャンピオンリーグに関連した商品をプロモーションしている。シャツの商品ページまでは3クリック、シャツの値段は60ポンドだった。
できるだけ客観的な意見に努めると、商品ページについてはそれほど差が無いように思う。
どちらのページの商品画像も素晴らしく、スパーズは商品レビューを掲載している分上手という印象だが、ドロップダウンの代わりにサイズを選択するボタンを配置した点についてはアーセナルの方が好ましい。シャツのカスタマイズを促すという面について見てみると、アーセナルのCTAの方が幾分か効果的のようだ。
（参考：商品レビューの効果についての解説記事はこちら [英字]）
ここでスパーズのシャツをカスタマイズしようとする場合、オプションは新たな画面でなくポップアップで表示される。そこに名前や番号を入れると、商品の画像もそれに応じて変化する。
スパーズのカスタマイズでは、スパーズレタリングとプレミアリーグレタリングの2つの種類のフォントを選べるようになっていた。ただ、私には違いが分からず、商品ページにその違いが反映されていたのかどうかも分からない。またその他、チャンピオンリーグのバッジのオプションもあった。
スパーズは合計金額を分かりやすい位置に表示している点で好感が持てた。しかし別の問題があったのである。
カスタマイズ画面の右下にハートマークがある。これをクリックしたところ、ただ商品のカスタマイズデータだけが白紙に戻り、特にこれといってそれ以外の変化がなかったのである。
また、青色の『Confirm（確認）』ボタンを押すと、特にメッセージもなく、シャツは即座に買い物カゴに追加された。しかし商品ページから移動するわけでもなく、そのページで見るとカスタマイズした結果の金額はアップデートされないままになっていたのである。
更に悪いことに、「確認を終えたし買い物カゴに商品を追加しよう」と『Add to Bag』を押すと、商品がダブって追加されてしまったのである。チェックアウトの際に商品を個別に削除することはできず、両方を購入するか両方の購入を諦める他ない。この時は実際に買うつもりはなかったが、それでもこの仕様にはイライラさせられた。
会計のプロセス自体は非常にスムーズだった。全てが一つのページで済んでいたし、進行度を示すバーも確認できた。
会計全般に関してはほぼ差は無かったと言えるが、ホットスパーズは最後の最後で躓き、結果としてアーセナルに軍配が上がったと言える（この点は実際のゲームを彷彿とさせるものがある）。
商品ページを見ると、スパーズの場合はカスタマイズした商品が買い物カゴに追加されていたかどうかが分かりにくく、商品ページも価格が更新されないままだった。これにより買い手は不安を覚え、それ以外の点では申し分ない買い物体験をそれだけで損なうことになっているのである。
一方アーセナルのモバイルページを見てみると、ほとんど悩むことなく直感的に操作が可能で、唯一の私の不満と言えばシャツのカスタマイズを行った際にその追加金額が明確で無かったという点くらいだ。これのせいで購入を止めてしまう人もいるかもしれない。
（参考：購入を止めてしまう理由についての解説記事はこちら ）
全体としては、今回のユーザーテスト対決はアーセナルの勝利である。その他このトピックについて詳しく知りたい方は、以下のページを参考にすると良いかもしれない。（英字）
- ライター紹介
Econsultancy
Econsultancyは100万人以上の読者を誇るデジタルマーケティング関連の大手ブログサイトです。
ブログの他にEconsultancyは「Festival of Marketing」や「Digital Awards」全世界100以上のイベント・セミナーを開催しています。Econsultancyサイトには記事、リサーチレポート、ケーススタディ等の充実したデジタルマーケティング資料が豊富で、購読者はすでに25万人を超えているようです。
https://econsultancy.com
