Optimizing New Customer Profile Page

Period

2023.04 - 2023.11

Team

ChartMogul

Tools

Figma, Notion, Slack

Project Overview

Improve the design after renewal of the profile page for B2B customers

Since the introduction of the CRM feature at ChartMogul, a leading B2B SaaS company, we witnessed a significant transformation in the layout of our existing customer page. While these changes were well-received by CRM enthusiasts, we took note of feedback from users who didn't actively utilize this feature. Their concerns centered on the design not catering to their specific needs. In response, we embarked on a mission to refine the new customer page, ensuring that all users could effortlessly access vital information in a more compact format.

My contribution

As a product designer, I initiated the process by conceptualizing a design wireframe aimed at enhancing the page. This initial design underwent a collaborative refinement process, wherein I worked closely with stakeholders to ensure alignment with our product goals. Following the successful implementation of the design, I took it a step further by meticulously conducting design QA to fine-tune the design output.

맥락

차트모굴, 구독 분석 플랫폼, CRM 기능을 출시했습니다.

우리의 CRM 기능은 B2B SaaS 제품 내에서 중요한 구성 요소로 기능합니다. 시간이 지남에 따라 사용자들은 점점 더 ChartMogul 계정에 CRM과 같은 활동을 통합해 왔습니다. 이러한 활동에는 고객 프로필에 사용자 정의 속성 및 태그를 추가하고 고객 목록을 작성하는 것이 포함됩니다. 따라서 2023년에 이 기능을 공개하게 되면서, 포괄적인 고객 관리에 맞춘 구성 요소를 포함하기 위해 고객 페이지를 전면적으로 개편해야 했습니다.

문제 설명

CRM 기능 출시 후, 많은 고객들이 이전 버전의 프로필 페이지를 원했습니다. 특히 비 CRM 사용자들로부터 그러했습니다. 이러한 변화는 가끔씩 큰 빈 공간을 만들어냈습니다.

우리는 전체 고객 페이지를 재구성하여 커뮤니케이션 트랙을 도입했습니다. 그러나 이 개편은 의도치 않게 활동적인 CRM 사용자가 아닌 사용자에게 오른쪽 섹션을 비워두게 만들었습니다. 한편, 왼쪽 섹션은 여러 요소로 채워진 상태로 남아 있었습니다. 이 불균형은 사용자가 필수 정보를 접근하기 위해 광범위하게 스크롤해야 하도록 강요했으며, 이는 특정 사용자 세그먼트 사이에서 불편함과 최적이 아닌 사용자 경험으로 이어졌습니다.

빈 공간

CRM을 적극적으로 사용하지 않은 사용자들의 피드백:

“저는 새로운 사용자 경험 변화에 어려움을 겪고 있습니다. 최근에 어떤 고객을 조회해도 거대한 빈 "활동" 영역이 존재합니다. 이는 이제 저에게 단위 차트와 구독 정보를 보기 위해 스크롤을 내려야 한다는 뜻이며, 이는 저안을 저속하게 만들고 있습니다. 이전 보기로 돌아가고 거대한 활동 영역을 제거할 수 있는 방법이 있을까요?”

“고객 프로필 디자인을 사용자 지정할 수 있나요? 지금 사용자 정의 속성은 왼쪽에 있고, 오른쪽에는 큰 빈 공간이 있습니다. 사용자 정의 속성 테이블이 양쪽에 나누어져 있던 이전 버전이 작업하기 더 쉬웠습니다.”

"연락처 기록에 대해 할당된 UI 공간은 낭비입니다. 저희 팀은 CRM 공급업체로서 귀사의 제품을 CRM으로 사용할 일이 없을 것입니다. 가능하다면 UI를 이전 보기로 전환해 주셨으면 합니다."

비CRM 사용자 포함하여 사용자가 고객 프로필 정보를 효율적으로 접근하고 볼 수 있도록 우리는 어떻게 해야 할까요?

목표

새 고객 페이지가 다양한 사용자에게 효과적으로 서비스를 제공하는지 확인하십시오.

종합적인 정보 모음을 단일의 간결한 페이지에 통합하세요.

디자인 탐색

많은 반복을 통해 현재 프로필 페이지에 대한 많은 디자인 옵션을 생각해냈습니다.

이 아이데이션 과정을 진행하면서, 우리는 시간이 지남에 따라 명확한 접근 방식에 도달할 수 있었습니다.

현재 프로필 페이지에 대해 많은 반복을 통해 다양한 디자인 옵션을 제시했습니다.

이번 아이디어 도출 과정을 거치면서 시간에 따라 명확한 접근 방식에 도달할 수 있었습니다.

현재 프로필 페이지를 위한 많은 디자인 옵션을 여러 번의 반복을 통해 생각해냈습니다.

이 아이디어 구상 과정을 통해 우리는 시간이 지남에 따라 명확한 접근 방식에 도달할 수 있었습니다.

해결책 1. 페이지의 각 요소에 대한 더 나은 접근성을 위한 칩 UI

변형 1:
구독 섹션을 포함한 각 활동에 대한 필터
변형 2:
별도의 필터로 별도의 구독 섹션과 다른 활동 구분하기
변형 3:
구독 필터와 기타 활동을 위한 기존 드롭다운 버튼만

Variation 1:
Filters for each activity, including Subscriptions section
Variation 2:
Separate Subscriptions section and the other activities with separate filters
Variation 3:
Only Subscriptions filter and the existing dropdown button for other activities

Variation 1:
Filters for each activity, including Subscriptions section
Variation 2:
Separate Subscriptions section and the other activities with separate filters
Variation 3:
Only Subscriptions filter and the existing dropdown button for other activities

이러한 디자인 접근 방식에서는 구독 섹션이 다른 활동에 대한 접근을 제한하게 되었으며, 이는 CRM의 핵심 섹션입니다.

해결책 2. 더 쉬운 탐색을 위해 섹션을 3개의 탭으로 나누기

“Movements” tab
“Profile” tab
“Activities” tab

“Movements” tab
“Profile” tab
“Activities” tab

“움직임” 탭
“프로필” 탭
“활동” 탭

“움직임” 탭
“프로필” 탭
“활동” 탭

3개의 분할 탭은 고객 프로필 정보 및 CRM 관련 섹션을 한눈에 보는 것을 중지했습니다.

디자인 원칙

간단한 사용자 워크플로우

우리는 사용자 친화적이고 직관적인 디자인을 강조하여 사용자가 불필요한 단계나 복잡성 없이 필수 요소에 접근할 수 있도록 했습니다.

타당성

우리는 디자인 구현에 필요한 시간과 노력 평가에 강한 강조를 두었습니다. 이것은 이러한 개선 사항의 전달을 가속화하기 위한 우리의 전략에서 중추적인 요소였습니다.

사용자 피드백

초기 디자인 버전을 확정한 후, 우리는 내부 사용자로부터 피드백을 요청했습니다. 이 소중한 과정은 사용자들이 페이지에서 어떤 특정 요소를 찾고 있는지에 대한 통찰력과 더 깊은 이해를 제공해 주었습니다.

디자인 전략

2개의 탭 만들기: “프로필”과 “구독”

사용자가 페이지 하단으로 스크롤하여 일부 요소를 보기 위해 번거로운 일이 없도록 사용자의 프로필과 구독 정보를 탐색할 수 있는 새로운 탭 바를 만들었습니다.

드롭다운 UI를 칩으로 변환하기

우리는 오른쪽 활동 섹션에 더 많은 요소를 추가하면서 피드를 더 빠르게 필터링하기 위해 필터 칩을 도입했습니다.

활동 섹션

우리는 페이지 하단에 위치했던 "MRR Movements"와 "Transactions"를 "Activity" 섹션에 통합하여 오른쪽 활동 피드에 배치하였습니다. 이를 통해 사용자는 긴 스크롤 없이도 중요한 데이터를 확인할 수 있습니다.

구독 탭

우리는 페이지를 두 개의 탭으로 나누었고, 다른 요소 없이 "구독" 탭에 MRR 차트, 구독 테이블, MRR 이동 및 거래 테이블을 포함했습니다. 사용자는 긴 스크롤 없이 쉽게 구독 정보를 검토하기 위해 이 탭에 접근할 수 있습니다.

헤더 디자인

고객 프로필의 주요 섹션을 재설계하는 것 외에도, 헤더가 차지하는 수직 공간을 줄임으로써 더 큰 영향을 미칠 수 있는 가능성을 인식했습니다. 이 변경은 사용자들이 페이지의 주요 섹션에 더 효율적으로 접근할 수 있게 해줍니다. 다양한 디자인 접근 방식을 고려한 결과, 기존 레이아웃에 맞는 가장 적합한 솔루션을 찾았습니다.

디자인 결과

구현

개발 과정이 진행됨에 따라, 특정 디자인 세부 사항을 더욱 향상 및 정제할 수 있는 여러 영역을 확인했습니다.

Before

후에

MRR 이동 테이블 보기 다루기

MRR Movements 테이블의 프레젠테이션과 관련하여, 우리의 초기 디자인 접근 방식은 타임라인 요소 내에서 단일 유형의 아이콘을 표시하고 각 MRR Movement 유형에 대한 아이콘을 보여주는 것이 었습니다. 그러나 보다 직관적인 디자인을 추구하면서 대안 옵션을 탐색하기 위한 브레인스토밍 세션에 참여했습니다. 궁극적으로 우리는 테이블 내에서 특정 그룹을 위한 가장 대표적인 아이콘을 보여주기로 결정했습니다.

Before CRM release
After CRM release (2023.04)
Updated design (2023.11)

디자인 반복

CRM 출시 전

CRM 릴리스 후 (2023.04)

업데이트된 디자인 (2023.11)

결론

많은 사용자들이 새로 디자인된 페이지에 대한 만족감을 표현했습니다. 하지만 CRM 기능을 사용하지 않는 특정 사용자 그룹의 요구를 계속 고려해야 합니다.

결과

이전에 디자인에 불만을 표시한 사용자들에게 디자인 변경에 대한 피드백을 수집하기 위해 조기 액세스를 제공했습니다.

나는 이전 고객 프로필 페이지에 부정적인 피드백을 보낸 사용자들의 정보를 모았고, 디자인 변경 사항을 알리고 테스트할 수 있는 초기 액세스를 제공하기 위해 이메일을 보냈습니다. 그 후, 우리는 그들의 사용자 역할과 비즈니스 모델에 따라 추가 개선 사항을 고려해야 한다는 몇 가지 의미 있는 피드백을 받았습니다.

“나는 그것이 마음에 든다. 내가 필요하지 않았던 CRM이 내 인스턴스에 강제로 적용된 것이 불행했고, 사용자가 아니라면 많은 공백이 생긴다 그래서 탭 시스템이 도움이 된다. 여전히 CRM과 관련된 모든 항목을 숨길 수 있으면 좋겠다. 클리오에서 이벤트 섹션이 느리게 로드되는 것을 보았다. 많은 이벤트가 있다. 탭을 서로 바꿀 수 있고 구독이 기본 탭이 되었으면 좋겠다.”

- 고객 A

“나는 그것을 좋아합니다. 내가 요청하지 않았는데 CRM이 내 인스턴스에 강제로 설치되어 불행했으며, 사용자가 아니라면 많은 여백이 생겼습니다 그래서 탭 시스템이 도움을 줍니다. 여전히 CRM 관련 부분을 모두 숨길 수 있기를 바랍니다. 나는 많은 이벤트가 있는 Clio에서 이벤트 섹션의 로딩 속도가 느리다는 것을 알았습니다. 탭을 바꾸고 구독을 기본 탭으로 설정할 수 있다면 좋겠습니다.”

- 고객 A

“나는 그것을 좋아해. CRM이 내 인스턴스에 강제로 도입되는 것이 아쉽고, 사용자가 아니면 많은 빈 공간이 생겼습니다 그래서 탭 시스템이 도움이 됩니다. CRM 관련 부분을 모두 숨길 수 있었으면 좋겠습니다. 많은 이벤트가 있는 Clio에서 이벤트 섹션이 로드되는데 느리다는 것을 알아차렸습니다. 탭을 서로 바꿔서 기본 탭으로 구독을 설정할 수 있었으면 좋겠습니다.”

- 고객 A

“차트모귤에 대한 새로운 초점이 CRM이라는 것을 분명히 이해하지만, 이러한 변화는 우리에게 이익이 되지 않습니다. 우리는 오직 분석만 사용하고 있으며, 솔직히 말해서 Salesforce와의 통합을 보고 싶습니다. 우리는 Salesforce에서 ChartMogul로 데이터를 옮기는 데 많은 시간과 에너지를 씁니다. 이 업데이트 자체에 나쁜 점은 없지만, 고객 세부 정보와 구독 세부 정보를 분리하게 만듭니다. 제가 판매 기회를 작업할 때는 그렇게 하는 것이 이해가 됩니다. 하지만 고객의 간략한 프로필을 파악하려고 할 때, 세분화 필드와 구독 이력을 동시에 볼 수 있어야 합니다. ...”

- 고객 B

“CRM이 ChartMogul의 새로운 초점이라는 것을 확실히 이해하지만, 이러한 변화는 우리에게 이점이 아닙니다. 우리는 오직 분석만 사용하고 있으며, 솔직히 말해서 Salesforce와의 통합을 보고 싶습니다. 우리는 Salesforce에서 ChartMogul로 데이터를 이동하는 데 많은 시간과 에너지를 소비합니다. 이 업데이트 자체에 나쁜 점은 없지만, 고객 세부정보와 구독 세부정보를 분리시킵니다. 내가 판매 기회를 작업하는 경우, 그것은 이해가 됩니다. 하지만 고객의 빠른 프로필을 얻으려고 할 때, 세분화 필드와 구독 이력을 동시에 봐야 합니다. ...”

- 고객 B

“차트모구엘의 새로운 초점이 CRM이라는 것을 분명히 이해하지만, 이러한 변화는 우리에게 도움이 되지 않습니다. 우리는 오직 분석만 사용하고 있으며, 솔직히 Salesforce와의 통합을 보고 싶습니다. 우리는 Salesforce에서 ChartMogul로 데이터를 이동하는 데 많은 시간과 에너지를 소비하고 있습니다. 이 업데이트 자체는 본질적으로 나쁜 것은 아니지만, 고객 정보와 구독 정보를 분리합니다. 제가 영업 기회에 대해 작업하고 있다면, 그건 이해가 됩니다. 하지만 고객의 빠른 프로필을 얻으려고 할 때는 세분화 필드와 구독 이력을 동시에 봐야 합니다. ...”

- 고객 B

테이크아웃

숫자 항목이 포함된 표 디자인 경험

MRR Movement 및 거래 테이블을 설계하는 과정에서 복잡한 수치 데이터를 효과적으로 표시하는 데 어려움이 있었습니다. 처음에는 이러한 값들이 어떻게 제시되어야 하는지에 대한 이해가 제한적이었습니다. 그러나 이 경험은 특히 비즈니스 제품 테이블을 맥락으로 하여 귀중한 디자인 연습이 되었습니다.

디자인 아이디어를 확장할 기회

이 장기 프로젝트에서 작업하면서 다양한 디자인 접근 방식을 탐구하고 이해관계자와 논의하며 다양한 아이디어를 시험해 볼 수 있는 귀중한 기회를 얻었습니다. 이 여정 동안 저는 창의성을 발휘하고 사용자 요구에 대한 깊은 이해를 얻으며 제품의 논리에 부합해야 했습니다. 이러한 경험은 제 디자인 사고와 관점을 크게 확장시켰습니다.

사용자 테스트 기회의 부족

업데이트를 구현하기 전에 우리의 디자인 성공을 평가하기 위해 사용자 테스트를 진행하고 싶었지만, 불행히도 그렇게 할 기회가 없었습니다. 그러나 앞으로 더 나은 개선을 위해 사용자 테스트가 가치 있을 것이라고 믿습니다.