데이터 모니터링 대쉬보드 리디자인
Company
Cascade Strategy
Project type
반응형 웹
Team
PM
프로덕트 디자이너 (본인)
엔지니어 리드
4-5 소프트웨어 엔지니어
Role
문제의 근본 원인 및 목표 정의
리서치/아이디어 도출
UX/UI 디자인
핸드오프/디자인 QA
테스트
이터레이션
Overview
Cascade Strategy는 비지니스의 목표 전략을 계획, 실행 및 모니터링을 용이하도록 돕는 업무 협업 툴입니다. 해당 프로젝트에 앞서 기존의 운영되던 프로덕트를 폐쇄하고 전면적인 리빌딩을 결정하기로 한 상태였습니다.
해당 프로젝트의 목표는 사용자가 실시간으로 업무의 진행 상황을 모니터링하고, 데이터를 통해 인사이트를 얻고, 그에 따른 적절한 조치를 취할 수 있는 사용자 친화적인 데이터 대시보드를 구축하는 것이었습니다. 저는 이 차세대 데이터 대시보드의 총체적인 사용자 경험 디자인을 약 6개월 동안 리드했습니다. 차트 생성, 데이터 시각화, 팀원간의 공유, 데이터 인사이트에 따르는 팔로잉업 조치, 유료플랜 전환 등을 포함한 주요 기능들을 디자인 했으며, 해당 케이스 스터디는 새로운 데이터 차트를 생성하여 대쉬보드에 추가하는 경험 개선에 관한 프로세스만 다루고 있습니다.
Summery
💀 문제점
새로운 차트 생성 시 높은 이탈률 (42%), 특히 처음 차트 생성 시
다양한 차트를 만들 수 있는 옵션 부족으로 거래 성사에 실패한 케이스 다수
💡 목표
유저가 데이터 대쉬보드의 효용성을 즉각적으로 인식할 수 있도록 직관적이고 빠른 차트 생성 경험을 제공
사용자 각각의 케이스에 따라 다양한 데이터 시각화를 시도해보며 최적의 차트를 직접 찾아 구현할 수 있는 사용자 맞춤형 기능 확장
📈 비즈니스 기회
사용자 참여율 증가
(activation & retention rates)
충성 고객 유지 및
프리미엄 플랜 업그레이드 유도
👏 결과
이탈률(bounce rate) 20% 감소 (42% > 22%)
새로운 차트 생성을 위한 작업 수행 속도 86% 단축
이전 버전을 경험한 100%의 사용자가 새로운 디자인이 더 직관적이고 사용하기 쉽다고 응답
Process
1차 리서치
거시적 이해
비모니터링 인터뷰Unmoderated
interview
데이터 분석/데이터 툴 사용자 행동모델 대한 일반적 이해를 얻기 위해, 이상적인 고객 프로필(ICP)에 부합하는 5명의 참가자와 비모니터링 인터뷰를 진행했습니다.
총 12개 질문 문항 중 예시
팀에서 당신의 업무 역할은 무엇이며, 당신의 회사는 어떤 산업에 속해 있나요?
새로운 차트를 얼마나 자주 만드나요?
차트를 만들 때 어떤 툴을 사용하며, 그 중에서 가장 많이 사용하는 기능은 무엇인가요?
차트를 만들기 전에 어떤 차트를 만들지 명확히 알고 있나요, 아니면 최적의 차트를 찾기 위해 여러 차트 유형과 데이터 소스를 계속해서 바꿔보나요?
친화도 다이어그램Affinity diagram
기존 툴의 대시보드의 문제점과 사용자 요구사항을 수집하고 내용에 따라 분류했습니다. 해당 내용은 고객들과 매일 소통하는 사내 고객관리 팀(CSM), 세일즈 팀과 인터뷰 및 워크샵을 진행하며 수집했습니다.
1차 리서치
인사이트
Persona
🤔 초기/일반 사용자
조직 내 역할/직책
개인 기여자 (Individual contributors)
운영자 (Operators)
팀 관리자
임원 (Executives)
데이터 분석 툴 숙련도
Excel/PowerPoint에서 데이터 시각화 경험
제공된 시각화 데이터를 읽는것에 더 익숙
대시보드에서의 사용자 니즈/행동모델
내가 만들 수 있는 어떤 차트 옵션들이 있는지 알아보는데 오래걸린다. 직관적으로 이해하고 싶다.
차트들이 내 업무에 어떻게 도움이 되는지 잘 모른다.
어떤게 좋은 차트인지, 좋은 차트를 어떻게 만드는지 잘 모른다. 그리고 이를 위해 따로 노력해본 적 없다.
🤓 파워 유저
조직 내 역할/직책
데이터 분석가 (Data analysts)
리스크 관리자 (Risk managers)
팀 관리자
임원 (Executives)
데이터 분석 툴 숙련도
데이터 시각화/ 데이터 툴 사용에 익숙함
MS Power BI, Hubspot과 같은 다른 데이터 분석 도구와 비교하며 선택할 수 있음
Cascade에 불러와서 적용시킬 수 있는 대량의 데이터를 이미 다루고 있음
대시보드에서의 사용자 니즈/행동모델
데이터 시각화에 제각각 다양한 목적이 있으며 각 목적에 따라 가장 효과적인 차트를 만들고 싶다.
최적의 차트를 만들기 위해 여러가지 모양과 데이터 리소스를 바꿔가며 적용해본다.
2차 리서치
문제의 근본적 원인에 대한 심층 분석
1차 리서치 인사이트를 바탕으로 기존 버전의 Cascade 툴에서 사용자가 데이터 시각화를 위한 작업을 완료하는 데 어려움이나 혼란을 겪은 지점을 다음 리서치를 통해 분석했습니다.
관찰
Observation
Hotjar에서 대시보드의 마우스 추적 관찰.
고객 성공 관리(CSM)팀과 대시보드 경험과 관련된 고객의 미팅을 관찰
모니터링 인터뷰Moderated
interview
CSM 팀 세 명, 헤비 유저 한 명, 일반 유저 두 명을 포함한 여섯 명과 모니터링 인터뷰를 진행.
사용성 테스트Usability test
기존 툴 대시보드에서 두 가지 다른 작업 시나리오로 사용성 테스트를 진행:
팀원들의 작업 진행 상황을 비교하는 막대 차트를 생성해 주세요.
대시보드를 5분 동안 탐색하고 생성할 수 있을 것 같은 차트를 모두 알려주세요.
+대시보드를 5분 동안 탐색하고 생성하고 싶은 차트를 모두 알려주세요, 이유를 알려주세요.
2차 리서치
인사이트
페인포인트
명확하지 않은 제품의 효용성
부족한 어포던스(Affordance)와 시그니파이어(Signifier)로 인해 어떤 차트들을 만들 수 있는지, 차트 생성을 위해 무엇을 어디서부터 시작해야 할지 파악하기 어려움
복잡한 워크플로우
복잡한 워크플로우로 인해 높은 러닝커브(Learning curve), 학습 용이성이 떨어져 차트를 생성하는 방법을 익히는데 여러번의 에러와 반복 작업을 필요로 함
너무 많은 클릭과 선택
지나치게 많은 클릭으로 인해 사용자가 피로감을 느끼며 이탈 가능성이 높아짐
솔루션 방향
발견용이성
Discoverability
사용자에게 무엇을 해야 하는지와 시작 지점을 명확하게 안내
명확한 피드백과
간결한 워크플로우
사용 가능한 옵션과 불가능한 옵션에 대한 명확한 시각적 피드백을 제공하여 오류를 최소화
선택 과정 단순화
불필요한 선택옵션을 제거하고 사용자가 신속하게 올바른 선택을 할 수 있도록 간단하고 효율적인 프로세스를 제공
(How might we..?)
어떻게 하면 사용자들이 대시보드의 효용성과
사용 방식을 더 잘 이해할 수 있을까요?
아이디에이션
리서치 결과를 팀원들과 공유하고 HMW (How Might We) 아이디어 워크숍을 진행했습니다. PM과 저희 팀의 모든 개발자, CSM 팀이 참여했습니다.
유저플로우/
와이어프레임/
장단점 분석
아이디어 세션을 바탕으로 다음과 같은 세 가지 아이디어를 도출했습니다:
대시보드 템플릿: 특정 산업 또는 팀을 위한 여러가지 차트로 구성된 사전 설계된 대시보드
위젯 템플릿: 특정 목적을 가진 사전 설계된 단일 차트
커스텀 차트 빌더: 완전히 커스터마이징 가능한 데이터 시각화 빌더
유저플로우와 와이어프레임을 정의하고, 각각 솔루션에서 예상되는 장단점 및 기술적 제약 사항을 나열해 비교분석 했습니다. 이를 토대로 해당 프로젝트와 프로덕트 전반에 영향을 미칠 수 있는 요소들을 팀원들과 함께 논의했으며 현실성있는 로드맵을 수립했습니다.
Priority
각 아이디어의 이점과 전체 로드맵 목표에 따라 효과적인 출시를 위해 런칭 전략을 수립했습니다.
대시보드를 포함한 Cascade 제품 자체가 MVP로써 첫 출시를 앞두고 있었기 때문에, 모든 유저가 최초유저가 되는 상황이였습니다. 대시보드의 효용성을 인식시키는 것이 가장 우선순위로 두고 쉽고 빠르게 데이터 차트를 생성할 수 있는 '위젯 템플렛'을 먼저 런칭하기로 했으며, 단계적으로 '커스텀 차트 빌더'를 출시해 제품 확장성을 확보하기로 했습니다. '대시보드 템플릿'은 실제 주요 사용자에 대한 정보를 바탕으로 유용한 템플릿을 제공할 수 있기 때문에 충분할 정보를 확보할 수 있을 때까지 보류하기로 결정했습니다.
위젯 템플릿 디자인 솔루션
Pre-designed single chart for specific purposes
Key decision 1
사용자가 사전에 어떤 차트들을 만들 수 있는지 명확히 안내
Before
기존 카테고리가 명확하지 않음. Quick Start 와 Custom의 차이를 이해할 수 없음
일부 아이콘과 설명을 읽어도 어떤 차트를 만들 수 있는지 이해하기 어려움
After
왼쪽에 목적별로 분류한 탭을 제공하여 사용자가 원하는 차트를 쉽게 찾을 수 있도록 안내 (ex, 내 업무상황, 비교하기, 시간에 따른 진행상황)
사용자가 사전에 정확히 예상할 수 있도록 제목, 설명, 썸네일 이미지를 명확하게 제공
Key decision 2
차트생성을 위한 선택과정 최소화 및 단순화
Before
지나치게 많은 클릭과 반복적 스크롤링을 필요로 하는 결정 과정으로 인해 차트 생성을 완료하는 데 사용자가 혼란스럽고 피로감을 느낌
제목 입력을 스킵하는 사용자 다수 관찰됨. 필수 입력 필드이기 때문에 에러 메세지가 뜸
After
위젯 템플릿을 두세 번의 클릭만으로 차트생성을 완료할 수 있으며, 차트 유형과 데이터 소스가 최적의 사용을 위해 사전 구성되어 있음. 사용자는 대시보드에 차트를 빠르게 추가하고 기능과 효용성를 직관적으로 인식할 수 있음
설정의 마지막 단계로 제목 입력 필드를 배치하고 이를 선택 사항으로 만들어 이 단계에서 사용자가 쉽게 건너뛸 수 있도록 하고, 만들어진 차트가 추가된 대시보드 화면에서 추후에 제목을 편집할 수 있도록 활성화함
1차 런칭을 위한
10개 이상의 위젯템플릿
위젯 템플릿 라이브러리는 산업 전반에서 일반적으로 사용되는 차트들을 제공합니다.
1차 런칭에서 어떤 위젯 템플릿을 제공할지 결정하기 위해, ICP(이상적 고객 프로필)의 사용자 차트 사용 케이스, 사용자 온보딩 과정에서의 제한된 데이터 소스로 가능한 차트, 데이터 시각화의 모범 사례 및 접근성을 리서치 했습니다. 각 위젯은 특정 목적을 충족하도록 설계되어 사용자가 데이터를 효율적으로 시각화하고 해석할 수 있도록합니다.
커스텀 차트 빌더 디자인 솔루션
Fully customizable chart building experience to expand capability
Key decision 1
워크플로우 간소화 및 최적의 결과를 위한 반복적 시도의 용이성
Before
비효율적인 선형 워크플로우. 첫 화면 내 숨겨진 영역이 있어 이를 고려하지 않고 처음에 노출된 부분만 고려하여 의사결정을 하게 됨. 추후 사용자가 스크롤을 내렸을 때 예상치 못하게 더 입력해야 할 추가적 과제를 발견해 피로감을 느낌
사용자가 제한된 사이드바 영역에서 선택사항들을 확인하고 속성을 전환하기 위해 반복적으로 스크롤을 올리고 내려야 함
After
커스텀 차트 빌더가 화면 전체를 차지하여 사용자가 차트 구성에 필요한 모든 요소를 한 눈에 볼 수 있음
F형 리딩패턴을 차용해 먼저 정의해야 하는 속성 영역을 배치
Key decision 2
선택 가능한 옵션에 대한 빠른 시각적 피드백
Before
모든 선택 옵션을 드롭다운 메뉴를 이용해서 선택.
때문에 차트 유형에 따라 변동되는 선택가능한 옵션을 인식하기 어려움. ex. X축에 선택가능한 옵션이 바그래프에서는 7가지, 라인그래프에서는 1-2가지로 변경됨.
사용자가 차트 유형을 변경할 때마다 드롭다운 메뉴를 클릭해서 가능한 옵션을 확인해야 하기 때문에 맥락을 잃기 쉽거나, 가능한 옵션이 변동되는지 조차 파악할 수 없음.
After
차트 유형에 따라 활성화된 상태와 비활성화된 상태를 명확하게 색상으로 표시하여 사용자에게 즉각적인 시각적 피드백을 제공
이를 통해 사용자는 특정 차트 유형에 적용 가능한 옵션을 쉽게 이해할 수 있습니다.
Key decision 3
사용자가 직관적으로 커스터마이징 차트를 만들 수 있는 워크플로우
드래그 앤 드롭 인터랙션을 통해 사용자는 직관적으로 커스터마이징 차트를 생성. 초록색과 파란색의 시각적 색상 가이드는 특정 옵션과 정의할 속성이 서로 어떻게 상호작용하고 최종 데이터 시각화에 어떤 영향을 미치는지 명확히 이해할 수 있도록 도움.
성공 지표
이탈률 감소
(Amplitude)
이탈률을 20% 감소시키는 것(42% > 22%) 은 사용자 참여와 유지율의 향상을 의미합니다. 이 지표는 위젯 라이브러리에 처음 접근했지만 차트 추가 작업을 완료하지 못한 사용자 비율을 측정했습니다. 이탈률을 줄임으로써, 새로운 디자인은 더 많은 사용자가 차트 생성 과정을 완료하도록 학습 곡선을 낮추고 사용자 만족도를 높였습니다.
수행속도 단축
(Usability test)
새로운 솔루션을 통해 작업 수행 속도를 86% 단축하여, 효율성과 사용성을 크게 향상시켰습니다. 사용자는 작업을 더 빠르게 완료할 수 있어 사용자 만족도가 증가했고 이탈율 감소에도 큰 도움을 주었습니다. (7-15분 > 1-2분)
사용자 만족도
(Interview)
이전 버전을 경험한 사용자의 100%가 새로운 디자인이 더 직관적이고 사용하기 쉽다고 응답함으로써, 사용자 만족도는 최고 수준에 도달했습니다. 이 긍정적인 피드백은 새로운 솔루션이 사용성 문제를 성공적으로 해결하고 더 사용자 친화적인 경험을 제공했음을 나타내며, 결과적으로 사용자 만족도와 전반적인 제품 인식이 향상되었습니다.
팀원 피드백
(Feedback in retro)
7명의 팀원 전원이 매우 만족했습니다.😄
""위젯 템플릿 디자인이 정말 마음에 듭니다. 훌륭한 팀입니다. 😍"
"새로운 UX가 우리의 목표 달성에 훨씬 더 도움이 됩니다. 고마워요, Ariel!"
