구름IDE 대시보드 개선하기

VOC(Voice Of Customer)를 반영한 디자인 개선 후기

Dong-gri
Dong-gri
May 30 · 6 min read

불만이 있는 고객 중 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였습니다. 특정 단계를 거칠 필요 없이 대시보드의 바로 우측 사이드에 있음에도 불구하고 사용자가 컨테이너 생성 버튼을 찾지 못하는 이유를 고민하게 됩니다.

Image for post
Image for postImage for post
구름IDE 대시보드를 흑백으로 전환한 모습

사이트를 흑백으로 전환해 보니 컨테이너 생성버튼을 찾지 못하는 이유를 바로 알 수 있었습니다.

Image for post
Image for postImage for post
ⓐ chrome web store plugin, ⓑ dashboard, ⓒ product hunt, ⓓ create container (각 버튼에서 가장 명도대비가 높은 곳을 기준으로 측정)

모든 버튼이 WCAG 2.1을 통과하지는 않지만 ⓑ의 경우는 면으로 채워져 있어 상대적으로 인지하기 쉬웠고, ⓐ와 ⓒ는 선으로 표현되어 있으나 채도 높은 색상과 명도 대비가 높은 부분이 일부 있어 상대적으로 인식이 잘 됩니다.

반면 ⓓ(컨테이너 생성)은 단일 색상으로 이루어져 있고, 색의 면적이 좁으며 ⓒ(product hunt)의 주황색에 시선이 묻혀 찾기가 어렵습니다.

Image for post
Image for postImage for post
하단의 컨테이너 리스트와 달리 서비스 Header 부분이 더 복잡해보임

컨테이너 목록은 각종 컨테이너 정보들로 복잡하게 구성되어 있지만 카드 형식으로 크게 묶어 나름대로 정리가 되어 있으며 사용자는 정보를 얻고자 하는 컨테이너 카드에 주의를 집중하면 됩니다.

반면 컨테이너 생성은 좌측/우측으로 나누어져 있다 해도 위에서 파악한 명도 대비 문제, 주변의 자잘한 버튼들로 인해 눈에 띄지 않는다는 점을 발견했습니다.

Image for post
Image for postImage for post
신규 사용자가 보게되는 화면 (우측상단 Create yout first container popover은 미반영)

서비스를 처음 접하는 사용자는 컨테이너 목록부분에 알림메시지가 나오고, 상단부분에 컨테이너 생성에 대한 popover가 나와야 하지만 실 서비스에서는 반영이 되지 않아 빈화면을 중점적으로 보는 사용자 입장에서 컨테이너 생성을 진짜 어떻게 해야하는지 찾기 어려운 문제점도 가지고 있습니다.

생성된 컨테이너가 이미 있으면 컨테이너 문제가 발생하지 않습니다. (어디서 만드는지 이미 경험적으로 아니까요…) 구름IDE를 처음 이용하는 사용자에게 좋은 경험을 주어야 주 고객으로 발전할 수 있는데 그렇지 못한다는 점에서 심각성을 느꼈습니다.

Image for post
Image for postImage for post

구름IDE 대시보드는 서비스 플랜에 따른 자원 가용량을 알려주는 정보들로 이루어진 상단과, 생성된 컨테이너들을 관리하고 실행하며 서비스를 이용하는 실질적인 부분으로 이루어진 하단으로 나누어 집니다.

컨테이너를 생성은 실질적으로 서비스를 이용한다는 것인데, 서비스 플랜과 자원 가용량을 알려주는 부분에 위치한다는 것은 이용 흐름과 문맥에 맞지 않는다는 점을 발견했습니다.


원인파악을 기반으로 디자인으로 개선

Image for post
Image for postImage for post
Image for post
Image for postImage for post

대시보드 화면에서는 대시보드 링크가 필요 없으므로 제거했습니다. 복잡했던 소셜, 플러그인 버튼과 컨테이너 생성버튼이 혼재되어있던 부분은 한 줄로 정리했으며 배경색으로 채운 버튼으로 변경해 좌측의 소셜, 플러그인 버튼보다 눈에 띌 수 있도록 시각적 위계질서를 부여했습니다.

Image for post
Image for postImage for post

컨테이너를 실질적으로 이용하는 부분에 컨테이너 생성버튼을 추가했습니다. 개설된 컨테이너 수와 총 컨테이너 수를 함께 명시해 사용자가 몇 개를 더 생성할 수 있는지 쉽게 인지할 수 있도록 했습니다.

기존에 Header 영역에 있는 컨테이너 생성 아이콘을 제거하는 것에 대한 의견도 있었으나, 갑자기 한 번에 모든 것이 바뀌면 사용자에게 혼란을 가져올 수 있으므로 단계적으로 Fade-out 하기로 했습니다.


컨테이너 생성 문의 및 VOC 0건 달성

Image for post
Image for postImage for post
지속적으로 꾸준히 제기되어온 컨테이너 생성에 관한 문의

2주 전에 대시보드 컨테이너 생성버튼이 적용되었고, 그 이후로 관련 VOC가 더는 접수되고 있지 않습니다.

구름IDE는 개발자들을 위한 서비스이므로 디자이너로서 개발자만큼의 태스크 지식을 축적하는 데에 한계가 있으므로 개선작업을 진행하기가 어려울 때가 많습니다. OKR을 통해 조그맣더라도 무언가 서비스에 기여를 해서 기쁩니다.

Image for post
Image for postImage for post
뭔가 하나라도 서비스에 기여해서 기쁨

guleum

Dong-gri LAB

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store