Customize Dashboards
사용자에게 필요한 정보를 한눈에 제공하는 대시보드
Overview
SpaceONE은 멀티 클라우드를 관리하는 플랫폼 입니다. SpaceONE은 애자일 방식으로 빠르게 개발되었고, 새로운 서비스를 만드는 데에 집중했습니다. 그래서 저를 포함한 디자이너들은 기능이 나오는 대로 디자인을 진행했습니다.
그렇게해서 4개의 주요 기능에 각각 대시보드가 만들어졌는데, 문제는 4개의 대시보드들이 다 제각각이었습니다. 정보가 보여지는 방식도 다르고, 우선순위도 다르게 설정되어 있어 사용자들이 전체적인 클라우드 내용을 한눈에 파악하기 어려웠습니다. 결국 사용자들이 대시보드를 쉽게 이해하고 활용할 수 있도록 통일성과 일관성을 고민해야 하는 상황이 되었습니다.
Challenge
우리는 기존에 분산되어 있던 4개의 대시보드를 하나의 통합된 대시보드로 결합하기로 결정했습니다. 이를 통해 사용자는 더 직관적이고 효율적인 방식으로 필요한 정보를 확인할 수 있습니다.
Research - Competitive Analysis
경쟁사 제품 분석을 통해 유사한 문제를 파악하고, 이를 해결하는 접근 방식을 조사했습니다. 특히, 메시지 전달 방법과 사용자 플로우를 비교·분석하며 효과적인 개선 방안을 모색했습니다.
유용한 대시보드가 어떻게 구성되어 있는지 연구하기 위해 인기있는 커스텀 대시보드를 살펴보았습니다. 아래 목록은 커스텀 대시보드가 성공적인 중요한 요인입니다.
동일한 위젯 크기 (또는 높이).
보기나 비교가 명확 그래프 색상.
유익한 데이터를 쉽고 빠르게 파악 할 수 있음.
사용자가 사용하기 편하고 쉬운 플로우.
Wireframe
사용자가 커스텀 대시보드를 사용하는 데 필요한 것이 무엇인지 브레인스토밍하여 플로우를 그렸습니다.
사용자 feedback
Interview
잠재 사용자를 더 잘 이해하기 위해 사용자 여정을 그려서 6명의 개발자들을 인터뷰하였습니다. 대시보드를 어떻게 사용하는지 플로우를 파악하였습니다. 시각화된 고객 여정을 파악하는데 큰 도움이 되는 인터뷰였습니다.
(1) 내부 인터뷰
삼성은 우리의 주요 고객입니다. 프로토타입을 만들어 3주 동안 Figma 또는 온라인 회의를 통해 수백 개의 의견을 받았습니다. 이를 통해 실제 사용자가 커스텀 대시보드를 어떻게 사용하고 있는지, 어떤 가치를 원하는지 파악할 수 있었습니다.
(2) 유저 테스팅
이 모든 프로세스를 통해 얻은 결과는…
UI/UX 주요 구성요소
미학적으로 잘 정리된 위젯 제공
사용하기 편리한 커스텀 모드 제공
대시보드를 이용해서 보고(리포트)할 수 있었으면 좋겠다. (인쇄가 가능하게 정보 제공)
필터 설정이 쉽고 정보 전달이 잘 되어야합니다.
다양한 크기의 위젯이 통일감이 떨어져 정보를 파악하기 어렵다.
사용자 분석을 통해 다음과 같은 주요 불편사항을 확인했습니다:
복잡한 인터페이스: 필요한 정보를 찾는 데 시간이 많이 소요됨.
제한된 커스터마이징 옵션: 개인화된 설정이 어려워 사용 경험이 제한됨.
비효율적인 플로우: 주요 기능 접근 과정이 비직관적이고 단계가 많음.
불충분한 피드백 제공: 작업 완료 여부나 진행 상황에 대한 명확한 알림 부족.
Pain points
불편사항1:
체계적이지 못 한 위젯들
Solution 1: 모든 위젯 디자인 통일
1.모든 위젯을 모아서 리스트화 (필요한 카테고리 정의)
단일 변수 크기의 컴포넌트입니다. 이렇게 하면 엔지니어들이 디자인의 일관성을 쉽게 구성하고 유지할 수 있습니다.
2. Layout rules 정하기
모든 위젯이 일관된 디자인을 유지하고
정확한 정보를 제공하는지 확인했습니다.
Solution 2:
차트의 칼라 팔렛트를 만들어서 칼라가 일정한 패턴으로 나타나도록
대비차이가 큰 칼라 순서로 배치하여서, 칼라로 비교가 쉽습니다.
디자인 과정 1:
디자인 과정 2:
불편 사항2:
불가능한 커스텀 모드
Solution 1: 커스텀 모드 제작
디자인 과정 1:
디자인 과정 1:
Outcome
Current state
