Customer Connect
"ANETジャパンと一緒に仕事をやらせていただき、ビデオコーリングシステム「Customer Connect」の設計プロセスを主導させていただきました。WebRTC技術を活用したこのウェブアプリケーションは、オペレータがビデオと音声コールを介して顧客と接続できるようにするものです。この他の機能として、コール管理やチャット履歴、顧客フィードバック評価などがあります。"
問題の理解
Customer Connectを開発する前、ANETは資生堂のためにワーキングプロトタイプを作成していました。しかしながら、リリース直後にANETは、そのMVPがCTA（行動喚起）が多すぎナビゲートしにくすぎる、と感じたのです。 私は全く最初からアプリケーション全体を再設計する任務を任されました。
デザインプロセス
私は1週間のうちにオペレータの目の前にワーキングプロトタイプを差し出すことを目指し、いつもそうするように自分の「デザインスプリント・プロセス」から始めました。UXの問題をより明確にしようと、ユーザーインタビューを行いました。特にオペレータの方々に、どんな機能が役に立つと思うか、という質問を行いました。そういったインタビューの中から、3つの共通するテーマが分かりました。
1. コールしにくい
オペレータの方々は、簡単な方法でコールできればいいな、と思っていらっしゃいました。ボタンが多すぎてナビゲートしにくい、一番目のCTAが必要だな、と考えていらっしゃいました。また、呼び出し中、接続、エラーメッセージといったお知らせ機能もお望みでした。
2. フィードバックが管理しにくい
オペレータの方々は複数のカスタマーコールをかける場合も多いのですが、同じ1人の顧客に以前コールしたことがあったかどうか、宣伝されている製品のいずれかに顧客が実際に関心を示したかどうか、を確認する手段がありません。顧客フィードバックの管理が大変でした。
3. デザインに一貫性がない
オペレータの方々は、特にボタンのそれぞれの機能が分からないなかで、同MVPにはデザインに一貫性が欠けている、と感じていらっしゃいました。色の違いやレイアウト、デザイン全体に圧倒されていました。お望みだったのは、簡潔さだったのです！
1. コールしやすさ
オペレータの方々がコールを発信しやすくなるよう、まずアプリのレイアウトで安心感を持ってもらおうと思いました。そのため、二次的なボタンをすべて片付けてしまい、ビデオフィードが画面全体で見られるようにしました。アプリケーションのレイアウト用にローフィデリティのモックアップをBalsamiqで作成し、UIデザイン用 Sketch 3に移行させました。元のデザインからアクションボタンを30個も取り除くことに成功しました。これでインターフェイスがクリーンかつシンプルになりました。
最初の3つのCTA：1.コール発信、設定 2.ビデオオフ 3.音声オフ
ユーザーフロー – コール発信
レイアウトがいったん最適化された後、発信の際のユーザーフローを分かりやすく作ろうと思いました。隠れたモーダルや細かいステップやタスク – エラーメッセージまでありました – といった制限の中で作業を行いました。
クリック可能なプロトタイプ
アニメーションおよびインタラクションデザイン
マテリアルデザインのお蔭で、アニメーションにUI の一貫性が備わり、マイクロインタラクションも改善しました。この中には、Core-draw-panel（コアドロー・パネル）付きの隠しメニュー項目、1番目のCTA用に便利なフローティングアクションボタン（FAB）、といった機能が含まれます。フロントエンド用に開発する際には、アニメーションは CSS3と jQueryを組み合わせて動かしました。
2.コール履歴および顧客フィードバック
オペレータの方々は、「コール中」はもちろん「コール外」の時でも顧客フィードバックに常時アクセスできることをお望みでした。オペレータが顧客フィードバックの評価とレヴューを行えるよう、スケッチと紙上のプロトタイプで2種類のユーザーインタラクションを作成しました。
1．通話中
- 簡潔な5段階の評価システムが付いた、左からスライドアウトするテキスト形式
- 大きな詳細：パネルが開いていれば、何らかの理由でコールが終了すればコールアクションボタンはオフになりました。
- クライアントがビデオや音声コールを介して話せなかった場合、チャット機能も使用可能でした。
- コール終了時に、オペレータは閉じる前にフィードバックを編集し続けることができました。
2．コールログ
- コールログは別のビューに配置し、画面スペースを最大限にしました。これでオペレータもすぐに顧客フィードバックデータを見ることができるようになりました。
- オペレータはテキストやランキング、データの範囲を通じて検索を絞り込むことによって、過去のコールを再度見ることができます。
- 顧客プロフィールは独立しており、オペレータがこれをクリックすると、顧客情報、チャット履歴、全体のフィードバックなどの過去のコールの詳細が分かるようになっています。
- オペレータにはまた、内部マーケティングやデータベース管理用として顧客情報をローカルシステムにダウンロードできるオプションが与えられました。
Bootstrap Material、Flexbox
ユーザーフローと全体のデザインを決定した後、Bootstrap Materialフレームワークを使ってフロントエンド開発を始めました。幾つかの独創的な機能を提供してくれるツールですが、自分のデザインには要素の正確な配置がやりにくいと思いました。それでこの従来のグリッド Bootstrap装備から離れ、Flexboxレイアウトで開発を進めることにしました。「object-fit」と「flex」姿勢を使い、自分のデザインに要素を正確に配置することができました。
振り返って
ユーザーインターフェイスを設計した後、ワーキングプロトタイプをオペレータの手元に差し出すことができました。オペレータの方々にはアプリの要素には機能していないものもあり、これはシミュレーションにすぎないことを告げました。このユーザーテストは以下の点を立証し、自分のデザインが3つの問題を解決したかをみるものでした。
- コール発信が楽にできる
- 顧客フィードバックのレビューと管理
- UI一貫性の実装
