구름IDE 대시보드 개선하기
불만이 있는 고객 중 15%의 고객만이 기업에 불만을 토로한다.
불만은 있으나 드러내지 않는 고객이 70%이상이다.만족을 얻지 못한 고객의 91%는 그 회사의 물건을 다시는 구매하지 않으며, 최소한 9명에게 자신이 겪은 불쾌감을 이야기 한다.
불만이 있는 고객 중 20%는 거래처를 옮긴다.
고객의 이탈율을 5%줄이면 고객생애가치는 85%의 증폭효과가 있다.신규고객 획득 비용은 고객유지비용의 5배 소요된다.
Technical Assistance Research Program 조사 중
서비스 이용에 불만이 있을 때 대부분 별다른 피드백 없이 사용하거나 조용히 떠나 버립니다.
소수의 사람만이 직접 불만을 제기하는데 이는 서비스에 대해 애정이 있는 사용자입니다. 따라서 어떻게 대처 하는가에 브랜드경험과 사용자 만족도가 달라진다고 생각합니다.
저는 올해 2분기 OKR(Objectives and Key Results)을 VOC(Voice Of Customer)에서 제기되는 사용성 문제를 디자인적으로 해결하는 것을 목표로 잡았습니다.
개선안의 100%가 반영되지는 않았지만 최근 일부가 적용되어 문제점을 어떻게 풀어나갔는지 글로 남겨보고자 합니다. (실 서비스와 다른 부분도 있으므로 감안해서 봐주시면 감사하겠습니다.)
컨테이너 생성을 어디서 하나요?
작년 하반기 IDE 서비스 리뉴얼 후 꾸준히 제기 되어온 VOC였습니다. 특정 단계를 거칠 필요 없이 대시보드의 바로 우측 사이드에 있음에도 불구하고 사용자가 컨테이너 생성 버튼을 찾지 못하는 이유를 고민하게 됩니다.
컨테이너 생성의 중요도와 달리 명확하지 못한 명도대비
사이트를 흑백으로 전환해 보니 컨테이너 생성버튼을 찾지 못하는 이유를 바로 알 수 있었습니다.
모든 버튼이 WCAG 2.1을 통과하지는 않지만 ⓑ의 경우는 면으로 채워져 있어 상대적으로 인지하기 쉬웠고, ⓐ와 ⓒ는 선으로 표현되어 있으나 채도 높은 색상과 명도 대비가 높은 부분이 일부 있어 상대적으로 인식이 잘 됩니다.
반면 ⓓ(컨테이너 생성)은 단일 색상으로 이루어져 있고, 색의 면적이 좁으며 ⓒ(product hunt)의 주황색에 시선이 묻혀 찾기가 어렵습니다.
정보가 많은 복잡한 부분에 위치
컨테이너 목록은 각종 컨테이너 정보들로 복잡하게 구성되어 있지만 카드 형식으로 크게 묶어 나름대로 정리가 되어 있으며 사용자는 정보를 얻고자 하는 컨테이너 카드에 주의를 집중하면 됩니다.
반면 컨테이너 생성은 좌측/우측으로 나누어져 있다 해도 위에서 파악한 명도 대비 문제, 주변의 자잘한 버튼들로 인해 눈에 띄지 않는다는 점을 발견했습니다.
서비스를 처음 접하는 사용자는 컨테이너 목록부분에 알림메시지가 나오고, 상단부분에 컨테이너 생성에 대한 popover가 나와야 하지만 실 서비스에서는 반영이 되지 않아 빈화면을 중점적으로 보는 사용자 입장에서 컨테이너 생성을 진짜 어떻게 해야하는지 찾기 어려운 문제점도 가지고 있습니다.
생성된 컨테이너가 이미 있으면 컨테이너 문제가 발생하지 않습니다. (어디서 만드는지 이미 경험적으로 아니까요…) 구름IDE를 처음 이용하는 사용자에게 좋은 경험을 주어야 주 고객으로 발전할 수 있는데 그렇지 못한다는 점에서 심각성을 느꼈습니다.
서비스 플랜정보 VS 서비스를 이용하는 부분
구름IDE 대시보드는 서비스 플랜에 따른 자원 가용량을 알려주는 정보들로 이루어진 상단과, 생성된 컨테이너들을 관리하고 실행하며 서비스를 이용하는 실질적인 부분으로 이루어진 하단으로 나누어 집니다.
컨테이너를 생성은 실질적으로 서비스를 이용한다는 것인데, 서비스 플랜과 자원 가용량을 알려주는 부분에 위치한다는 것은 이용 흐름과 문맥에 맞지 않는다는 점을 발견했습니다.
원인파악을 기반으로 디자인으로 개선
Empty 생성버튼 추가, Header 버튼 정리
대시보드 화면에서는 대시보드 링크가 필요 없으므로 제거했습니다. 복잡했던 소셜, 플러그인 버튼과 컨테이너 생성버튼이 혼재되어있던 부분은 한 줄로 정리했으며 배경색으로 채운 버튼으로 변경해 좌측의 소셜, 플러그인 버튼보다 눈에 띌 수 있도록 시각적 위계질서를 부여했습니다.
문맥에 맞춰 컨테이너 리스트에 생성버튼 삽입
컨테이너를 실질적으로 이용하는 부분에 컨테이너 생성버튼을 추가했습니다. 개설된 컨테이너 수와 총 컨테이너 수를 함께 명시해 사용자가 몇 개를 더 생성할 수 있는지 쉽게 인지할 수 있도록 했습니다.
기존에 Header 영역에 있는 컨테이너 생성 아이콘을 제거하는 것에 대한 의견도 있었으나, 갑자기 한 번에 모든 것이 바뀌면 사용자에게 혼란을 가져올 수 있으므로 단계적으로 Fade-out 하기로 했습니다.
컨테이너 생성 문의 및 VOC 0건 달성
2주 전에 대시보드 컨테이너 생성버튼이 적용되었고, 그 이후로 관련 VOC가 더는 접수되고 있지 않습니다.
구름IDE는 개발자들을 위한 서비스이므로 디자이너로서 개발자만큼의 태스크 지식을 축적하는 데에 한계가 있으므로 개선작업을 진행하기가 어려울 때가 많습니다. OKR을 통해 조그맣더라도 무언가 서비스에 기여를 해서 기쁩니다.
