失敗上等！世にも奇妙な「旅行会社での UX デザイン 裏話」

DevLove 甲子園2014/8/23( 土 ) 　和田あずみ（ @azumi0812 ）

自己紹介和田あずみ株式会社エアーリンク編集グループ　 web ディレクター

仕事：DeNA トラベル（旧スカイゲート）のUI 設計と、 PDCA ぐるぐるまわすお仕事してます。

@azumi0812

（その前は某 web 制作会社で web ディレクターやってました。 EC が好き。）

・趣味はスティールパン演奏（打楽器演奏）・旅したことがある国

タイ、バングラデシュ、チェコ、ドイツ、フランス、韓国、アメリカ、バルバドス、トリニダードトバゴ、台湾

2014 年産業技術大学院大学　人間中心設計履修証明プログラムでお勉強中。

• エアーリンク（ DeNA トラベル）について

1979年 7月創業　会員制旅行会社

株式会社ディー エヌ エー（･ ･ DeNA ）の戦略子会社として、インターネットによる旅行予約・販売が中心に。

話すこと→きれいごとじゃない、UI デザイン、 UX デザインの現場ドロドロ話

• 第 1 話：鳴りやまない電話• 第 2 話：工数もない　金もない• 第 3 話：無限増殖する注意文言やバナー

達• 最終話：命運が分かれた双子の UI

どろどろどろ

第 1 話：鳴りやまない電話

デザインがんばったらおもいっきり裏目にでたよ！

ドヤ顔で UI 改修した

• 「モバイルサイトでの電話問い合わせを

増やしたい！どうにかして！」

• 人の画像＋案内の電話番号を目に入りや

すく、電話かけやすいようにデザイン

• 掲載箇所をページ上部に上げた

• トップページ、検索結果等色々埋めた 目立つ！電話を

かけやすく

どうなったか

＿人人人人人人人人人人人人人人＿＞　カスタマーセンター大混乱　＜￣ Y^Y^Y^Y^Y^Y^Y^Y^Y^Y ￣

カスタマーセンター大混乱のワケ

• たしかに電話はかけやすくなった

• その結果、モバイルサイトを見るのがめんどくさいと思われる

ユーザーがたくさん電話してきた（商品ページみてない人多数）

• 商品を案内するのに時間がかかるユーザー、

購入モチベーションが低いユーザーが多い

• 電話に出られるスタッフ、時間は限りがある

• お客様をたくさんまたせてしまう、放棄呼増える

• 放棄率大幅アップ、成約率ダウン…

ドヤ顔で　実装したら　ド迷惑

どうすりゃええねん

第 2 話：工数もない　金もない

ついでに権力もないあるのはやる気だけ♪

スマホサイト開発に携わるようになった• モバイルサイトでの失敗で

自分の UI のクソさを思い知った

• スマホサイトの UI 設計を任せられるが CVR は PC の半分以下

• 思い悩む日々

そんなとき上司がふと一言

失敗してへこんでるときに、鉄球のような次の”挑戦の機会”を平気で投げつけてくる-南場智子「不格好経営」 P288 光森さんの手紙より

「ユーザーテストやってみたら」

・自慢じゃないけど、ユーザーテストやったことないです

・社内でだれもやったことある人いません

・でもお金と時間かかりそうな気がものすごくする

・なお、お金と時間はない

どうしろというんだ

どうにかするため勉強

※画像はアマゾンより流用

手作りユーザーテスト実施＠海外航空券＋ホテル　スマホサイト

リクルーティング理想：・対象ユーザーを一般募集・ 20代～ 30代・渡航回数 10回以上の旅行リテラシー高い社会人・スマホ利用頻度高い、決済経験相応にあり

現実：・法人グループの人ナンパ・ 20代～ 30代・開発現場から遠く、旅行リテラシー超高い・スマホ利用頻度高い、決済経験ほとんどなし

設備理想：・ユーザーテスト専用のアイトラッキング設備、モニタリングできる部屋

現実：・社内の会議室で、いすと机の配置を変えてなんとなくそれっぽく・・・

メンバー：現場のエンジニア 2人、 webディレクターの私　計 3名※もちろんみんなテストは初めて

ユーザーテストした結果

小さいけど組織の成功体験をつくることができた

• 想定もしてなかったユーザビリティ上の問題点が見つかった！

• エンジニアと web ディレクター、一緒にテストを見たことで、何が問題か肌で感じることができた

• 意思決定ぶれずリリースできた

自分の関わるサービス開発において手作りユーザーテスト→改修繰り返す

DeNA クリエイターブログでユーザーテストについての記事書いたりもしてました

http://creator.dena.jp/archives/28785541.html

失敗とか悩んだこと (1)

メルマガ登録フォームの登録率アップのため、手作りユーザーテスト

「登録したらシークレット航空券が見れる」というのがウリだった。しかし「次にどんな画面がくるかわからない」という思考発話をもとに、メルマガ登録だということをラベリングでわかりやすく明記。

肝心のウリ訴求弱まり登録 CVR激減、もとにもどすこととなったユーザビリティ問題解決と、ユーザーの期待をあおるマーケティング施策の間で悩む（わかりづらいけど成果でるし…もやもや…）

失敗とか悩んだこと (2)

ユーザーインタビューやテストとかなしに、いきなり UI書いてくれ案件がやっぱり多い

プロトタイプ何度も作って精度をあげるよう頑張る

リリース後、 CVR悪いわユーザーテストでは使われないわで愕然…

販促運用現場を知ってるので、必要そうな機能追加

開発がシャレにならないくらい遅延、現場疲弊

組織内で手作りユーザーテストをするのがだんだんあたりまえな雰囲気に。

ユーザーテスト→施策を繰り返しいい成果も、だめな成果も伝え続けた

施策根拠がわかりやすい！

この施策でもユーザーテストやってみたよ！

一人で考えるより成果が出そうな気がする

CVR がこのくらい改善したよ！

もしかして：だんだん組織にユーザーテストの

大事さが根付いてきた…？

第 3 話：無限増殖する注意文言やバナー達

気づいたらいつのまにか増える、注意文言やバナーの数々。

でもなかなか消せないんです…

ウ○コぶつけて成果上がる問題

あるあるあるあるあるあるあるあるあるあるあるあるあるあるあるあるあるあるあるある

注意文言やバナーで UI がカオス

バナー

バナー

注意文言

注意文言

注意文言

※フライトを見る　を開いたとき

• 実装した時は必然性があった

注意文言やバナーが消せない理由 1

注意文言

例：午前 0時以降に出発する深夜便について、搭乗日をお間違えになるケースが多く発生しています。例 )4月 8日 00： 30出発の場合、搭乗手続きは 4月 7日 22:30が目安です。

2010 年、羽田空港が国際化され 24 時間運用に（首都圏空港では初）

東京発で深夜早朝便利用者急増。しかし4月 8日 00:30発なのに、 4月 8日22:00頃空港へいく人が後をたたず

深夜便にのみだしたかったがかなわず注意文言を実装してそのままに。。

• 効果があると『された』部分最適化

注意文言やバナーが消せない理由 2

周遊航空券をオンラインで購入できるサービスがリリースされた

往復購入の導線と、周遊購入の導線は違うのでユーザーが周遊航空券購入にきがつかない※システム面での制約上やむなし

じゃあバナーをいれて誘導しよう、と誰かが決める（たぶん偉い人）

おいたことに満足され置き続けられる※効果について誰も説明できないものが多い※説明できる施策も一部ちゃんとある

• 政治的な理由

注意文言やバナーが消せない理由 3

企画ページあるから見てね！>>詳しくはこちら

タイアップ広告の企画がとおって広告費いただけることになったぞ！企画ページ作るぞ！

PV が多い検索結果にバナーをはれば企画ページへの誘導が増えるはず！

企画ページはユーザーの役にもたつはず。クライアントのためにもなる！

• ステークホルダーである各部署でおのおの、トラフィックの多い海外航空券検索結果に注意文言・バナーを追加していった

• どの追加も正当性があるとみなされた• カオス化する UI• 反比例して下がるユーザビリティと CVR• 編集グループでどうにかしてくれといわれた

その結果 DeNA トラベルでおきたこと

ユーザーテストやってみた結果 (1)

再検索に気づかずトップへ戻る

絞り込みの「この条件で絞り込む」ボタンをスルーし、下部の再検索するボタンをおしてしまう→入力した絞り込みがきいてない検索結果がでびびる

下部の絞り込みエリア全体に気づかない

土曜日出発だと金額高いので、金曜日出発になおそうとしたんだけど、日付変更の仕方がわからない・・・

（ユーザーはバナーをないものとしてスルーする・・・全然みてない）

ユーザーテストやってみた結果 (1)

＿人人人人人人人人人人＿＞　左カラム使えない　＜￣ Y^Y^Y^Y^Y^Y^Y^Y ￣

ユーザーテストやってみた結果 (2)

出発空港が、羽田空港か成田空港かの違いがこの時点ではわからない・・・羽田がいいのになあ。

（アイトラッキングしてみたけど、誰も注意文言読んでない）

到着空港が、台湾の桃園国際空港か、松山空港どっちなんだろう。街中の松山空港がいいんだけど。

ロンドン行くのに「乗換 1回」ならいいか（と次のページへいく）ソウルで乗り換えだけど、金浦国際空港→インチョン国際空港まで移動があるのを知って愕然

ユーザーテストやってみた結果 (2)

＿人人人人人人人人人人＿＞　フライト選びづらい　＜￣ Y^Y^Y^Y^Y^Y^Y^Y ￣

山積みの問題をどうやって解決してく？

でるわでるわ

46項目

マトリクス化（※ほんの一部）工数多め

工数少なめ

システムのロジック大幅見直し必要

・総額表示・往路 1便・復路 1便を 1セットにして見せる (例： HIS)等の選び方パターンを増やす

①

通常の開発で可能②・除外したい航空会社追加・なんで検索結果 0件になったかわかるようにする

③ABテストで検証する（その 2）

・フライト一覧の情報整理

④ABテストで検証する（その 1）

・左カラムの再検索（絞り込み）エリアの視認性・操作性改善

ユーザビリティ的課題

システム・商習慣もからんだ課題

とりくむ問題を決める工数多め

工数少なめ

システムのロジック大幅見直し必要

・総額表示・往路 1便・復路 1便を 1セットにして見せる (例： HIS)等の選び方パターンを増やす

①

通常の開発で可能②・除外したい航空会社追加・なんで検索結果 0件になったかわかるようにする

③ABテストで検証する（その 2）

・フライト一覧の情報整理

④ABテストで検証する（その 1）

・左カラムの再検索（絞り込み）エリアの視認性・操作性改善

今はここをやろう

ユーザビリティ的課題

システム・商習慣もからんだ課題

AB テスト　第 1回・再検索と絞り込み統合・バナー類は全部削った

注意文言は下部へ移動、日付ずらす補助機能を追加

AB テスト　第 1回結果CVR

101.07%アップ

AB テスト　第 2回注意文言はページ下部へ移動、デザインしなおし縦の長さ圧縮

フライト一覧に掲出する情報を見直し・出発 /到着空港・経由都市と空港コードを追加

AB テスト　第 2回結果CVR

103.31%アップ

無限増殖を食い止める合意形成

実装した時は必然性があった

効果があると『された』部分最適化

政治的な理由

今は、ほんとに影響ある？「位置を移動したら問い合わせってどうなったか教えてください」

トラフィックはどうなった？意図する画面への誘導がどうなったか調査項目に入れて調査→社内共有

ネゴシエーション頑張る時には上司にも調整をお願いし、代替案を他部署と一緒に考える

必要悪と共存するための代替案 UI バリエーション

③邪魔にならない画面遷移で入れる（購入完了等）④タブの中、ページ下部に専用エリアを作る　等…

①注意事項を入れる小窓＋ユーザー同意型

②必要な条件分岐で表示＋超わかりやすく解説

必要な条件分岐で表示＋超わかりやすく解説

悪霊退散！

最終話：命運が分かれた双子の UI

同じ画面なのになんで自分だけ成果がでないんだ…

海外ホテルサービスユーザーテスト実施→リニューアル

検索結果：一覧性向上、ユーザーが「ホテルを選ぶための情報」視認性向上 ( エリアや写真 )

海外ホテルサービスユーザーテスト実施→リニューアル

ホテル詳細：ユーザーが「このホテルだ！」と決め手になる情報の視認性向上 (写真、口コミ )

海外ホテルサービスユーザーテスト実施→リニューアル

トップページ

海外航空券検索結果

料金詳細確認

ホテル検索結果

ホテル詳細

航空券＋ホテル料金詳細確認

海外ホテルトップ

旅行者情報入力

ホテル検索結果

ホテル詳細

海外ホテルサービスユーザーテスト実施→リニューアル

トップページ

海外航空券検索結果

料金詳細確認

ホテル検索結果

ホテル詳細

航空券＋ホテル料金詳細確認

海外ホテルトップ

旅行者情報入力

ホテル検索結果

ホテル詳細

×CVR 　横ばい

○CVR 　アップ

同じ UI 改修なのに

UI に問題あると思ったんだけどなー

同じ画面なのになんで海外ホテルでは成果が出て航空券＋ホテルでは成果がでないんだろう

ユーザーインタビューで見えたもの(1)

海外航空券と海外ホテルを同時に買うユーザー

海外航空券を買った後海外ホテルのみ買うユーザー

・過去の経験から、航空券とホテル、同時に買うと安いと考えている

・泊まるホテルや、ホテルチェーンを決めている

・泊まるホテルは利便性重視、一定ランク・宿泊料金以上なら安心という目安を自分でもっているので即決できる

・過去の経験から、航空券とホテルは別のサイトで買うと安いと考えている

・ホテルに一緒にとまる相手の許可を得てから買いたい

・航空券を買ってから、のんびり自分の泊りたいホテルを探したい

ユーザーのもつ累積知識、状況がだいぶ違う

ユーザーインタビューで見えたもの(2)

海外航空券と海外ホテルを同時に買うユーザー

海外航空券を買った後海外ホテルのみ買うユーザー

DeNA トラベルで買わない理由

・一緒に買えるのをそういえば知らなかった…

・航空券だけなら買うけど、航空券とホテルのセットなら CM やってる○○（競合他社）のほうを見る

DeNA トラベルで買わない理由

・ホテルを選ぶ決め手に欠ける

・ホテルを売ってたこと自体知らなかった

・ホテルは雑誌でクーポンついてた○○（競合他社）がなんかよさそう

今回の改修でアプローチできたのはここだけかも

旅行 (オンライン予約 ) の UX タイムスパン

※ 図は「 UX 白書」　より引用　 http://site.hcdvalue.org/docs

サイトで予約 旅行準備中 旅行中

UI デザイン

商品企画・仕入れ

カスタマーセンター

マーケティング

商品企画仕入れ

カスタマーセンター

UI デザインだけで解決できない部分もたくさんある（ていうか圧倒的）

※ 図は「 UX 白書」　より引用　 http://site.hcdvalue.org/docs

サイトで予約 旅行準備中 旅行中

UI デザイン

商品企画・仕入れ

カスタマーセンター

マーケティング

商品企画仕入れ

カスタマーセンター

なにとぞ！まかせた！

一緒に考えよ！

旅行予約サイトがぶつかっている壁

マーケティング 商品企画・仕入れ

エンジニア・ UI デザイン カスタマーセンター

・ LCC （ローコストキャリア）をはじめとする低価格化の波・グローバルで進む価格競争・社会状況に左右される

・ユーザーが望む商品と、売りたい商品の差・営業利益は 1%以下・ GW や夏休み、閑散期の差

・外接が多く、構築が大変・データによって実現できる UI に大きな影響がでる・取り込み時期にサービスリリース必須

・どんなに細かいことでもユーザーが知っている状態が望ましいが、事象が細かすぎる・台風や事件発生時、カスタマーサポートが第一となる

もーーーー思い通りにならないことだらけ！！ ＼ (^o^)／

サービス運営＝ジャムセッション

観客の反応

メンバーの音

メンバーの動き

私の音はこれじゃーうおおー

ダンドリスト

・ユーザーインタビュー・テスト等デザインの定性分析

・アクセスログ解析等、デザインの定量分析

・分析を踏まえたうえでのデザイン

・合意形成プロセスづくり

UIデザインに関わる者にとっての「音」

思い通りにならない即興の奇妙さこそ、現場の楽しさ

ありがとうございました