CUSTOMIZE DASHBOARDS
원하는대로 대시보드 위젯을 맞춤 설정하세요
OVERVIEW
SpaceONE은 애자일 방식으로 개발되어 빠르게 진행하고 새로운 서비스를 구현하는 데 중점을 두었습니다. 저와 다른 디자이너들은 기능이 개발되는 대로 디자인했습니다.
Context
결과적으로 4개의 주요 기능에 각각의 대시보드가 만들어졌습니다. 4개의 대시보드는 정보 표시되는 방식이 시각적으로 다르고, 다른 우선순위를 가지고 있었습니다. 이런 문제들로 인해 사용자들이 대시보드를 보고 전반적인 정보를 파악하는데에 어려움이 있었습니다.
우리는 4개의 대시보드를 하나로 결합하기로 결정했습니다. 또한 사용자가 자주 사용하는 위젯의 우선순위를 정하여 마음대로 정렬시킬 수 있도록 하였습니다.
Challenge
RESEARCH
다른 비슷한 제품에 어떠한 유사한 문제가 있는지 이를 어떻게 처리하는지 알기 위해 경쟁사들의 제품 분석을 하였습니다. 제품에 메시지를 효과적으로 전달하는 방법과 플로우를 비교하고 공부하였습니다.
Competitive Analysis
유용한 대시보드가 어떻게 구성되어 있는지 연구하기 위해 인기있는 커스텀 대시보드를 살펴보았습니다. 아래 목록은 커스텀 대시보드가 성공적인 중요한 요인입니다.
동일한 위젯 크기 (또는 높이).
보기나 비교가 명확 그래프 색상.
유익한 데이터를 쉽고 빠르게 파악 할 수 있음.
사용자가 사용하기 편하고 쉬운 플로우.
Wireframe
사용자가 커스텀 대시보드를 사용하는 데 필요한 것이 무엇인지 브레인스토밍하여 플로우를 그렸습니다.
Interview
잠재 사용자를 더 잘 이해하기 위해 사용자 여정을 그려서 6명의 개발자들을 인터뷰하였습니다. 대시보드를 어떻게 사용하는지 플로우를 파악하였습니다. 시각화된 고객 여정을 파악하는데 큰 도움이 되는 인터뷰였습니다.
(1) 내부 인터뷰
삼성은 우리의 주요 고객입니다. 프로토타입을 만들어 3주 동안 Figma 또는 온라인 회의를 통해 수백 개의 의견을 받았습니다. 이를 통해 실제 사용자가 커스텀 대시보드를 어떻게 사용하고 있는지, 어떤 가치를 원하는지 파악할 수 있었습니다.
(2) 유저 테스팅
이 모든 프로세스를 통해 얻은 결과는…
UI/UX 주요 구성요소
미학적으로 잘 정리된 위젯 제공
사용하기 편리한 커스텀 모드 제공
사용자 feedback
대시보드를 이용해서 보고(리포트)할 수 있었으면 좋겠다. (인쇄가 가능하게 정보 제공)
필터 설정이 쉽고 정보 전달이 잘 되어야합니다.
다양한 크기의 위젯이 통일감이 떨어져 정보를 파악하기 어렵다.
체계적이지 못한 위젯들.
불가능한 커스텀 모드.
Pain points
1. 체계적이지 못 한 위젯들
Solution 1:
위젯 디자인을 통일
1.모든 위젯을 모아서 리스트화
(필요한 카테고리 정의)
a single variable-sized component. In this way, engineers can easily construct and maintain consistency in the design.
2. Layout rules 정하기
I checked all widgets to ensure they looked consistent and delivered accurate information.
Small 사이즈 위젯
Medium 사이즈 위젯
Large 사이즈 위젯
Extra large 사이즈 위젯
Solution 2:
차트의 칼라 팔렛트를 만들어서 칼라가 일정한 패턴으로 나타나도록.
대비차이가 큰 칼라 순서로 배치하여서, 칼라로 비교가 쉽습니다.
Design process 1:
Design process 2:
2. 불가능한 커스텀 모드
Solution 1: 커스텀 모드 제작
커스텀 모드 프로토타입
Outcome
current state
사용자가 머무는 시간이
15.3% 늘었습니다.
22년 7월에 성공적으로
정식적으로 런칭하였습니다.
홈 대시보드는 사용자에게 항상 첫 페이지로 보여지는 페이지입니다. Google Analytics 에 따르면 대부분의 사용자는 이 페이지에서 비교적 짧은 시간을 보냅니다. 그래서 저희는 워크스페이스 홈페이지를 만들고 제가 작업한 커스텀 대시보드를 배치하기로 했습니다.
