Product Design · Data Visualization
Data Visualization Dashboard System
13가지 차트와 핵심 지표 카드를 라이트·다크 테마로 구성한 반응형 데이터 대시보드.
Concept Project — HUMAGENT LAB의 웹사이트 구축 역량을 보여주기 위해 자체 기획한 프로젝트입니다.
Dashboard
Monday 20 Sep, 2022
Total Orders Today
1,567
Conversion Rate
12%
New Clients
200
Revenue Day Ratio
5.5:1
Industry
Analytics · Business Intelligence
Project Scope
Dashboard UX/UI · Design System · Responsive Development
ART DIRECTION
브랜드의 성격이 화면에서 느껴지도록
중립적인 그레이 스케일과 선명한 그린 포인트, 넉넉한 카드 간격으로 밀도 높은 데이터를 빠르게 비교할 수 있게 구성했습니다.
Core page system
CONCEPT BACKGROUND
왜 이 웹사이트를 설계했는가
복잡한 운영 데이터를 한눈에 이해할 수 있는 인터페이스가 필요하다는 과제를 바탕으로, Figma Community의 Data Visualization Package를 웹 제품 경험으로 구현했습니다.
이 프로젝트는 실제 고객 의뢰나 가상의 성과 사례가 아닙니다. 특정 고객을 전제로 문제를 꾸미지 않고, 해당 업종에서 유효할 수 있는 제작 접근을 탐구했습니다.
OBJECTIVES
목표
- 핵심 KPI와 변화율을 첫 화면에서 즉시 비교
- 서로 다른 차트 유형을 하나의 시스템으로 통합
- 데스크톱과 모바일에서 동일한 정보 우선순위 유지
APPROACH
접근 방식
- 01Figma의 1440×1024 대시보드 프레임과 컴포넌트 구조를 기준으로 설계
- 02KPI 카드, 라인·스파이더·히트맵·원형·히스토그램 차트를 반응형 모듈로 구현
- 03라이트·다크 테마와 접근 가능한 내비게이션 상태 제공
DELIVERABLES
제작 결과물
대시보드 정보 구조
차트 컴포넌트
KPI 카드 시스템
라이트·다크 테마
반응형 웹 구현
키보드·스크린리더 접근성
MAKING PROCESS
디자인 및 제작 과정
- 01
Inventory
Figma의 차트, 카드와 대시보드 프레임을 구조화했습니다.
- 02
System
색상, 간격과 데이터 상태를 재사용 가능한 시스템으로 정리했습니다.
- 03
Build
테마 전환과 모바일 탐색이 가능한 반응형 제품으로 구현했습니다.
YOUR PROJECT
다음 프로젝트는 당신의 목표에서 시작합니다.
아직 범위가 명확하지 않아도 괜찮습니다. 목표와 현재 상황을 알려주시면 가장 적합한 시작점을 함께 찾겠습니다.