Portfolio · B2B Dashboard

복잡한 데이터에서
결정을 뽑아내는 화면

애널리틱스 대시보드는 수십 개의 지표 속에서 "지금 무엇을 봐야 하는지"를 먼저 보여주는 정보 아키텍처 중심의 B2B 대시보드 디자인 프로젝트입니다.

B2B UXInformation ArchitectureData VizFigmaD3.js
기획 · 설계 단계
OverviewReportsSegmentsAlerts
MRR
₩48.2M
▲ 12.4%
Active Users
24,810
▲ 8.1%
Churn
3.2%
▼ 0.8%
NPS
62
▲ 4
Revenue · Last 30 Days
₩1,482,000 avg/day
Conversion
68%
Problem · Solution

대시보드가 어려운 이유

B2B 대시보드는 "모든 걸 보여주자"는 유혹에 빠지기 쉽습니다. 그 순간 사용자는 숫자의 홍수 속에서 길을 잃습니다.

!현재의 문제

  • 첫 화면에 20개 이상의 지표가 동등하게 노출됨
  • 중요 지표와 부가 지표의 위계가 없음
  • 필터가 너무 많아 원하는 뷰를 만들기 어려움
  • 차트가 예쁘기만 하고 의미 전달 실패

✓이 프로젝트의 접근

  • 핵심 KPI 4개 + 서포팅 지표 구조로 위계 확립
  • "질문 → 뷰" 플로우: 사용자가 질문을 고르면 맞춤 뷰 제시
  • 저장된 뷰·세그먼트·알림 기능으로 반복 작업 제거
  • 차트 선정 가이드에 따라 데이터 유형별 차트 표준화
Key Deliverables

디자인 산출물

화면 목업을 넘어 B2B 팀이 바로 쓸 수 있는 정보 아키텍처와 차트 가이드를 포함.

🏗️

정보 아키텍처

핵심 지표 분류, 내비게이션 구조, 페르소나별 기본 뷰 설계.

📈

차트 라이브러리

D3.js 기반 라인·바·도넛·히트맵·펑넬 컴포넌트 + 선정 가이드.

🎛️

커스터마이징 시스템

위젯 드래그&드롭, 저장된 뷰, 팀 공유 권한 UX 플로우.

🔔

알림 & 인사이트

임계값 기반 알림, 이상 감지 노출 UI, 인사이트 카드 패턴.

🌓

라이트 · 다크 모드

장시간 응시를 고려한 색 대비, 차트 팔레트 모드별 자동 전환.

📐

디자인 토큰

간격·타이포·색상 토큰화, 개발팀 CSS 변수 직접 연결.

Process

작업 프로세스

도메인 리서치 → 질문 매핑 → IA → 프로토타입 → 검증.

Phase 1 · Now

도메인 리서치

세일즈·그로스·CS 팀 4명 인터뷰, 실제 쓰는 질문 30개 수집.

Phase 2

질문-뷰 매핑

수집한 질문을 뷰 타입으로 분류, 핵심 KPI 4개 확정.

Phase 3

IA · 프로토타입

와이어프레임, D3.js 차트 프로토, 하이피델리티 디자인.

Phase 4

검증 & 핸드오프

실제 데이터로 UT, 핸드오프 명세, 디자인 토큰 개발 연동.

다른 디자인 프로젝트도 살펴보세요

애널리틱스 대시보드는 junetapa 디자인 포트폴리오의 일부입니다.

디자인 포트폴리오 전체 보기 프로젝트 문의