100 App Team Blog

半径100メートルのユーザーと気軽に匿名チャットができるアプリ「100(ワンハンドレッド)」のなかのひとたちによるテック x UI/UXデザイン x 企画あれこれブログ。プロダクトをグロースさせる試行錯誤の日々を記録。

" 半径100メートル " を広げて、みんなをつなごう

こんにちは、デザイナーインターンのmomokoです。

  

 4月16日、

新機能「エリアチャット」がリリースされました。

 

前回の更新からだいぶ日が経ってしまいましたが、

今回はエリアチャットのUI、導線設計についてお話しします。

 

 

  「いるわけないか」と言わせてしまった

 

「半径100メートル以内にいる人と、匿名で話せる!」をコア体験として

スタートした100。

 

プレスリリースを配信したことによって、たくさんのメディアに

注目していただいたこともあり、多くの方が100をダウンロードしてくださいました。

 

しかし、ユーザーの方々の反応を観察していると、

  

f:id:momo_rockme:20190416174406p:plain「お〜い!」

f:id:momo_rockme:20190416175706p:plain「誰かいる〜?」

f:id:momo_rockme:20190416175733p:plain「いるわけないか…」

 

 

そんなことを呟いたのち、

アプリを閉じてしまう人がほとんどでした。 

 
 それもそのはず。

 

できたてホヤホヤのアプリということもあり、ユーザーの数はかなり少なめ。

それも、世界各国(もとい日本全国)から散りぢりにアクセスがある状態。

 

半径100メートルの中に他のユーザーがいる可能性はほぼゼロ、

という状況が出来上がってしまっていたのです。

 

この状況では、「半径100メートル以内にいる人と、匿名で話せる」ことの

おもしろさを、誰も体験することができません。

 

 

「誰かいる?」「いるわけないか…」。 

せっかく面白そうと思ってくれたユーザーに、そんなことを言わせてしまった。

こうしてはいられません。

 

 

私たちはさっそく改善に乗り出しました。

 

 

 まずは " 会話ができる場所 " をつくる

 

 チームで考えた結果、まずは

「ユーザー同士が会話することができる範囲」を広げよう、

という方向性で定まりました。

 

半径100メートル以内でのコミュニケーションがコアなのは

変わりません。

しかし、使ってくれる人が増えなければ、それは

一生かかっても実現できないこと。

 

「使ってくれる人を増やす」ために、

まずは半径100mのほかに、" 会話ができる場所 " を

作ろう、ということになったのです。

 

 

その名も「エリアチャット」。

  

エリアチャットのしくみ的な部分は、プロデューサの小林さんが

前記事の

エリアチャット機能をリリース! - 100 App Team Blog」で

説明してくださっているので割愛しますが、

 

どのようなUIにすればユーザーのみなさんが理解しやすいか。

 

 

じっくり考えた結果、まずは以下のようなラフを書きました。

 

f:id:momo_rockme:20190417161605j:plain

アイデア出しラフ

 

情報設計のため、「ユーザーが知りたい情報は何か?それはなぜか?」を

吟味した結果、

 

(1)  

「深い階層まで潜っていく」というエリアチャットの遷移構造上、

ユーザーは、より楽しく会話ができるエリアチャットを、

選択画面において見極めたい。

 

→そのチャットの中で会話している人数と、

会話がどれだけ盛り上がっているか(盛り上がり度)を知りたいのではないか。

 

(2)  

たとえば任意のエリアチャットにおいて会話がされていない時、

ユーザーは、「自分が話しかけたら返してくれる可能性のある人の数」を知りたい。

 

→そのエリアにいるユーザー全体の数を知りたいのではないか。

 

 

 

…という思考に到り、エリアチャット選択画面には

・そのエリアにいる人の数

・そのエリアチャットで会話している人の数

・そのエリアチャットでの会話の盛り上がり度

を表示することにしました。

 

 

ラフからUI制作に移り、

フィードバック→修正、フィードバック→修正という作業を繰り返して、

最終的に、エリアチャットのデザインは以下のように落ち着きました。

 

 

f:id:momo_rockme:20190417163254p:plain

 

このデザインができるまでに、

盛り上がり度のアイコンやら、背景画像やら

いろいろな紆余曲折があったのですが、それはまた別の記事にしようと思います。

 

 

 「がっかり閉じ」を救いたい

 

エリアチャット機能をリリースするにあたって、

機能自体のUIとは別に、かなりこだわった点がもう1つ。

 

それは、「モーダルによるエリアチャットへの誘導」です。

 

まずは、状況を整理してみましょう。

初期バージョンを使ってくれたユーザーの心理を図示してみると、

 以下のようになると思います。

 

f:id:momo_rockme:20190417155547p:plain

初期ユーザーの心理。せっかく「面白そう」と思ってくれたのに…

 

チャットができると思ってダウンロードしたのに、

ボットによって「あなたの周りにはユーザーがいません。」と突きつけられ、

「がっかり」という感情が生まれてしまう。

 

 エリアチャットは、メインの100mチャット画面から

右へスワイプすることで入っていくことができるのですが、

 

この「がっかり」という感情は、

すぐにアプリを閉じさせてしまうことに定評があります。

 

したがって、アプリに「がっかり」している人は右へスワイプしてくれないし、

そこにエリアチャットという機能があって、

そこでは誰かと話すことができるのだということを知ることもできません。

 

 

 そこで、100メートル以内にユーザーがいない場合に限って、

エリアチャットで楽しくおしゃべりしましょう!というモーダルを

起動から4秒後に出すことにしました。 

 

 

f:id:momo_rockme:20190417165700p:plain f:id:momo_rockme:20190417165707p:plain

 

お話できる人がいるかもしれないよ!

まだがっかりするには早いよ!

 

私たちのそんな意思が、このモーダルを通じて伝わればいいな、と思っています。

 

 

 

本日のブログはここまで。

 

またお会いしましょう!

 

 

momoko