この記事では、カスタマー サポートを改善するためにProbo の内部ツール (Cerebro と呼んでいます) を刷新する大規模なプロジェクトの 1 つに取り組んだプロセスについて説明します。

セレブロとは？

Cerebro は、すべての Probo の唯一の信頼できる情報源です。これは Probo の内部ツールであり、コンテンツ作成 (コンテンツを作成してアプリにプッシュするため)、タグ (ユーザー タグを作成し、それらのタグにアクションを割り当てる)、ダッシュボード、およびユーザーを含むいくつかのセクションがあります。

ユーザーの詳細セクションは、CX チームがユーザーの苦情に関する情報を確認し、ユーザーに戻すことができるユーザーのデータベースです。

この記事では、Cerebro のユーザー詳細セクションをどのように再設計したかについて説明します。

ブリーフ

Cerebro のユーザー詳細セクションを再設計して、Probo のカスタマー サポート チームの UX と生産性を向上させます。

問題を理解する

サポート チームは Cerebro を使用して、アプリで行われたユーザーのアクティビティを確認します。

このタスクでは、最初に主要なユーザー フローを特定し、次にその中の UX の問題を探しました。

サポート チームと一緒にワークフローを観察し、ユーザビリティの問題を特定している間に、いくつかのチケットを自分で解決しました。これは IPL シーズン中のことで、コミュニティ エグゼクティブ 1 人あたり 1000 枚以上のチケットを受け取ったため、彼らの作業量は膨大でした。

彼らがプロボ ユーザーへの最高のサポート エクスペリエンスを提供しようと固く決意しているのを見て、私の心に響き、デザインを通じて彼らの毎日のエクスペリエンスをより良いものにしようという気持ちがさらに強まりました。

特定された主要な問題:

1. 情報のスキャン性が低い:ユーザーの主な仕事は Cerebro から情報を取得することですが、テーブルを見渡すと、画面上で必要な情報を見つけるために多くの焦点を当てる必要があったため、多くの認知的努力が必要でした.
2. 複雑なナビゲーション:一部のユーザー フローでは、ナビゲーションが複雑で隠されていました。
3. 認知負荷の増加:以前の設計は、ユーザーの認知負荷を軽減するためのゲシュタルトの階層と近接の法則と一致していませんでした。
   さらに、特定のユーザー フローでは、ユーザーは 1 つのテーブルの情報を記憶し、別のテーブルに移動して比較する必要があり、タスクを完了するまでの時間が長くなりました。
4. ブランド アイデンティティが一致していない: Probo のブランディングは数か月前に再考されたため、Cerebro の再設計は新しいブランディングと一致する機会となりました。

Probo のアプリとウェブサイトは、数か月前に新しいブランディングで再考されました。社内ツールでも同じことが必要な時期でした。

いくつかのページのビフォーとアフターを見てみましょう:

デザイン — ビフォー vs アフター

それでは、これらの再設計を 1 つずつ分析してみましょう。

前と後 — 設計の内訳

ユーザー概要セクション:
このセクションは、利用可能なユーザーの基本情報で構成され、3 つの部分に分かれています。同様の情報がまとめられています。

• 最も重要な情報は、ユーザーの詳細やステータスなどのフロントで強調表示されます。
• アクションの優先順位付け: 古い設計では、3 つの CTA が存在し、プライマリ/セカンダリ アクションの階層はありません。
  また、分析した結果、それらのどれも CTA や主要なアクションではないことがわかりました。そのため、率直に画面に集中する必要はありません。アクション ボタンは、「オプション」と呼ばれる 1 つのボタンで構成されます。

• サイド ナビゲーション バー :
  データ テーブルのある画面では、水平方向のスペースが最も重要です。したがって、サイド ナビゲーション バーのデザインは、スペースを最小限に抑えるアイコン ボタンで再考されました。
• フルサイズのナビゲーション バーが必要な場合は、ユーザーがロゴをクリックすると、テキスト + アイコン ボタンを備えたフルサイズのナビゲーション バーに展開されます。
  ユーザーが切り替える必要がある場合は、拡大せずに、アイコンにカーソルを合わせてその意味を確認できます。

しかし、タブを区切ることで、異なるタブ内のテーブル間でデータを比較しやすくするにはどうすればよいでしょうか? それについては後ほど説明します。

ここで、いくつかの詳細に飛び込みます。

より良い UX のためのデータ テーブルの最適化:
データ テーブルには、必要なデータをユーザーにすばやく提供するという 1 つの仕事があります。
この仕事を行うには、関連情報を見つけるための迅速なスキャン機能が必要です。

これらは、最も複雑な 2 つのテーブル (残高履歴と取引履歴) のビフォー vs アフター デザインです。

データのスキャンをより簡単かつ迅速にするために、大まかに次の 4 つの点が考慮されます。

• 色分けし、情報を分離するために階層と近接性を追加することで、関連する情報を見つけるためのクイックスキャン機能。
• 類似データのグループ化
• 重複情報の排除
• すばやく比較できるようにデータを並べ替える

それはどのように実行されましたか？

再設計といくつかのバグ修正が開発のために計画されており、ユーザビリティ テストの結果から、生産性が 2 倍になることが期待されています。

これはまだ開発中であるため、現時点で最終的なパフォーマンスと KPI を共有することはできませんが、公開されたらすぐにここで更新します。

私は何を学びましたか？
このプロジェクトの前に私が行った作業のほとんどは、プロボのアプリまたはウェブサイトのランディング ページに新しいデザイン機能を追加することに関連していました。
したがって、このような巨大なデータセットに取り組むこと自体が課題でした。UX が UI の実装方法の直接的な結果であるということについて多くのことを学びました。

また、デザイン愛好家のために、NN グループの Web サイトの記事へのリンクを示します。この記事は、データ テーブルの理解と設計に大いに役立ちました。

Ps また、このケース スタディを書くのに時間がかかりすぎたので、定期的に設計プロセスを文書化し続けることも学びました

次は何ですか？

1. マイクロインタラクションと空の状態を探索して、時間の制約のために現在カバーされていないすべての作業の間に小さな楽しみを追加します。
2. ツールを使用するためのキーボード ショートカットを調査しています。現在、チームの全員が MacBook (flex 101 ) を使用しているため、トラックパッドは効率的で使いやすいものになっています。
3. 今のところ、ユーザー詳細セクションのみの再設計が行われています。次のフェーズでは、Cerebro の他のすべてのセクションを再設計する必要があります。

私たちの素晴らしい CX チームに大声で叫びます。このプロジェクトの間、私は文字通り彼らの部屋に少なくとも 1 日に 5 回押し入りました。彼らは私のすべての質問と疑問に可能な限り最善の方法で答えました。これは特に IPL シーズン中の最も忙しい時期でした。時期！

また、素晴らしいデザイン チーム ❤️ と、貴重なフィードバックや提案で私を助けてくれたすべての製品所有者にも感謝します。

読んでくれてありがとう！また別のケーススタディでお会いしましょう

LinkedIn • Instagram • Twitter でNidhi に挨拶 してください