今やWebデザイン業界のスタンダードとなっているレスポンシブデザインですが少し前は違いました。
今日は2014年に航空業界初のレスポンシブデザインを取り入れたVirgin AmericaのWebサイトについて、デザインからローンチに至るまでを詳しく見ていきたいと思います。
過去数年で最も影響力のあるWebプロジェクトのひとつとなったこのプロジェクトの、成功までの軌跡を細かく見ていきましょう。
Virgin Americaはプロジェクトのパートナーとして当時、従業員わずか10人にも満たない新しい会社だったWork & Coを起用しました。彼らとのコラボレーションは、果たしてどのような結果となったのでしょうか？
結果的には、航空業界初のレスポンシブWebサイトとして、Work & Coの急激な成長へと導きました。今やVirgin Americaの案件には、100人以上の人々が関わっています。
Photo credit: Work & Co
私たちはWork & Coの共同設立者であるFelipe Memoria氏と、このプロジェクトについて話をお聞きしました。この記事ではコラボレーションを重視したデザインが、どのようにVirgin Americaの株式上場の成功を後押ししたのかについて迫ります。
特定ユーザーのニーズをデザインする
プロジェクトを一貫して、ひとつの明確なゴールがすべてを導きました。それは「より多くのチケットを売ること」です。
「プロジェクトを通してうまくいったのは、ビジネスの視点だけでなくユーザー側の視点から最も重要なことにフォーカスすることができたことです 」 共同設立者のMemoria氏は言います。
極端なケース（とそれに関する全てのフロー）に基づいてデザインするということではなく、Virgin Americaチームと協働しているWork & Coチームは「往復チケットを購入する単独の旅行者」という特定のユースケースに着目しました。もしこのユースケースにおけるプロセスを正しくデザインすることができれば、プロジェクトを開始するにあたって他のケースに対しても確かな基準をもつことができるだろうと考えたのです。
Photo credit: Virgin America
さらに、世の中がモバイルファーストに向かっていく流れとは対照的に、「エクストリームファースト」というアプローチ方法がプロジェクト全体に影響を与えました。これはモバイルからデザインを始めていくのではなく、特定のユースケースをベースにモバイルとデスクトップ両方のデザインに同時におこない、中間の大きさの画面のデザインへとまとめていくという方法です。
１. 明確なゴールを設定する
このプロジェクトの目的は、Virgin AmericaのWebサイトを、最近の旅行ニーズや顧客行動に対応できるようなデジタルプラットフォームへと変化させることでした。収益とWebサイトの分析に基づき、Work & Coはコンバージョン率やサイトの再訪問数、モバイルのエンゲージメントを改善するため、予約に関するUXの見直しを優先的におこなうことにしました。
「航空会社の予約フローは、ひとつの大きなフォームであると考えることができます。私たちは何かほかとは違うものを作り出そうとデザインをしました。フォームをただ改善するだけではなく、 実際に楽しんで使えるようなものにしたのです。このような包括的な視点でプロジェクトを考えることで、私たちはすぐデザインに取りかかることができました」
２. 協働的なコンセプトづくりをする
全体を通してこのプロジェクトは、協調的で幅広い専門分野の人を巻き込むようなアプローチで進められました。
Work & Coはそもそも上記のコンセプトのように、全員がそれぞれ固有の強みを持っていても、チームによっては別の役割を提供することもできるようなエージェントとして設立されました。例えば、誰かは分析のプロであると同時に素晴らしいプロジェクトマネージャーかもしれません。実際、Work & Coにアカウントマネージャーはいません。全員が技術的なスキルとプロジェクトマネジメントやクライアントの期待にこたえるために必要なソフトスキルを持っているのです。
Photo credit: Work & Co
Virgin Americaのプロジェクトでは、３人のプロダクトストラテジスト（戦略家）、３人のデザイナー、そして４人の開発者が、Virgin Americaの経営幹部レベルのステークホルダーたちと協力しながら仕事を進めました。クライアントとの単なる共同作業を超えて、法律やオペレーションなどの組織の重要な部分を、デザインプロセスに持ち込んだのです。これは、アイデアを確実に実現することに役立ちました。
コンセプトを決めるフェーズでは、核となる「往復チケットを購入する単独の旅行者」のシナリオを読み解いていくことに大半の時間を費しました。２週間もの間、様々なバックグラウンドを持った３人のデザイナーが、典型的なプロジェクトの分業とは対照的であるこの問題に取り組みました。例えば、一人のデザイナーは、カラーとグリッドの観点から考えるクラシックUIデザイナーであり、もう一人は、プロトタイプを作ることのできる新しい世代よりのハイブリッドデザイナー兼開発者でした。
「コンセプトに関して深く考えることが、プロジェクトに大きな差を生んだのです」とMemoria氏は言います。「そのことが、さらに優れたものをデザインするための機会を与えてくれたのです。 横道にそれたユースケースに着目する理由はありません。ただひとつ主となるユーザー体験において、繰り返しテストしていくことで、私たちはもっと純粋なアイデアを考え出すことができます」
チームが正式に集まる機会は一日に一度でした。時折、問題を解決していくためにデザインを切り替えることもあります。実際クライアントと一緒に作業に集中して取り組めるよう、チームはVirgin Americaの本社の会議室で働きました。特にMemoria氏は常にそこにいれるように家族と一緒にニューヨークからサンフランシスコのベイエリアへ引っ越してきたそうです。
チームメンバーはみんな旅行好きで、彼ら自身Virgin Americaの顧客だったので、クライアントによって提供された既存の顧客リサーチからすぐイメージを思い描くことができました。集められたリサーチ結果から、誰もが本当にしたいことがフライト予約であることに気づき、それに既に着目していた彼らがまさに真の問題を解決していることを裏付けたのでした。
ワークショップと共同デザインに着手してからちょうど２週間後、チームはデザイン戦略を幹部ステークホルダーに発表する準備が整いました。
３. システムをデザインする
初めてのデザインレビューで、 チームは２つの大まかなワイヤーフレームを提案しました。静的なモックアップと詳細なプロトタイプです。
一日の終わりには、 Work & Coのデザイナー、開発者、そしてクライアントは、最もシンプルでパワフルなユーザー体験を作り出せそうなデザインに合意し、団結することができました。
シングルスクロール体験
チームにとって驚きだったのは、クライアントの心をつかんだのが、最も精度の低いワイヤーフレームだったことです。スムーズなスクロールのフローと、購入とチェックアウトのプロセスが一直線であったことが評価されました。 ワイヤーフレームの精度が欠けている一方で、上から下までの全体的な動きとフローを重視してサイトを構築していくことを示していたことが良かったのです。
Memoria氏は続けて言いました。 「私たちはこの大きなインサイトを基に、のちのアイデアをまとめたり、要所要所の判断をすることができたのです」
状況に合わせた選択
目の前にある一つのフローにフォーカスすることで、彼らはVirgin AmericaのWebサイトを唯一無二なものにするための鍵となる部分を見つけることができました。この航空会社は限られた数の都市間で運行しているため、大きくてややこしいプルダウンメニューは必要ありませんでした。そのかわりに位置情報サービスを使い、ユーザーに関連しそうなルートを提案するようにしました（もちろん、全都市見るオプションもあります）。
Photo credit: Work & Co
「UXデザインの定説として、物事をもっと見せようとすればするほど、ユーザーももっと見たりクリックしたりする、というのがあります。Virgin Americaのサイトでは、すぐに旅行の選択肢を見せることで、全く新しいタイプのレスポンシブなナビゲーションへと導くことができたのです。「戻る」ボタンを押し続けたり、再読み込みを強要されるような旧世代のフローではなく、ページ内の簡単なスクロールによってスムーズに遷移できるようにすることで、このフローの常識を覆したのです。」
楽しく一貫性のあるトーン
ビジュアル的観点から、都市景観の写真素材ではなく、ちょっと遊び心のあるイラストが使われています。これはVirgin Americaの遊び心のあるブランディングに完全に一致しています。
例えば、行き先は地図上でドットでなく、アイコンによって表現されています。
Photo credit: Buildによるイラスト
また、愉快なビジュアルとマッチするように、まるで会話をしているかのようなフィードバックをユーザーに返すようにするため、カジュアルな雰囲気のマイクロコピーを使用しました。
編注：マイクロコピーとはフォームのラベルやボタンの文字などのWebサイトにおける説明テキストのことを指します。（上記のリンクの説明より）
例えば、出発と到着時刻を選択するときには、以下のメッセージがスクリーンの上に表示されます。
出発時刻を選択した後
「いいですね、では帰りの日程を選びましょう」
到着時刻を選択した後
「4月7日〜15日ですね、いい感じです」
オフライン時とのギャップを埋める
サイト利用後のカスタマーエクスペリエンスを確実なものにするために、チームは搭乗券の印刷体験についても考慮しました。最終的にすぐ無くしてしまうか、使いづらい搭乗券のプリントアウトは、新しいWebサイトで期待されるものとは確実に矛盾しているのです。
ユーザーリサーチ（とチーム自身の体験）に基づいて、ズボンの後ろのポケットの中に簡単に入れられるよう、４分割された搭乗券をデザインしました。このプリントアウトされた搭乗券のデザインは、新しいスタンダードとなっています。
Photo credit: Work & Co
理解しやすいフォーム要素
ユーザーへの理解をより深めていくため、コンテンツを分けて取り出していくというUXデザインの手法をとりました。
例として、UIをもっと刺激的で便利なものにするため、ビュー全体をカレンダー風にし、細かい記入事項はフローの後半に回しました。
Photo credit: Work & Co
「私たちは、パワーポイントのプレゼンの簡潔さにインスパイアされたのです。スライドごとのポイントを一つに絞って見せることが、プレゼンをわかりやすくするように、フォームそれぞれを部分的に分けることが、目的をクリアにし、理解しやすくさせているのです」
最終的にマルチデバイス対応した一つのデザインに辿りつくまで６週間試行錯誤し、予約フローのデザインは完成しました。その間、プロトタイプを開発し続け、４つのユーザーテストをし、計100人がそのテストに参加しました。
４. 開発
おそらくチームが直面した一番大きな課題は、この解決策の裏側にあるテクノロジーでしょう。これが 2014年最初のレスポンシブな航空会社のWebサイトだったということを考えると、このデザインを世に出すには入念な検討と実装が必要でした。
「すべての段階において開発者たちと協働していなければ、私たちはこのようなWebサイトを生み出すことはできなかったでしょう。今回、技術チームも初めから参加していたおかげで、実際にどういった技術が必要とされているのかを彼らは理解していました。ともに協力し合って、私たちは平常時だけではなく、例外の場面に直面した時でも、コンセプトが確かに機能するようにしなくてはなりませんでした。しかし、大変なのは良いことですし、これらを平行して取り組むことで、オリジナルでレスポンシブなサイトを思いつくことができたのです」
この後、Forrester case studyの中で説明されているように、段階的なβ版の公開へと続きます：
・ステップ１ – デザインを社外の友人などを中心にドッグフーディング（主に身内間で行う平常的なユーザーテスト）する。
・ステップ２ – 一握りのVirgin Americaの顧客に対してデザインのテストを行う。
・ステップ３ – Virgin Americaの顧客を更に巻き込み、メディアや他企業のリーダーなどにも協力を仰ぎ、テストを行う。
段階的なテストスケジュールによって、新しいデザインへの弾みをつけただけでなく、極端なケースや機能性のギャップにも適応していくことができたのです。
β版をもとに新しいデザインを繰り返した後、新たに考案されたVirginAmerica.comはリリースされました。そして半期が過ぎて、Virgin Americaは新規上場を発表しました。
リニューアルされたWebサイトは、以下のように当初の業績目標を大きく超えました：
・当初目標よりも10％以上のコンバージョン率
・Web関連のサポートコール数が当初目標よりも20%減少
・表示までに２秒という、最も読み込みの早い航空会社Webサイト
スタンダードであり続けること
このWebサイトは最終的に、タイムズスクエアの広告から空港での露出まで、オンラインとオフラインの両方において、多くのVirgin America全体のイメージに影響を与えるものとなりました。
サイトがリリースされて以来、Webサイトは大絶賛され、UXデザイン関連の賞を勝ち取り、そして会社に投資利益をもたらしたのです。
Work & CoのVirgin Americaプロジェクトは、以下のことがもたらした偉大な成果事例です：
・エクストリームファーストの観点からアプローチし、小さなモバイルと大きなデスクトップの表示域のデザインを同時に行い、残りをフローを落としこむ。
・デザイナー、開発者、クライアントが、一つのチームとして密接に協力する。
・ひとつの価値の高いユーザーシナリオ（往復チケットを購入する単独の旅行者）をデザインすることにフォーカスする。
