学ぶアイコン学ぶ > UX CASE STUDIES -海外編-

Uberのライバル「Lyft」のリニューアルにおけるUX改善

Jessie Chen

この記事はuxdesign.ccからの翻訳転載です。配信元または著者の許可を得て配信しています。

Lyft Re-design Case Study

Lyftは、米国でサービス展開しているオンライン配車アプリです。Lyftは日本にはまだ上陸していませんが、米国ではUberのライバルとして注目を集めてきました。今回はサンフランシスコのUI/UXデザイナーのJessie Chen氏が、ワークショップやオンライン資料をもとにLyftのリニューアルについて迫ります。

Image from lyft.com

去る5月17日、私はDesign Guru Summitに参加し、LyftのUX&プロダクトデザインの最高責任者であるFrank Yoo氏が行った、Lyftのリニューアルについての講演を聞きました。また、その9日後、今度はData and Design Tech TalkでLyftのプロダクトデザイナーであるVicki Tan氏から、彼女のチームのA/Bテストの方法や、UXの課題に聞くことができました。

そこで学んだことについて詳細な情報共有を行うために、私はさらにLyftのリニューアルに関してより詳細な調査を行い、このケーススタディを作成しました。

Photo of me presenting my takeaways at work

社内でこのケーススタディを共有している様子です

Lyftのデザイン原則

Lyftはデザイン原則をピラミッド型で定義するために、マズローの欲求5段階説を用いています。私は、Lyftがデザイン原則それぞれの重要度を示すために、このような心理学と融和させているところにとても興味がありました。

A photo of Lyft’s design principles, taken at the workshop

Lyftのデザイン原則に関するスライド

デザイナーである私は、デザイン決定において皆のアイデアが一致しない場面によく遭遇します。基本となるデザイン原則を抜きにして判断を下すことは非常に難しいことです。そこで、私は同僚のKlara Pelcl氏からの後押しもあり、経営層を説得しデザインチームの中で核となるようなデザイン原則をJules Cheung氏と協力しながら定めました。

私たちはブレインストーミングを行い、6つの原理を作り出しました。それは、ユーザーを知ること、明確さ、一貫性、効率、協調、そして、美しさです。Lyftのデザイン原則の図が、 実際にそれを適用するために何ができるのかを考えるきっかけとなったのです。

Lyftの課題

UXの課題

Lyftがアプリをデザインしているとき、どんなUXの課題に直面しているのか知りたいと思っていました。私は幸いにもYoo氏が行ったオンラインセミナーの記事から、Lyftがどうやって課題を対処しているかについての有益な情報を見つけることができ、そこで紹介されている同じピラミッド型の手法を使ってUXの課題に取り組むことができました。以下は、Nectar Designの要約です:

• ユーザビリティ  —  切実なユーザーの問題を解決しなくてはならない 

š• 信頼性(Reliability) — 全てがシームレスに機能し、できる限り透明なものでなくてはならない。(例: Lyftの乗車時間やコストの表示)

• 差別化 (Differentiate) —  視覚的でインタラクティブな面白いものでなくてはならない。(例:Lyftの光るボタンやインタラクティブな設定画面など)

Image from Nectar Design

出典:Nectar Design

Lyftリニューアルの理由

オンラインセミナーでYoo氏は、Lyftアプリをリニューアルした理由について話していたのですが、それこそ私が個人的に一番聞きたかったことでもありました。Nectar Designのおかげで知ることができたその理由とは:

• リクエストされたドライバーに関する説明がš少ない
• š価格や到着予定時間などの情報に透明性がない
• 車の向かっている方向がわからない
• š色彩に乏しい
• オプションパネルが不適切に配置されている
• 「配車リクエスト(Request Lyft)」のボタンが、初めてLyftを使うユーザーにとってはわかりづらい

Images from Nectar Design, I added title before and after to show comparison

出典:Nectar Design

Lyftリニューアルの成果

さて、Lyftのリニューアルがどんな結果を残したのか知りたいでしょう。全てはお伝えしきれませんが、ここでは私が知る限りのことを共有したいと思います。

1. 透明性と安全性の強化

システムがユーザーとドライバーをマッチングした後、ユーザーにとって必要な情報  — ドライバーの名前、車の色、モデルなど — がわかるようになりました。 重要なのは、ナンバープレートを表示することによって、早く車を見つけることができ、リクエストしたドライバーであることがわかるようになったことです。

Image on the left is from pdxlyft, image on the right is a screenshot from my Lyft app

左出典:pdxlyft

2. プライマリーカラーのより効果的な使用

Lyftはホットピンクをプライマリーカラーとし、紫をセカンダリーカラーとして使っています。ワークショップの中でYoo氏は、ピンクの使い方を制限し、本当に重要な部分にのみ使用することにしたと話していました。 ピンク色は、企業ロゴ、そして配車リクエストボタン、目的地ピン、プロファイルのメニューの“Free Rides”などのユーザーの行動を促すアクセントカラーとして使用されています。

Screentshots from my Lyft app

3. 価格見積もり機能

新しいUIは、ユーザーが金額の見積もりを見れるようになっています。“Price estimate”をタップすることで、どれくらいのコストがかかるのか知ることができます。例えば上の図で言うと、ここからチャイナタウンのSpicy King restaurantまでは、およそ$7-$11くらいかかるということがわかります。

 4. 人間工学に寄りそったデザイン

人間工学に沿ったデザインは、よりよいUXを生み出します。前のアプリでは、スクリーンの全面でユーザーのアクションが発生するため、操作するのに指がスクリーン上をいったりきたりする必要があり、使い勝手が悪いものとなっていました。新しいデザインではどうでしょうか? ユーザーとして以下の理由から、私はこのデザインを気に入っています。

・タブメニュー

重要なメニューアクションは全てアプリの下の部分に設けてあり、そこから好きな乗車形態(Carpool、Line、Lyft、Plus、Premierなど、乗車人数や価格帯などのオプション)を選んで、すぐに乗車地点を設定することができるようにしています。フローの中で次に必要とされるアクションは、近い箇所に設置してスムーズに操作できるようにしています。

Image on the left is from pdxlyft, image on the right is a screenshot from my Lyft app

左出典:pdxlyft

・Lyft車の現在地

マップ上の車は、ピンクと紫を取り入れてうまくきれいにリデザインされており、アプリの色彩の一貫性があります。進行方向も表現されているため、あまり方向感覚のない私のような人間にはとても助かります。 

今では、配車リクエストした車が私の方に向かっているのか、または逆に向かっているのかわかります。予定到着時刻を過ぎた場合にも、なぜ時間がかかっているのか知ることができます。

Image on the left is from pdxlyft, image on the right is a screenshot from my Lyft app

左出典:pdxlyft

・到着前のオプション表示

新しいUIは、車が到着する前に「Cancel ride(キャンセル)」「Split(割り勘)」「Send ETA(到着予定時刻を送る)」「Contact(ドライバーに連絡)」の4つのオプションをユーザーに提供しています。古いUIでは、ドライバーに電話をしたいときになかなかボタンが見つからずに苦戦したことがありました。全てのオプションを表面に表示されたことで、使い勝手はさらによいものになっています。

Screenshot from my Lyft app

LyftのUXリサーチ

Lyftのアプリには「乗客」と「ドライバー」という異なるタイプのユーザーがいます。UXリサーチをどうやってデザインとうまく連携させればよいのでしょうか? 冒頭で述べたように、Tan氏のパネルディスカッションからこれらのことについて少し学ぶことができました。  

・定性データ VS 定量データ

Image from Valient Market Research

多くの会社と同じように、Lyftもメトリクス(評価指標)を重視する企業であり、主に定量データ分析にフォーカスしています(通常、数値やグラフはメールやキーノートなどの多くのフォーマットで、チームやステークホルダーと共有されています)。 しかし、定量データを活用するには多くの分析作業が必要となる関係から、最近ではより手軽に扱える定性データのほうに注目しています。

・ユーザーからフイードバックをもらう

Image from Medium post by Violeta

出典:Violeta氏のMedium

Tan氏によれば、Lyftは実際にサービスを利用しているユーザー(乗客とドライバー)を、オフィスで週次開催している定例Q&Aセッションに招待し、フィードバックをもらっています。そうすることでデザインチームは、ユーザーが機能を理解しているかどうか、何を改善していけば良いのかを知ることができるのです。

定性データを収集するために、Lyftも別の方法も使っていると思います。ネットで調査を行ったところ、LyftはUXのデータを集めるために、Lookbackを使っているようでした。

このツールでは、ニーズをより理解するため、ユーザーフィードバックのモンタージュを作ることができます。 私も数ヶ月前にLookbackを使ってみたのですが、モバイル上でプロトタイプテストの登録がとても簡単にできました。私の会社でも、デザイン&UXリサーチチームはValidatelyを使い、 モデレータ有り/無しの両方の形態でテストを行っています。

・A/Bテスト

Image from vwo.com

出典:vwo.com

リニューアルのプロセスで、 LyftはたくさんA/Bテストを行いました。その結果、Tan氏は彼女たちの求めていたデザインがユーザーの求めているものではないことに気づきました。私のデザインチームは、ユーザーにとって何が一番最適なのか、様々な仮説をいつも持ち続け、もがき苦しんでいます。A/Bテストなしでは、私たちは自分たちのいいと思うデザインしかできず、ユーザーにとって必要ではないかもしれない機能をデザインしてしまう恐れがあります。

・結果 

Nectar Designによれば、Lyftはこれまでに何百時間ものユーザーテストを行い、仮説を検証しています。これは、チームやステークホルダーや顧客と信頼関係を築く上で良いことです。

まとめ

私がこのケーススタディが学んだことは以下です:

デザイン原理を構築することの大切さ

デザイン原理を整理して構築することは、プロダクトを実際に制作することと同じくらい重要なことです。自分たちが作ったデザイン原理をさらに良いものへと構築していく方法を探し続け、組織をあげて、全員が理解できるよう視覚化していこうと思っています。

リニューアルを恐れない

プロダクトのリニューアルをすることを恐れてはいけません。もし、ユーザビリティの問題などの十分な理由が揃っているのであれば、すぐに計画を立てましょう。実際のユーザーを知るには、ユーザーテストが鍵となります。 できるだけ多くのユーザーの行動に関する定量データを集め、そして分析しカテゴライズし、リニューアルのアイデアを裏付ける確かな定性データを持つようにするのです。 デザインのサイクルに沿ってリリースし、そしてユーザーフィードバックをもらい、改善することを繰り返すのです。

デザイン判断のためのUXリサーチ

Lyftのリニューアルは、成功するプロダクトの素晴らしい例です。もし、あなたがユーザーのことを気にとめているのであれば、ユーザーが何を必要としていて、サービスを使うときに実際何をしているのかを理解し、ユーザーの立場になって考えてみることです。もし、あなたのオフィスにUXリサーチチームがないのであれば、すぐ結成するか、自分が率先してリサーチャーになるしかありません。

私は、UXリサーチチームと密接に連携して動いていますが、彼らはユーザーを募ってユーザーテストを行い、毎月大量のデータを分析することでデザインチームを支えています。彼らのおかげで、デザインチームはその数値や指標を受け取り、ユーザビリティの問題などを明確にし、意思決定者とリニューアルのデザイン判断ができるのです。

・・・

Lyftのリニューアルにおけるケーススタディは、UIとUX両方において素晴らしいデザインをすることで、どのようにビジネスの価値を生み出していくかを教えてくれました。私がもし、似たような原理を適用してUXリサーチで行っていることを継続していけば、私たちのプロダクトチームも近い将来もっと大きな成功を成し遂げることができると確信しています。


イベント