Retargeting In Store의 Dashboard UI & UX 기획 및 개발 후기를 남기려합니다.
Shopify 앱스토어의 다른 회사의 앱 Dashboard UI를 찾아보니 대부분 최소한의 기능으로 기획된 것을 알게 되었습니다. 대부분의 경우 UI 템플릿을 사용하거나 최소한의 차트와 테이블로 구성됩니다.
이는 Dashboard UI의 특성상 판매에 그리 중요한 포인트가 아니라고 생각하기 때문인것 같습니다. 사실 이 부분의 디자인을 아무리 노력해서 구현하더라도 앱 판매에 큰 영향이 없다고 생각했습니다.
하지만 우리는 집중했습니다. 다음은 우리가 집중한 것의 기록입니다.
고객의 Pain Point(우리의 가설)
- 고객은 최대한 빨리 원하는 것을 얻고 싶어 한다.여기서 오래 머물고 싶지 않다.
- 고객은 판단의 고통을 싫어한다.
- 첫 고객은 보이는 모든 것이 스트레스일 경우가 많다.
- 고객은 따스함을 느끼고 싶어 하고 나아가 행복함을 느끼고 싶어한다.
우리의 솔루션
- 원하는 정보에 대한 효율적 접근 (시간, 클릭 수)
- 비전문가들도 할 수 있는 작동 용이성
- 인간적인 따스함과 유머
1. 원하는 정보에 대한 효율적 접근 (시간, 클릭 수)
대부분의 Dashboard UI는 정보를 평평하게 나열하는 방식이다. 이것은 클라이언트가 여러 정보를 종합해서 판단할 수 있도록 환경을 만들어 준다. 여러 가지 챠트와 테이블, 데이터등이 고객에게 나타난다.
일반적인 dashboard 디자인이다. 여러 가지 정보가 빽빽하게 화면에 구성되어 있다.
스크롤을 해서 내리면 더 많은 정보를 보실 수 있게 디자인되어 있다.
우리는 이 화면을 "고객을 긴장시키는 UX"라고 생각했다.
우리는 중요하지 않은 정보는 아예 안 보여주는 것이 더 좋다고 생각했다. 그래서 중요한 데이터와 중요하지 않은 데이터로 나누는 것이 아니라 반드시 봐야 할 데이터와 그렇지 않은 데이터로 구분했다.
반드시 봐야 할 데이터를 어떻게 보여주면 클라이언트가 더 빠른 판단을 할까?를 생각했다. 그러기 위해서는 데이터 속성을 파악해서 빠르게 인식할 수 있는 형태를 정했다. chart, table, text, modal popups, tooltips등.
데이터를 종으로 횡으로 때로는 시간순, 때로는 역순으로 보고 복합적으로 판단하려는 고객은 과감하게 배제했다. 우리는 Google Analytics의 기술을 가지고 있지 않으며 그런 Data를 날것으로 고객에게 제공하기 싫었다.
클라이언트가 스크롤을 하지 않고 정보에 빠르게 접근하기를 원했으며, 마우스의 동선도 최대한 작은 면적을 움직여도 원하는 결과를 얻을 수 있게 설계했다. 최종적으로 웹 페이지 1개 위에 모달 팝업만으로 Dashboard UI를 마무리할 수 있었다. 이거 줄여도 너무 줄인 것 아닐까? 우리는 더 줄일 수 없을 때까지 줄이길 원했다.
결과적으로 적은 클릭수, 좁은 면적의 마우스 동선, 최소한의 웹페이지 개수, 중요한 데이터가 즉각 인식 할 수 있는 형태로 화면에 나타나는 것을 구현 할 수 있었다.
2. 비전문가들도 할 수 있는 작동 용이성
우리는 개발자, 마케터가 아닌 일반 Store의 점주가 통제 및 관리가 쉽도록 Dashboard UI를 기획했다. 100만 개가 넘는 Shopify store중에서 우리는 대형 store보다는 long tail store를 타겟팅 하였다. 왜냐하면 대형 store보다 결정이 빠르고, 새로운 것을 신속하게 도입해서 매출을 올리고 싶어 한다고 생각했기 때문이다. 따라서 전문가(마케터, 개발자 등)가 없는 long tail store의 호감을 얻기 위해 모든 것을 재구성했다.
비전문가가 Dashboard를 이용하려면 전문 용어의 장벽을 낮춰야 했기에 용어들을 대부분 쉬운 것으로 바꿨으며, modal popup의 디자인도 바꿨는데 경고나 위험 같은 아이콘을 전부 삭제하고 그 반대로 따스하고 인간적인 감정의 캐릭터등을 삽입했다.
개인적으로 아동틱한 캐릭터를 사용해야 하는 것에 대해서 반감이 컸다. 어린이를 위한 웹 서비스도 아닌데 감정의 표현이 강조된 캐릭터를 사용하다니... 왜 많고 많은 캐릭터 중에 이런 캐릭터를 사용한 것일까?
최근 아이콘을 사용하는 웹 페이지들이 늘어나고 있다. 이것은 즉각적으로 고객에게 메시지를 전하는 강력한 방법이기 때문으로 생각된다. 현재 Icon들은 수많은 기능을 시각적으로 심볼 화 하여 다양한 종류가 만들어지고 있다.
위의 아이콘은 모두 설정에 대한 아이콘 디자인이다. 아이콘 디자인으로 기능을 상상해 낼 수 있을까? 전문 디자이너의 눈은 구분이 가능하겠지만 고객은 즉각 인식하기 어렵다. 고객의 입장에서 본다면 7번 아이콘이 가장 빠르게 인식되며, 대중적이다.
위의 1번 아이콘을 보면 기계적으로 뭔가를 많이 설정(과정)해야 한다는 것을 상징한다. 2번째 아이콘은 사람이 나오지만 어떤 것을 상징하는지 알 수 없다. 3번째 아이콘이 우리가 원한 감정이 풍부한 캐릭터이다. 고객이 감정이 있는 캐릭터를 보면 결과(행복함)를 얻게 된다는 것을 즉각 이해하게 된다. 1번은 고객은 무의식적으로 긴장시키지만, 3번은 고객을 이완시켜주고 기분 좋게 만든다.
이런 이유로 우리는 최대한 빨리 고객에게 메시지를 전달하기 위한 방법으로 감정 표현이 풍부한 캐릭터를 사용했다. "안심해, 넌 잘했어!", "좋아! 곧 행복해 질꺼야" 뭐 이런 메시지를 고객이 클릭하자마자 즉각 인식하길 원했다. 그래서 웃고 찡그리고 행복해하는 캐릭터의 표정, 따스한 피부톤이 중요했다.
결과가 왜 나쁘게 나왔는지, 왜 좋게 나왔는지 고객이 알 필요가 없다고 생각했다. 고객의 행위는 무조건 그 결과가 좋아야 한다. 나쁜 결과를 방치해서도 안 되고, 그것을 선택할 수 있게 해서도 안 된다. 결국 Dashboard UX, UI는 단순한 프런트 엔드 작업이 아니라 백 엔드 나아가 서비스의 개발 전반에 영향을 미친다. 만약 팀원이 아닌 프리랜서와의 개발이 진행되었다면 이런 수준의 반복적인 도전은 할 수 없었을 것이다.
몇몇 어려운 용어는 tooltip으로 처리하여 비전문가가 쉽고 직관적으로 학습 할 수 있도록 디자인했다. 그래도 어렵긴 어렵게 보인다. 나름 쉽게 만든다고 했지만, 이 분야가 그리 만만한 분야는 아닌 것 같다.
3. 인간적인 따스함과 유우머
인간적인 면은 우리가 생각하는 중요한 핵심 키워드이다.
기존의 대시보드는 전문가들이 아주 진지하고 심각한 표정으로 보고 판단해야 하는 디자인으로 되어 있다. 그래서 경고 표시나 주의 같은 심볼들이 많은 숫자와 빼곡하게 차 있는 것이다.
우리는 "이거를 선택하면 위험합니다!"라는 방식보다는 "이걸 선택하면 행복해 져요^^"라는 메시지를 전달해 주고 싶었다. 어떤 판단이건 가장 좋은 판단을 할 수 있도록 메시지에 가중치를 부여하길 원했다. 그래서 풍부한 감정을 가진 캐릭터들이 나오는 대신 어떤 경고 메시지도 나타나지 않게 되었다.
사실 이렇게 UX, UI를 밀고 나갈 수 있는 이유는 다음과 같다. 모든 설정을 공개해서 고객이 설정 할 수 있도록 하면 UX, UI가 고객이 긴장을 해야 하는 것으로 바뀌게 된다. 화면에 팝업은 사용설명서가 되고 경고창은 쉴 새 없이 나타날 것이다. 생각해 보면 화면에 경고 표시를 나타나게 한다는 것은 개발자와 디자이너의 직무유기 아닐까? 애초에 위험한 것을 제거해야 하는 건 아닐까?
네이버 버튼을 예로 들어 보자. 고객에게 메시지와 함께 확인, 취소 버튼이 들어간 modal popup의 UI design을 만든다고 가정하자. 위의 1번은 취소와 확인이 버튼 크기가 같다. 이런 경우 고객은 두 가지 선택을 균등한 강도로 판단하게 된다. (버튼의 칼라가 녹색이라서 이 버튼을 누르면 안전하다는 상징을 주고 있지만 판단을 요구한다.)
2번의 경우 취소 버튼의 크기를 줄이고 부드럽게 만들어서 우측의 확인 버튼이 강조되게 만들었다. 1번 버튼 보다 우리의 두뇌는 판단을 덜 하게 된다.
3번의 경우 확인 버튼 하나만 있다. 1, 2번에 비해서 더욱더 간결하게 보이며 확인 버튼만 누르도록 선택을 제한했다.
우리가 원하는 단계는 4번이다. 확인이라는 액션에 대한 버튼을 누르도록 강요할 이유가 없다.(확인을 왜 눌러야 하지?) 만약 꼭 액션이 필요한 버튼(예를 들면 전송)이라면 그때 버튼을 넣는 것이다. 4번의 UX는 고객이 별로 액션을 할 필요가 없는 가벼운 메시지로 즉각 인식하게 된다. 이게 더 좋지 않을까?
결론적으로 우리는 고객의 선택권을 제한하기로 결정했다. 예를 들면 좋은 걸 선택할래? 아니면 더 좋은 걸 선택할래? 뭐 이런 식이다. 그 선택권도 최소한으로 줄여 버렸다. 가능하면 아예 없애 버렸다. 설정이 필요한지를 따져서 디폴트로 가장 좋은 설정값을 넣어 버리고 설정을 못 하게 막아 버렸다. 어떤 경우에는 열심히 개발하던 복잡한 기능을 아예 없애 버렸다.
한 가지 아쉬운 점은 카피라이팅을 우리가 원하는 식으로 만들지 못했다는 점이다. 뭐가 잘못됐다는 경고성 카피라이팅을 "이렇게 하면 됩니다. 벌써 이렇게 조치했습니다. 이게 더 좋은 선택인데 어떻게 하실래요?" 뭐 이런 식으로 만들고 싶었지만, 현실적인 한계 때문에 해내지 못했다. 개인적으로 이것까지 되었다면 정말 완성도가 높을 텐데 하는 아쉬움이 크다. (우리에겐 영어가 너무 높은 장벽이다.) 거기에 개인화까지 적용하면 정말 멋질텐데...
Retargeting In Store는 처음 보는 사람에게는 상당히 복잡한 서비스 개념이지만 적어도 Dashboard UX, UI 만큼은 가장 쉽고 직관적으로 단순하게 만들고 싶었다.
처음 나타나는 modal popup이다. 감정이 있는 캐릭터를 사용해서 Billing으로 부드럽게 연결해 준다.
Shopify 쇼핑몰의 경우, trial을 사용하려면 가격대를 먼저 정해야 하기에 거부감을 희석하려는 방법이다.
"너도 돈 내면 행복해진다고!" 이런 것을 유도했다.
버튼의 크기는 사용자경험과 밀접하다. 너무 크면 압박감을 느끼게 되고, 너무 작으면 고객이 주의력 집중을 요구해서 피로도가 높아진다. 폰트의 크기도 비슷하다. 크면 소리치는 것과 같으며 작으면 피로도가 높아진다. 이 부분에서 말로 설명이 어렵지만, 서비스의 아이덴티티가 만들어진다.
설정 페이지를 유도하는 modal popup이다. 위의 화살표가 "덜덜덜" 떨리면서 시선을 끌어서 즉각 설정하도록 유도 한다.
고객이 찾지 않게 하는 것, 해야 할 가장 중요한 설정을 즉각 하게 만든다.
맨 처음 고객이 해야 할 미션이 2단계의 설정을 차례로 하는 것이다. 위의 파란색 화살표가 설정 버튼의 역할을 하는데 그걸 어떻게 고객이 클릭해서 설정하게 할 것인가? 그래서 Modal popup을 띄우고 파란색 화살표로 향하는 빨강색 화살표를 위치시켰다. 그런 다음 "덜덜덜" 이펙트를 부여했다. 또한 모든 팝업에 공통으로 나타나야 하는 파란색 닫기 버튼(혹은 확인 버튼)을 아예 없애 버림으로써 더 붉은색 화살표의 액션을 하도록 유도했다.
이 부분이 UX 측면에서 가장 성공적인 단계였다고 생각한다. 고객이 도움말을 보지 않더라도 낯선 Dashboard 환경에서 길을 잃어버리지 않도록, 인간적으로 기분 좋게 안내해 주기 때문이다. 초기 고객의 입장에서 본다면 이 하나의 Modal popup의 역할이 매우 중요하다.
설정이 끝나면 나타나는 화면이다. 쇼핑하는 고객님들의 데이터가 모이면 챠트와 테이블의 데이터가 나타나게 된다.
우측 상단의 얼럿이 Trial 중임을 알린다.
우측 상단의 빨간 느낌표를 보시면 지금 가격대의 서비스를 알려 준다.
Trial 기간이므로 붉은색이 나타난다.
유료 가격대를 선택하면 녹색의 체크 마크가 나타난다.
마우스 클릭을 줄이기 위해서 마우스 hover를 하면 왼쪽으로 슬라이드 되면서 메시지를 읽을 수 있다.
충전 포인트의 잔액을 볼 수 있으며 가격대의 남은 기간을 볼 수 있다.
Sales copywriting 부분을 설정하는 modal popup이다.
최소한의 설정과 낮은 피로도를 위해서 2단계로 나누어서 슬라이딩 방식으로 구현했다.
좌측의 폼에 입력을 하면 우측의 프리뷰에서 실시간으로 그 효과를 볼 수 있게 하였다.
modal popup에서 중요한 점은 마우스 동선의 범위로 생각 했다. 또한 보이는 정보의 갯수도 중요 했다. 최소한의 동선의 범위와 최소한의 정보의 나열.
고객을 다음 단계로 유도하는 광고 문안(Sales copywriting)을 최대 3개까지 입력할 수 있다.
Retargeting 상품을 보여주는 디자인에 대한 설정이다.
Retargeting 상품을 보여주는 디자인에 대한 설정이다.
Retargeting 상품을 보여주는 디자인에 대한 설정이다.
하단의 OFF 버튼을 누르면 입력폼 전체에 회색으로 바뀌는 것을 볼 수 있다.
이렇게 하면 좀 더 직관적으로 고객이 인식 할 수 있다.
Color Picker.
Color Picker.
App이 성공적으로 설치 되었을 때 나타나는 modal popup이다.
차트도 결정해야 할 부분이 있었다. 트래픽을 Conversion 측면으로 본다면 1 고객의 page view 수, 2 고객의 Click 수, 3 고객의 특정상품 상세 페이지 view 수, 4 Retargeting In Store 노출 수, 5 Retargeting In Store를 통한 2차 클릭 수, 6 Retargeting In Store를 통해 카트에 담은 수, 7 두번째 Retargeting In Store를 통해 노출된 수, 8 Retargeting In Store를 통한 결제 완료의 순서대로 정보를 보여 주어야 한다. 이게 객관적이며 논리적인 화면 UI가 된다.
Retargeting In Store의 프로세스를 한눈에 전달하기 위한 디자인이다. 단계별 설정(화살표)이 포함되어 있으며 Retargeting In Store가 작동하여 각 퍼널에 어떤 기여를 하였는지 즉각 알 수 있다.
그런데, 우리는 고객이 중요하게 생각하는 단계를 중심으로 최대한 단순화 시켰다. 1 Retargeting In Store 노출 수, 2 카트에 담은 수, 3 결제 완료 수 이 3가지 요소가 최상단에 가장 먼저 보이는 핵심지표가 된다. 여기서 단계를 연결하는 화살표가 있는데 그것은 카트에 담는 것을 목표로 하는 설정, 결제 완료를 하는 것을 목표로 하는 설정을 한다. 고객은 맨 위의 8단계 Funnel을 알 필요가 없다. 왜냐하면 고객의 인식을 필요 이상으로 복잡하게 만들기 때문이다.
고객의 Retargeting In Store가 몇 번 노출되어 카트에 담았고, 그 결과로 얼마나 구매를 했는지를 알고 싶을 것이다. 이게 이 서비스의 핵심이다.
문제점 1
스타트업이 이런 방식을 도입할 수 있을지 의문이다. 문제는 생산성이 너무 낮아진다는 점이다. Dashboard template를 사용하면 금방 끝날 수 있는 것을 3배의 고민, 3배의 논쟁, 3배의 코딩, 3배 이상의 시간을 투입해야만 만들 수 있다. 이것은 분명 스타트업의 서비스 개발 프로세스에 적합하지 않을 수 있다.
문제점 1에 대한 대응
고객을 위한 좋은 서비스를 만들고, 그 서비스를 사용하기 위해 더 좋은 UX, UI를 고민하는 것이 스타트업의 미션이라고 생각한다. 우리가 이런 생각을 하지 못했다면 몰라도, 이런 생각과 토론과 고민을 했다면 반드시 실행해야 한다.
Shopify app store의 app들은 대부분 수준이 높다. 대충 만든 것으로 고객의 선택을 받을 수 있다고 생각하지 않는다. (우리가 최선을 다해서 만들어도 그들의 수준을 못 따라갈 것이다)
문제점 2
개인적인 주관이나 경험으로 획일화 될 수 있다. 이것이 가장 큰 문제인데 이런 부분은 객관화가 어렵기 때문에 목소리가 큰 개인의 주장대로 UX, UI가 마무리될 가능성이 크다. 특정한 이슈가 발생하면 무엇이 옳고 무엇이 그른지에 대한 판단 기준이 없기 때문이다. 따라서 개인의 자질과 수준에 의해 산출물이 종속된다. 만약 서로 싸우기라도 하면 프로젝트는 실패한다.
문제점 2에 대한 대응
이것은 뛰어난 팀원이 있어야 한다는 말과 같다. 스스로 고민하고 판단하고 더 나은 결과를 만들어 낼 수 있는 사람과 함께 해야 한다. 새로운 것에 도전하고 없던 것을 만들어 내는 팀원과 함께해야만 서로가 성장하면서 성과를 얻을 수 있다. 여기엔 수준 높은 팀원이 월급도 못 받은 채, 지속해서 최선을 다해 주어야 한다는 전제가 필요하다. 다행이다.
문제점 3
이런 데 투입하는 시간과 노력이 App의 판매에 효과적인 결과를 가져다주지 않는다. Dashboard를 접하는 고객은 이미 App을 구매한 고객이기 때문에 여기에 집중하는 것보다 오히려 Website UI에 집중하는 것이 App 설치에 더 좋기 때문이다. 이런 관점에서는 분명 비효율적인 판단과 실행인 셈이다.
문제점 3에 대한 대응
생각해 보면 App을 설치하게 하는 선행 프로세스(이메일마케팅, SNS 마케팅, 페이스북 광고, appstore 광고등)는 전부 돈으로만 해결 되는것 같다. 이 부분은 지금 우리가 해볼 여력이 전혀 없다. 그럼 할수 있는 부분은 어디일까? 모든 고객의 접점을 특별하게 만드는 것 밖에 없다. 우리가 Dashboard에 이토록 집착하는 이유가 여기에 있다.(물론 App도 최선을 다해 만들었다.)
독하게 만들었다.
우리는 ...
우리는 해외의 서비스를 모방하지 않는다. 적어도 우리가 만드는 것은 우리가 세계 최초가 되고 싶다. 우리만의 고유한, 특별한 것을 만들고 싶다. 비즈니스 모델에서부터 UX까지도.
바깥으로 보여지는 것은 디자인이 약간 변경된 정도인데 내부적으로는 아주 복잡한 고민과 토론과 논쟁이 있었다. 우리는 Dashboard라는 문제에 대해 우리 방식의 적절한 해답을 찾으려 노력 했다. 아쉽지만 이번 문제는 여기까지만 풀려고 한다.
말로 팀원을 설득할 수 없다고 설득을 포기하지 않는다. 말로 상대를 이해 시킬 수 없다면 빠르게 만들어(내부 MVP) 보여줘야 한다. 이것이 가장 좋은 방법이다. 봐야만 이해할 수 있다. 이번 과정을 통해서 많은 느낌과 배움이 있었다. 우리가 UX, UI의 전문가가 될 수는 없지만 적어도 UX, UI의 전문가와 대화를 나누고, 생각을 공유할 수준 정도로 성장 한 것 같다.
휴우... UX, UI도 힘들었는데, 개발 후기는 더 힘드네. ㅡㅡ;;;; 😅
개발자와 디자이너의 삽질기 끝.
(이 글은 저와 디자이너가 함께 작성한 글입니다.)
추신 : 페이스북 친구인 Erin Lee님께서 좋은 글을 공유 해 주셨습니다.
https://www.facebook.com/erin20000/posts/733781700754856
우리 팀은 마이크로인터랙션이란 것이 있는줄도 몰랐거든요.
마이크로인터랙션이 더 섬세하게 다듬어 들어가는 것이라면, 저희는 반대로 더 단순화시키는 것 정도로 보여집니다.
좋은 정보를 공유해 주신 Erin Lee님께 감사 드립니다.
Retargeting In Store App UX, UI 소개 피치덱
Retargeting In Store App UX, UI 작동 동영상
- 인원 : 개발 1명, 웹 디자인 1명
- 사용 언어 : JavaScript
- 개발 기간 : 3주
- 사용 라이브러리 : jQuery, slick, bootstrap, imagesloaded, chart.js, pickr
- 업데이트 횟수 : 3~4회
