이 기사에서는 더 나은 고객 지원을 위해 Probo의 내부 도구(Cerebro 라고 함 )를 개선 하는 광범위한 프로젝트 중 하나에서 작업하는 과정에 대해 이야기합니다 .

세레브로란?

Cerebro는 Probo의 모든 것에 대한 단일 정보 소스입니다! 콘텐츠 생성(콘텐츠 생성 및 앱에 푸시), 태그(사용자 태그 생성 및 해당 태그에 작업 할당), 대시보드 및 사용자를 비롯한 여러 섹션이 있는 Probo의 내부 도구입니다.

사용자 정보 섹션 은 CX 팀이 사용자의 불만 사항에 대한 정보를 확인하고 사용자에게 되돌릴 수 있는 사용자 데이터베이스입니다.

이 기사에서는 Cerebro의 사용자 세부 정보 섹션을 재설계한 방법을 살펴봅니다.

브리핑

Probo 고객 지원 팀의 UX 및 생산성을 향상시키기 위해 Cerebro의 사용자 세부 정보 섹션 재설계.

문제 이해

지원팀은 Cerebro를 사용하여 앱에서 수행된 사용자 활동을 확인합니다.

이 작업을 위해 먼저 핵심 사용자 흐름을 식별한 다음 그 안에서 UX 문제를 찾았습니다.

지원팀과 함께 앉아 워크플로를 관찰하고 사용성 문제를 식별하는 동안 일부 티켓을 직접 해결했습니다. 커뮤니티 임원당 1,000장 이상의 티켓을 받았던 IPL 시즌이었기 때문에 작업량이 엄청났습니다.

그들이 프로보 사용자에게 최고의 지원 경험을 제공하기로 결심한 것을 보고 마음이 뭉클해졌고 디자인을 통해 일상 경험을 더 좋게 만들 수 있는 힘을 얻었습니다.

확인된 핵심 문제:

1. 정보에 대한 열악한 스캔 가능성: 사용자의 주요 작업은 Cerebro에서 정보를 얻는 것이지만 테이블을 살펴보면 화면에서 필요한 정보를 찾기 위해 많은 집중을 해야 했기 때문에 많은 인지적 노력이 있었습니다.
2. 복잡한 탐색: 일부 사용자 흐름의 경우 탐색이 복잡하고 숨겨졌습니다.
3. 인지 부하 증가: 이전 디자인은 사용자의 인지 부하를 줄이기 위해 게슈탈트의 계층 구조 및 근접성의 법칙 과 일치하지 않았습니다 .
   또한 주어진 사용자 흐름에서 사용자는 한 테이블의 정보를 기억하고 다른 테이블로 이동하여 작업을 완료하는 데 걸리는 시간을 비교해야 했습니다.
4. 브랜드 아이덴티티가 일치하지 않음: Probo의 브랜딩은 몇 달 전에 재설계되었으므로 Cerebro의 재설계는 새로운 브랜딩과 일치할 수 있는 기회였습니다.

Probo의 앱과 웹사이트는 몇 달 전에 새로운 브랜딩으로 재구상되었으며 내부 도구에서도 동일한 작업을 수행할 적기였습니다.

일부 페이지의 이전과 이후를 살펴보겠습니다.

디자인 — 이전과 이후

이제 이러한 재설계를 하나씩 분석해 보겠습니다.

이전과 이후 — 설계 분석

사용자 요약 섹션:
이 섹션은 사용 가능한 사용자의 기본 정보로 구성되며 세 부분으로 구분됩니다. 유사한 정보가 함께 보관됩니다.

• 사용자의 세부 정보 및 상태와 같은 가장 중요한 정보는 전면에 강조 표시됩니다.
• 작업 우선 순위 지정: 이전 디자인에서는 기본/보조 작업에 대한 계층 구조 없이 3개의 CTA가 있습니다.
  또한 분석 후 CTA나 기본 작업이 아니므로 화면에 직접 집중할 필요가 없다는 것을 알게 되었습니다. 액션 버튼은 '옵션'이라는 하나의 버튼으로 구성됩니다.

• 사이드 내비게이션 바 :
  데이터 테이블이 있는 화면에서는 가로 공간이 가장 중요하기 때문에 최소한의 공간을 차지하는 아이콘 버튼으로 사이드 내비게이션 바 디자인을 재해석했습니다.
• 전체 크기 탐색 모음이 필요한 경우 사용자가 로고를 클릭하면 텍스트+아이콘 버튼이 있는 전체 크기 탐색 모음으로 확장됩니다.
  확장하지 않고 사용자가 전환해야 하는 경우 아이콘 위로 마우스를 이동하여 의미를 확인할 수 있습니다.

하지만 탭을 분리하면 어떻게 다른 탭의 테이블 간에 데이터를 쉽게 비교할 수 있을까요? 잠시 후에 다룰 것입니다!

이제 좀 더 자세한 내용을 살펴보겠습니다.

더 나은 UX를 위한 데이터 테이블 최적화:
데이터 테이블에는 필요한 데이터를 사용자에게 신속하게 제공하는 한 가지 작업이 있습니다.
이 작업을 수행 하려면 관련 정보를 찾기 위한 빠른 검색 기능이 있어야 합니다 .

가장 복잡한 두 테이블인 Balance history 및 Trade History에 대한 Before vs After 디자인입니다.

데이터 스캐닝을 보다 쉽고 빠르게 하기 위해 크게 4가지 사항을 처리합니다.

• 색상 코딩을 통해 관련 정보를 찾고 계층 구조를 추가하고 분리된 정보에 대한근접성 을 찾기 위한 빠른 스캔 기능.
• 유사한 데이터 그룹화
• 반복되는 정보 제거
• 빠른 비교를 위해 데이터 재정렬

성능은?

일부 버그 수정과 함께 Redesign 개발을 계획하고 있으며 사용성 테스트 결과를 통해 생산성이 2배 증가할 것으로 예상됩니다.

아직 개발 중이기 때문에 지금은 최종 성과와 KPI를 공유할 수 없지만 라이브가 되는 대로 여기에 업데이트하겠습니다.

내가 무엇을 배웠습니까?
이 프로젝트 이전에 제가 했던 작업의 대부분은 probo의 앱 또는 웹사이트 랜딩 페이지에 새로운 디자인 기능을 추가하는 것과 관련이 있었습니다.
따라서 이렇게 방대한 데이터 세트를 작업하는 것은 그 자체로 도전이었고, UX가 어떻게 UI 구현 방식의 직접적인 결과인지에 대해 많은 것을 배웠습니다.

또한 디자인 애호가를 위해 데이터 테이블을 이해하고 디자인하는 데 많은 도움이 된 NN 그룹 웹 사이트의 기사에 대한 링크 가 있습니다.

추신: 이 사례 연구를 작성하는 데 너무 오래 걸리기 때문에 디자인 프로세스를 정기적으로 문서화하는 방법도 배웠습니다

무엇 향후 계획?

1. 시간 부족으로 인해 지금은 다루지 않은 모든 작업 사이에 약간의 즐거움을 추가하기 위해 빈 상태뿐만 아니라 마이크로 인터랙션을 탐색합니다.
2. 도구 사용을 위한 키보드 단축키 탐색, 현재 팀의 모든 사람이 MacBook(flex 101 )을 가지고 있으므로 현재로서는 효율적이고 사용하기 쉬운 트랙패드입니다.
3. 지금은 사용자 세부 정보 섹션만 재설계되었으며 다음 단계는 Cerebro의 다른 모든 섹션을 재설계해야 합니다.

멋진 CX 팀에게 감사 인사를 전합니다. 저는 이 프로젝트 기간 동안 문자 그대로 하루에 최소 5번 그들의 방에 들어갔습니다. 그들은 가능한 한 최선의 방법으로 제 모든 질문과 의심에 답했으며 이것은 특히 가장 바쁜 IPL 시즌 동안이었습니다. 올해의 시간!

또한 멋진 디자인 팀 ❤️과 귀중한 피드백과 제안으로 저를 도와준 모든 제품 소유자에게도 감사합니다.

읽어 주셔서 감사합니다! 다른 사례 연구로 곧 만나요

LinkedIn • Instagram • Twitter 에서 Nidhi에게 인사하기