Trong bài viết này, tôi nói về quá trình làm việc của mình trên một trong những dự án quy mô lớn nhằm cải tiến công cụ nội bộ của Probo (chúng tôi gọi nó là Cerebro ) để hỗ trợ Khách hàng tốt hơn.

Cerebro là gì?

Cerebro là một nguồn duy nhất của sự thật cho tất cả mọi thứ Probo! Đây là công cụ nội bộ của Probo có một số phần, bao gồm Tạo nội dung (để tạo và đẩy nội dung vào ứng dụng), Thẻ (Tạo thẻ người dùng và gán hành động cho các thẻ đó), Bảng điều khiển và Người dùng.

Phần Chi tiết Người dùng là cơ sở dữ liệu của người dùng, nơi nhóm CX có thể kiểm tra thông tin liên quan đến khiếu nại của người dùng và chuyển lại cho người dùng.

Đối với bài viết này, bạn đang xem cách chúng tôi thiết kế lại phần chi tiết người dùng của Cerebro.

Tóm tắt

Thiết kế lại phần Chi tiết người dùng trên Cerebro để nâng cao UX và năng suất cho nhóm hỗ trợ khách hàng của Probo.

Hiểu vấn đề

Nhóm hỗ trợ sử dụng Cerebro để kiểm tra các hoạt động của người dùng được thực hiện trên ứng dụng.

Đối với nhiệm vụ này, trước tiên tôi xác định các luồng người dùng cốt lõi và sau đó tìm kiếm các vấn đề về trải nghiệm người dùng trong đó:

Trong khi tôi ngồi với nhóm hỗ trợ để quan sát quy trình làm việc của họ và xác định các vấn đề về khả năng sử dụng, tôi đã tự mình giải quyết một số yêu cầu. Đó là trong mùa giải IPL khi chúng tôi nhận được hơn 1000 vé cho mỗi giám đốc điều hành cộng đồng, do đó khối lượng công việc của họ rất lớn.

Chứng kiến ​​họ quyết tâm mang lại trải nghiệm hỗ trợ tốt nhất cho người dùng probo, đã tạo ấn tượng mạnh trong tôi và tiếp thêm động lực cho tôi để cải thiện trải nghiệm hàng ngày của họ thông qua thiết kế.

Các vấn đề cốt lõi được xác định:

1. Khả năng quét thông tin kém: Công việc chính của người dùng là lấy thông tin từ Cerebro, nhưng nhìn qua các bảng, có rất nhiều nỗ lực nhận thức, vì họ phải tập trung rất nhiều để tìm thông tin cần thiết trên màn hình.
2. Điều hướng phức tạp: Đối với một số luồng người dùng, điều hướng phức tạp và bị ẩn.
3. Tăng tải nhận thức: Thiết kế trước đây không phù hợp với quy luật phân cấp và độ gần của gestalt để giảm tải nhận thức cho người dùng.
   Ngoài ra, với các luồng người dùng nhất định, người dùng phải ghi nhớ thông tin từ một bảng và chuyển sang bảng khác để so sánh, điều này làm tăng thời gian hoàn thành tác vụ.
4. Nhận dạng thương hiệu không phù hợp: Thương hiệu của Probo đã được mô phỏng lại cách đây vài tháng, vì vậy việc thiết kế lại Cerebro là cơ hội để phù hợp với thương hiệu mới.

Ứng dụng và trang web của Probo đã được mô phỏng lại cách đây vài tháng với thương hiệu mới, đây là thời điểm thích hợp cho các công cụ nội bộ.

Hãy xem Before vs After của một số trang:

Thiết kế — Trước vs Sau

Vì vậy, hãy chia nhỏ từng thiết kế lại này.

Trước vs Sau - Phân tích thiết kế

Phần Tóm tắt Người dùng: Phần
này bao gồm thông tin cơ bản có sẵn của người dùng, được chia thành ba phần; thông tin tương tự được giữ lại với nhau.

• Thông tin quan trọng nhất được đánh dấu ở mặt trước, chẳng hạn như thông tin chi tiết và trạng thái của người dùng.
• Ưu tiên hành động: Trong thiết kế cũ, có ba CTA mà không có bất kỳ hệ thống phân cấp nào cho các hành động chính/phụ.
  Ngoài ra, sau khi phân tích, tôi biết rằng không có hành động nào trong số đó là CTA hoặc hành động chính và do đó không cần phải trả trước và tập trung vào màn hình. Các nút hành động bao gồm một nút được gọi là 'tùy chọn'.

• Thanh điều hướng bên :
  Trong màn hình có bảng dữ liệu, không gian theo chiều ngang là vô cùng quan trọng, do đó, thiết kế thanh Điều hướng bên được mô phỏng lại với các nút biểu tượng chiếm không gian tối thiểu.
• Nếu cần có thanh điều hướng có kích thước đầy đủ, người dùng có thể nhấp vào biểu trưng và nó sẽ mở rộng nó thành thanh điều hướng có kích thước đầy đủ bằng các nút Văn bản+Biểu tượng.
  Không cần mở rộng nữa, nếu người dùng cần chuyển đổi, họ có thể di chuột qua các Biểu tượng để xem ý nghĩa của nó:

Nhưng làm cách nào để tách các tab giúp so sánh dữ liệu dễ dàng giữa các bảng trong các tab khác nhau? Chúng tôi sẽ bao gồm điều đó trong một thời gian!

Bây giờ đi sâu vào một số chi tiết hơn:

Tối ưu hóa bảng dữ liệu để có trải nghiệm người dùng tốt hơn:
Các bảng dữ liệu có một công việc phải hoàn thành — Cung cấp dữ liệu cần thiết cho người dùng một cách nhanh chóng!
Để hoàn thành công việc này, nó phải có khả năng quét nhanh để tìm thông tin liên quan.

Đây là các thiết kế Trước và Sau cho hai bảng phức tạp nhất - Lịch sử số dư và Lịch sử giao dịch

Để làm cho việc quét dữ liệu trở nên dễ dàng và nhanh chóng hơn, nhìn chung có 4 điểm được quan tâm:

• Khả năng quét nhanh để tìm thông tin liên quan - thông qua mã màu và thêm hệ thống phân cấp và đại diện để phân tách thông tin.
• Nhóm các dữ liệu tương tự lại với nhau
• Loại bỏ thông tin lặp lại
• Sắp xếp lại dữ liệu để so sánh nhanh

Làm thế nào nó thực hiện?

Thiết kế lại cùng với một số bản sửa lỗi đã được lên kế hoạch phát triển và thông qua kết quả từ thử nghiệm khả năng sử dụng, dự kiến ​​sẽ tăng năng suất lên gấp 2 lần.

Vì điều này vẫn đang được phát triển nên không thể chia sẻ hiệu suất cuối cùng và KPI ngay bây giờ nhưng tôi sẽ cập nhật tại đây ngay khi nó hoạt động.

Tôi vừa học cái gì đấy?
Hầu hết công việc tôi đã làm trước dự án này đều liên quan đến việc thêm các tính năng thiết kế mới vào các trang đích của Ứng dụng hoặc trang web của probo.
Do đó, bản thân việc làm việc trên một tập dữ liệu khổng lồ như vậy đã là một thách thức, tôi đã học được rất nhiều điều về cách UX là kết quả trực tiếp của cách UI đã được triển khai.

Ngoài ra, đối với những người đam mê thiết kế, đây là liên kết đến một bài viết trên trang web của nhóm NN đã giúp tôi rất nhiều trong việc hiểu và thiết kế các bảng dữ liệu.

Tái bút: Tôi cũng đã học cách thường xuyên ghi lại quá trình thiết kế vì nghiên cứu điển hình này khiến tôi mất quá nhiều thời gian để viết

Cái gì tiếp theo?

1. Khám phá các tương tác vi mô cũng như các trạng thái trống để thêm chút thú vị giữa tất cả các công việc, hiện chưa được đề cập do thời gian gấp rút.
2. Khám phá các phím tắt để sử dụng công cụ, vì hiện tại mọi người trong nhóm đều có MacBook (flex 101 ) do đó, bàn di chuột hiện tại rất hiệu quả và dễ sử dụng.
3. Hiện tại, việc thiết kế lại chỉ phần chi tiết người dùng đã được thực hiện, giai đoạn tiếp theo sẽ là thiết kế lại tất cả các phần khác của Cerebro.

Xin cảm ơn đội ngũ CX tuyệt vời của chúng tôi, tôi thực sự đã xông vào phòng của họ ít nhất 5 lần một ngày trong dự án này, họ đã trả lời tất cả các câu hỏi và nghi ngờ của tôi theo cách tốt nhất có thể và điều này đặc biệt là trong Mùa giải IPL, thời điểm bận rộn nhất thời gian trong năm!

Cũng xin cảm ơn đội ngũ thiết kế tuyệt vời của tôi ❤️ cũng như tất cả chủ sở hữu sản phẩm đã giúp tôi đưa ra những phản hồi và đề xuất có giá trị trong suốt thời gian qua.

Cảm ơn vì đã đọc! Hẹn gặp lại các bạn với một case study khác

Nói lời chào với Nidhi trên LinkedIn • Instagram • Twitter