ネオキャリアグループ エンジニアブログ

ネオキャリアグループのエンジニアによるブログです

リニューアル直後に月間利用300%伸び、Web会議システム「Calling」のデザイナーが仕掛けたUXとは?

はじめまして、2018年の5月からCalling(https://www.calling.fun)でプロダクトデザインを担当しているKottyです。

今年の9月に、Callingはプラットフォームサービスとしてリニューアルしました。

もともとバラバラだったサービスを、どのようにリニューアルしたのかリニューアル直後に月間利用時間が300%も伸びたサービスをどのようにデザインしたのか、をデザイナー視点から紹介します。

 

f:id:ychiechie:20181120194611p:plain

 

デザイナーって何をする人?

デザイナーは、成果物を人に見てもらいやすい職業なので、よく「綺麗なデザインをする」「サイトをコーディングする」という印象を持たれることが多いです。

実際にはそれだけではなく、「情報設計」や「ユーザー体験(UX)」といった成果物が見えづらい事を考える重要な役目も担っています。 

その設計を元に、ユーザーが操作するウェブサイトに表現するところまでがデザイナーの仕事です。

 

f:id:Kotty:20181115154842p:plain

 

Callingのリニューアルは、事業サイドとの兼ね合いからスケジュールを動かしづらいプロジェクトだったため、実現するための決め事(上図)を正確に押さえ、意思決定までを迅速に進めることが必要でした。

 

そもそもリニューアル前のCallingとは?

そもそもCallingが始まったのは2016年、当時はMeetingとChat/Chatbotが別々のサービスとして開発されており、機能も利用ユーザーもバラバラの状態でした。

 

それぞれのプロダクトを振り返ってみましょう。

Calling Meeting

f:id:Kotty:20181115155108p:plain

ブラウザだけでWeb会議システムを提供するサービスです。

インターネット環境さえあれば、Webブラウザを通して最大30人とビデオ通話、資料・画面の共有が行え、遠隔地同士での会議をカンタンに開催できます。

 

Calling Chat

f:id:Kotty:20181115155141p:plain

Webサイトなどに顧客とのチャットパネルを埋め込むことで、リアルタイムのカスタマーサポートができるサービスです。

自作のウェブサイトにチャット・ボットを設置したり、LINE@やFacebookメッセンジャーとの連携もできるため、多様な媒体でのチャット対応を実現します。

Calling Chatbot

 

f:id:Kotty:20181115155204p:plain

前述のチャットに接続するためのチャットボットのエディタです。

自動応答のボットを、ブラウザだけで作成することを可能にしたサービスです。

 

上記3つのサービスは、共通してコミュニケーションツールという軸を持っていたものの、それぞれ別々の開発チームで開発されたため、別々のサービスとして存在していました。

 

初期リリースしたときにデザイナー視点でイケてなかったこと

そんな別々のサービスを統合する上で、ただ統合するだけではイケていないと感じた点は以下のようなものがありました。

 

  1. ログイン条件・ログイン場所がサービス毎に存在した
    ユーザーはパスワードも何個も存在する状態なので、混乱させてしまう

  2. デザイナーがあまり関与せず開発が進んだので、デザインの統一性が無かった
    デザインテイストが全体的に暗い色が多く使われていたので、ユーザーに重い印象を与えていた

  3. サービス毎に使い辛いUIが存在していた
    機能を一通り作ったため、画面に必要な導線が無いなど考えが甘いところがあった

  4. サービスサイトのコンテンツが充実していなかった
    サービスサイトで、ユーザーに何ができるサービスなのか伝えきれていないサイトだった

 

f:id:Kotty:20181115170424p:plain



このような点が、このプロジェクトのデザイン面での大きな課題となっていました。

これを、立案含め3カ月で全てリニューアルまで持っていくという…

 

デザイナーの私も今まで経験したことのない、難易度の高いプロジェクトへの挑戦でした。

プロジェクトをどの様に進めたのか、お伝えできればと思います。

 

イケてないところをリニューアルする

3つのバラバラなサービスをリニューアル・統合することになったものの、初めはどう進行すれば良いか途方にくれていました。

結局イケてないところを、一つひとつ改修することを決定し、デザインフローを考え出しました。

 

まず、当時のサービスの課題点をリストアップしてみたところ、大きく3つの課題が出てきました。

  1. ログイン条件・ログイン場所がそれぞれのサービス毎に存在した
  2. そもそも、デザインの統一性が無い、デザイナーがあまり関与していなかった
  3. UIUXが考えられていないサービスになっていた

 

それぞれに対して、画面ごと、機能ごとに多くの改修項目が挙げられ、一から作り直したくなる気持ちが強かったが、結果的には今のサービスをできる限り活かす方向で進めていきました。

  

1. ログイン条件・ログイン場所がそれぞれの機能に存在した

はじめに、Callingプラットフォームというアカウント管理用の新しいサービスを作ることをチームで決断しました。

これによって、バラバラだった3つのサービスのアカウント情報を1つにまとめることが可能になりました。

 

f:id:Kotty:20181115170603p:plain

Callingプラットフォームではアカウント管理者が、子のユーザーアカウントを管理します。

 

そのために、通常のIDとパスワードに加えて、スペースIDという新たな入力項目を用意しなければなりません。

  

f:id:Kotty:20181115170653p:plain

 

サービス毎のログイン情報を統一する条件を考えることから、デザインの仕事がはじまりました。

 

ここでもっとも重要なのは、「Calling独自の入力項目(スペースID)があるログイン画面でも、サービスを触ったことがない人でも触れるようなシンプルなものにする」ことでした。

 

  1. 第一の問題点である、ログイン条件を統一をする
  2. 新規登録・ログインの流れを一元化するプラットフォームのフロー図作成する
  3. フロー図からワイヤーを作成する
  4. フロー図とワイヤーをチームメンバーでレビューし、フィードバックを反映する
  5. ワイヤーからデザインを起こす

 

フロー図

f:id:Kotty:20181115160249p:plain

 

このように、デザインフローを決め作業・調査を行いました。

1.2はデザインの仕事?と思うかもしれませんが、UXを考慮しながらフローを立てる事が重要なので、やってみると結構この先のデザインに役立ちます。おすすめです。

 

ワイヤーフレームでは情報設計が大切なので、作り込むデザインはしません。下手にデザインしてしまうと、レビュー担当者の意識が、意図と違う方に向いてしまうので、あくまで最低限の情報だけを書いていきます。

 

ワイヤーフレームが決まれば、デザインに落としていきます。ワイヤーフレームがしっかりしているほど、後から設計が間違っていて変更になったなどが起こらないので、デザインに集中できます。

 

設計を元に開発を進めていき、結果的に機能をシームレスに利用できるプラットフォームが完成しました。

バラバラだったCallingが新しく進み出す第一歩になりました。

 

 

2. そもそも、デザインの統一性が無い、デザイナーがあまり関与していなかった

前述の通り、リニューアル前のCallingでは、各サービスのデザインに統一性が全くありませんでした。

ある画面では黒背景なのに、別の画面では白い背景…ボタンの色も形もまちまち。

同じものを別の名称で記載していたり、統一感が全くありません。

 

この様なことは、技術がメインのサービスにありがちな話です。

技術が率先してしまい、デザインにかける工数がなかったパターンです。

 

f:id:Kotty:20181115164018p:plain

 

そこで、リニューアルにあたりちゃんとデザインのコンセプトを立てました。

 

Callingのサービスは、Meeting、Chat、ChatBot…

とちょっと難しそうなプロダクト名称になっていますが、使う人は必ずしもITの仕事をしているわけではなく、業種も年齢も様々です。

 

そして、Callingのサービスを契約前の利用者もサービスを体験利用できる…

などなど、様々な角度から利用者が存在するサービスです。

 

こうした利用者像・利用シーンなどを洗い出し、以下の統一されたコンセプトを立てました。

  • 信頼性、安心感
  • Web会議の硬さを無くす新しさ
  • コミュニケーション、親しみやすさ
  • 分かりやすく、シンプル

この時点ではまだ粒度は抽象的なものですが、これらのコンセプトを元にデザインテイストの決定へ進めていきました。

 

 

f:id:Kotty:20181115160516p:plain

デザインの統一(上図)を行って、「Callingブランド」を作っていきます。

 

Callingはユーザーが集まってこそ活性化するサービスだと捉え、「Callingブランド」に以下のようなデザイン定義を持たせました。

 

「覚えやすく、単純な形、見ていて安心する」

 

ロゴや画面のベースとなっている「赤色」には攻撃的な印象がありますが、ロゴに「Callingブランド」を持たせた結果、印象は穏やかに感じられると思います。(色はカルチャー的な面もあるので、あくまで日本での話ですが…)

 

Callingロゴはアイコン、英字とも丸いフォルムが多いため、万人が見ても親しみやすいかつ情熱的な印象を持たせています。

人は複雑な形を避ける傾向があります。 

そのため私のこだわりは、「誰でも覚えてすぐに書く事ができるアイコン」を目指しました。◯2個と半円だけなので、誰でもかけますよね(笑)

 

3.  UIの改修

各サービスについて、以前からUI面で多くの指摘を受けてきていたので、リニューアルと同時に改修を行うことにしました。

一つひとつは地道で小さな作業と思われがちですが、それが積み重なることで繰り返し使いたくなるユーザー体験を生み出す事ができます。 

UIと聞くと難しく感じるかと思いますが、「いかに利用者を混乱させず、利用者が期待した通り操作でき、サービスを使い続けてもらえるか」を突き詰めることだと考えています。

 

実際に以下のフローで改修を進めました。

 

f:id:Kotty:20181115160810p:plain

 

運用では、継続的に細かい改修を行ってサービスをよりクオリティの高いものにするのかが大事です。

 

ここで大切なのは、Planの「改修の必要性・優先度を決める」ところになります。

 

有りがちな悪い例として、とてもいい機能をたくさん作っても、ユーザーの選択肢を広げてしまうことは、「使い辛い」の原因になってしまいます。

そのためにもユーザーにとって必要な機能を目立たせたり、あまり使わない機能は中に潜り込ませたりすることが重要です。

 

f:id:Kotty:20181115160859p:plain

 

4.サービスサイトのコンテンツ

リニューアルに向けて、サービスサイトも全て作り直しました。

サイト中のコンテンツはマーケティング担当のメンバーに企画してもらい、デザインも作り込みを行いました。

 

その中でもファーストビューは特に重要なものになるので、最初に以下を盛り込むように決定しました。

 

f:id:Kotty:20181115170839p:plain

 

 ①キャッチコピー

 ②メインビジュアル

 ③コンバージョン導線

 ④サービスが理解できる様なコンテンツ

 

サービスサイトは、どのページにおいても利用者が離脱しないように、興味を持ってもらうことが大切です。

ファーストビューは特に大切で、ここを見てサービスに興味を持つかどうかが決まります。

 

特化したコンテンツの制作

立ち上がったばかりの新規サービスでは、予算面の都合から、コンテンツは後回しにされがちです。

ですが今回は、サービス全体のクオリティを上げるために立ち上げ当初からコンテンツの制作を進めました。

  

①CM動画

CMはMovieImpact様と細かくやり取りをしながら進めることができました。

動画制作スタッフにサービス理解から入っていただき、二人三脚で提案、撮影、編集を行いました。

Callingは広いターゲットを持つサービスのため、合計で2本の動画を制作いただきました。

 

Callingの機能の説明を中心とした動画を、エンドレスで短く切り出してサイトに表示します。画面全体に動画を埋め込むホームページは見栄えも良いですが、以下のような弊害もあります。

動画が中心になってしまうと、キャッチコピーが目立たなくなってしまう。

動画の上にコンテンツが多いと、動画が目立たなくなり、煩いだけになってしまう。

 

Callingは特に、動画を音声で見てほしいと言うところがあるので、メインビジュアルの一部に動画を埋め込むことに寄って、ボタンを押して「動画からCallingを知ってね」のメッセージを強く持たせています。

 

 

Calling 左右の女編

 

 

Calling 喫茶コーリング編

 

 

②利用シーン漫画

企画段階で様々な職種での、ユーザーストーリーを作成しているので、そのストーリーを元に漫画化しています。

 

漫画のネーム(ラフ画)を用意して、プロの漫画家の方に執筆していただきました。

しっかり練られているユーザーストーリーだと、ストーリー漫画の信憑性が上がります。

 

漫画のネーム(抜粋) 

f:id:Kotty:20181115162828p:plain

 

To be continued

いかがでしたでしょうか?

まだリニューアルリリースしたばかりですが、次々と新しい機能を追加していく予定です。

 

先日の働き方改革EXPOでも出展させていただきましたが、予想以上の反響をいただくことができました。

 

これからもみんなでCallingをもっともっと良いプロダクトにしていきたいです。

お読みいただきありがとうございました。
 

  

\無料で30日間Callingを体験しよう/

f:id:Kotty:20181115191048p:plain