今中国で話題沸騰のコーヒーショップLuckin coffee(瑞幸咖啡)のUIUXを考察してみた

ここ最近日本のニュースでも取り上げられ、あのスターバックスをも追い詰めたことで話題になっているLuckin CoffeeのUIUXを考察してみました。

Luckin coffee(瑞幸咖啡)の概要

Luckin coffee(瑞幸咖啡)といえば、中国で破竹の勢いで経営規模を拡大し、設立からわずか18ヶ月という最短記録でナスダック上場を果たし、スターバックスをも追い詰めたことで、今話題になっている新興コーヒーチェーン。

Luckin coffeeの特徴

消費者側からすると、直感的に以下のような特徴が感じられます。
・注文はアプリからしかできない
・受け取り方が自由
・おいしいコーヒーが手軽に（クーポン、割引がとにかく多い）

それらを実現するためにはデータシステムによるコストの削減、UXの高速改善が必要になります。さらにその奥にはオンラインをベースにした徹底的な「ユーザー起点」のOMO型の思考法があります。

OMO（online merges with offline）をについて詳しく知りたい方は、「アフターデジタル」という本が超おすすめなので、ぜひ読んでみてください。

Luckin coffeeについて詳しく知りたい方はこちらの記事が参考になります。
https://remotegirl.jp/luckin-coffee/

UIUXトレースをするときに、参考になったのがこちらの記事です。
https://note.com/yusuke_27/n/nd4a12f698182

1. 画面遷移を確認

1-1 アプリで注文してから受け取りまで
今回は外出先でたまたまLCの店があったのでそのまま店舗で注文することにしました。お店といっても座席がなく、カウンターがあるだけ。カウンターの前の大きいポスターで「アプリをダウンロードするとコーヒーがタダでもらえる」と書いてあって、その隣にあるQRコードをスキャンすると、アプリのダウロードページに飛びます。お店に行っても注文がアプリからしかできないのが特徴です。アプリを開き、携帯番号を入力するとwechat payとの連携がすぐできます。オンライン決済の浸透があらゆるOMOサービスのインフラとなっていると実感。

ホームページの「今すぐ注文」をタップすると、メニューの一覧画面に行きます。画面の上部に現在地から一番近いお店が自動的に選択され、その右に注文方法が選べます（自提：店での受け取り、外送：デリバリー）。自提の場合、行く直前に頼んで作ってもらえばそのままピックアップできるし、店についてからアプリでメニューを選び、その場で注文することもできます。
今回は「自提」を選択。メニューを選択したら、好みによってカスタマイズもできます。その後はほとんどのECと同じようなcheck outの流れになります。支払いがwechat payなので、wechat payのパスワードを入力すると決済完了です。今回は初回の購入なので、全額マイナスされタダに。

決済完了すると、注文完了画面でコーヒーの予定出来上がり時間が表示され、出来上がると注文QRコードを取得し、QRコードをカウンターにあるスキャナーにかざして、コーヒーを受け取ります。QRコードは人に共有して、代理で取ってきてもらうことも可能です。1回使うだけでクーポンが何枚も貯まります。

1-2 その他の主要な画面
Lucking coffeeアプリの特徴的な機能、コーヒー券チャージについて見てみましょう。最初アプリを開くときに、「咖啡钱包」って何？と思いましたが、開くとコーヒー券のチャージ画面になります。「前払い」でコーヒー券を買って貯めておくことができるわけです。コーヒー券を2枚で買うと、1枚タダ、4枚買うと2枚がタダ、5枚買うと5枚タダでもらえます。これはお得すぎる！

コーヒー券は後で自分で使うこともできるし、「红包」として友たちに送ることもできるし、電子カードを添付してプレゼントとして贈ることもできます。
*红包(hongbao)とは：中国の旧正月にお祝いや挨拶として贈られる中国の伝統的なプレゼントで、「お歳玉」のようなもの。デジタル Hongbao は今や中国人の日常生活の一部になっている。

Lucking coffeeが初期ユーザー獲得に力を入れているのが分かる機能は、無料コーヒーを友達に奢って自分も1杯無料になる、という機能です。wechatで友達にリンクを送って、その友達が新規アプリをダウンロードすると、友達も自分もコーヒーが1杯無料になります。

2. コンセプトメイキング

▼ユーザー
『大都市で働く20~40代、コーヒを飲む習慣のあるオフィスワーカー』は、

▼欲求
『簡単に安くて美味しいコーヒーを飲み』たいが、

▼課題
『美味しいコーヒーが安くないし、店で注文するのが面倒』なので、

▼サービスの特徴
『安くて美味しいコーヒーが簡単に注文できる』（こと）に価値がある

3. リーンキャンパス

4. メイン画面をトレース

ホーム画面とメニュ画面をトレースしました。アイコンもペンツールでトレースしたので、ペンツールの練習になりました。トレースすると、自分がデザインする時にフォントサイズや余白の設定の参考になります。

フォントは中国語のフォントなので、ぴったりのフォントは見つかりませんでした。フォントサイズは、8px〜17pxとバラバラでで、見出しは16, 15, 14pxが多く、説明文やアイコン下の文字サイズは10pxが多い。

配色は、メインカラーはブランドカラーの青＃#323C91、アクセントカラーは補色のオレンジ#F24E06。それ以外は基本白、グレーでスタイリッシュなイメージ。余白は4px、8px、10px。

5. UIUXの考察

5-1 UIデザイン
▼機能デザイン
・注文プロセスでは、一番近いお店が自動的に選択されるので、お店選択の手間が省かれる。
・メニュー選択および決済は中国の多くのアプリで採用されているUI、認知コストが低く迷うことはない。
・コーヒー券チャージへの誘導は多くの画面で見られる。「充二赠一」（コーヒー券を2枚チャージすると1枚がタダ）のタグがホームページの「coffee wallet」ボタンの左上、「充值钱包」（coffee walletをチャージ）ボタンの右上に表示されている。注文プロセスでも「充二赠一」のボタンがある。いつでもコーヒー券をチャージできるように設計されている。
・コーヒーがいつ出来上がっているかが表示されているので、それに合わせた行動ができる。

・「コーヒーを贈る」からの4つの機能はどれもSNSで友たちにシェアするための機能であり、コーヒーが社交の手段にもなる。

・コーヒー券チャージへの誘導は多くの画面で見られる。「充二赠一」（コーヒー券を2枚チャージすると1枚がタダ）のタグがホームページの「coffee wallet」ボタンの左上、「充值钱包」（coffee walletをチャージ）ボタンの右上に表示されている。メニュー画面でもメニュー写真の右下に表示されている。注文プロセスでも「充二赠一」のボタンがある。いつでもコーヒー券をチャージできるように設計されている。

・コーヒーがいつ出来上がっているかが表示されているので、それに合わせた行動ができる。

▼ビジュアルデザイン
・ブランドカラーの青をベースに、アクセントカラーが補色のオレンジ。それ以外は基本白、グレーでスタイリッシュなイメージ。
・メニューは、左側がカテゴリーで固定されており、右側がメニューリストで、スクロールできる。メニューの表示が分かりやすい。このようなUIは多くの中国のアプリで採用されている。
・割引情報はアクセントカラーのオレンジになっており、強調されている。

良くない点
・コーヒー券チャージ画面にあるB1、C1、D1券の名称が分かりにくい。
・「自提/外送」のどれが選択されているかが少し分かりにくい。

5-2　UXデザイン
・オンラインをベースにした自由度と利便性の高いUX体験
ユーザーは状況ごとに一番便利な利用方法を選択することができる。お店に行く直前に頼んで作ってもらえばそのままピックアップできるし、店についてからアプリでメニューを選び、その場で注文することもできる。外出したくない時はデリバリーしてもらうこともできる。「チャネルの自由な行き来」がユーザーにとって最高に自由で便利な体験で、luckin coffeeにとってもユーザーの行動が全てデータとして把握活用できる。

・ユーザー側と店舗側のwin-win
お店ではコーヒーを受け渡すだけで、メニューの選択、決済などが全てアプリで済ませるため、ユーザーにとっては列を並ぶストレスや注文の手間がなくなり、店員にとっては、ただ番号順にコーヒーを作ればいいので、オペレーションの簡易化になる。

・新規ユーザー獲得、継続利用の仕掛けが多い
1回利用するだけで割引券がたくさん貯まるし、コーヒー券をチャージすればするほどタダ券がもらえるし、友たちにシェアするとコーヒーが無料になる、たくさんの割引がユーザーにとって継続利用のインセンティブになり、シェア機能がコーヒー券が社交の手段になるとluckin coffeeにとっては新規ユーザーの獲得、SNSでの認知拡大が狙い目。