데이터 분석 UX 개선사례 – 미디어 커머스 (1)

안녕하세요. 뷰저블입니다.

커머스의 형태가 지속적으로 변화하면서, SNS, 미디어와 결합한 형태의 다양한 전자상거래 형태가 생겨났습니다. 미디어 커머스 업체에서는 어떠한 이슈들을 파악하고, 비즈니스 성과를 개선하려고 하고 있을까요?

오늘은 “히트맵을 통한 분석 방안”을 초점으로, 쇼핑몰 UX 분석 시리즈 Case Study 2탄을 실어봅니다. 오늘의 사례는 미디어 커머스 분야를 개척해나간 선두 기업 우먼스톡의 데이터 UX 개선 사례입니다.

히트맵을 통한 UX개선? 무엇을 할 수 있을까. 분석방안을 살펴보다. – 우먼스톡의 뷰저블 도입 사례 – 

01. 미디어 커머스 우먼스톡의 뷰저블 도입기

우먼스톡에서는 사용자 관점의 서비스를 제공하기 위해서 다양한 시도를 하고 있습니다. 뷰저블의 주요 포트폴리오와 히트맵을 통한 사용자 분석 / 실제 서비스의 개선에도 많은 관심을 가지고 있어 뷰저블을 이용한 개선 프로젝트를 진행하게 되었습니다. 실제로 히트맵을 통한 개선 시도의 성과를 수치로 확인할 수 있어 보람되기도 했던 프로젝트입니다.  해당 브로젝트는 데이터 수집, 이슈 도출, 성과 확인까지 모두 하나의 툴인 “뷰저블”에서 사이클을 완수했습니다.

우먼스톡의 뷰저블 이용방식

이용 플랜 : Cloud A (월 100만 PV)
뷰저블 이용기간 : 2018년 3월 29일 ~ 2018년 9월 29일 (6개월간)
등록 페이지 수 : 총 105개 페이지 등록 
주된 뷰저블 이용 행태 : 월별 주요 마케팅 페이지 위주로 등록하여 마케팅 집행 성과 분석, 뷰저블을 통한 UI 개선, 성과 집계

(성과가 두드러진 프로젝트이니, 결과부터 공유해봅니다. 🙂 )

( 상세한 분석 이야기는 하단에서 풀어나갑니다. ▼▼▼)

02. 분석 시작

1.1. 히트맵을 분석을 활용하고자 하는 주요 페이지 선정.

히트맵 분석을 활용하고자 하는 주요 핵심 페이지를 선정했습니다. 분석하고자 하는 핵심 페이지를 선정하는 방법은 회사마다 다를 수 있겠지만, 우먼스톡에서는 마케팅 페이지 외 PV 수 상위 집계를 기준으로 삼았습니다. 선정된 페이지는 “메인” “뷰티숍”, “심쿵 딜”, “외상 구매”, “베스트 ” 이렇게 다섯 가지로 추려졌습니다.

“어떻게 데이터를 통해 디자인할 것인가? 에 앞서 어떻게, 무엇을 분석할 것인가?”

저희가 만나본 고객들 중 대다수는 히트맵 분석 서비스 외에도 다양한 서비스를 활용하여, 데이터를 받아보고 있었습니다. 

“기존의 분석 사이클에서 히트맵 분석을 새로이 추가한다면, 히트맵에게 어떤 역할을 기대해 볼 수 있을까요?”

데이터를 집계하고, 데이터를 시각화하고, 테스트 결과나 개선 성과를 히트맵으로 나타내는 일 등등을 뷰저블 서비스가 해낼 수 있을 것입니다. 그러나, 이보다 조금 더 깊게 들어가 보는 것이 중요합니다. 기존에 활용하고 있던 분석 툴이 있다면, 더욱이 “히트맵을 통해 얻을 수 있는 것”을 짚고, 활용해 나갈 때, 만족도가 좌우될 수 있기 때문입니다.

예를 들면 ” 이번 과제에서, 히트맵을 통해 무엇을 분석할 수 있을까요? ” 와 같은 질문을 할 수 있습니다. 우먼스톡은 서비스 도입에 앞서, 현재 당면한 비즈니스 과제에 맞추어, 히트맵으로 무엇을 분석할 수 있을지 요소들을 정리했습니다.  

” 히트맵을 통해 무엇을 분석해볼까? 활용할 수 있는 데이터는 무엇이 있을까”

1.UI 별 전환 성과 비교 : UI 별 전환율 비교, 스크롤 도달 대비 전환 수치 비교
2. 페이지 내 전환 및 이탈 비교 : 페이지 내 전체 이탈률 비교 
2. 콘텐츠 탐색 분석 
    2-1. 페이지 내 콘텐츠 전달률 : 콘텐츠 별 사용자 도달률 비교
    2-2. 콘텐츠에 따른 속독률  : 스크롤 히트맵 및 어텐션 그래프 내 체류시간 정보
3. 데이터를 활용한 고객의 대표 특징 도출 : 애널리틱스의 해상도, 디바이스, 주요 사용자 여정 별 데이터 분석

히트맵으로 분석할 수 있는 요소들을 정리한 이후, 이번 프로젝트에서 가장 중점을 두고 살펴보고 싶은 부분들도 별도로 사내에서 협의하여 결정하는 과정을 거쳤습니다. 이번 프로젝트에서는 “전환”을 가장 중점에 두고 분석과 도입을 진행해보기로 했습니다.

03. 실전 도입. 우리는 무엇을 개선할 수 있을까?

1.2. 각 페이지의 현황 분석 후, 실제 개선 사례에 적용할 만한 UI 선정 

각 페이지의 현황을 파악하고, 각 이슈의 개선안을 도출해보았으나, 일정과 내부 리소스 등 모든 페이지의 개선이 어려울 수 있는 터. 이러할 경우 우선순위와 중요도를 고려하여, 개선을 시도해봅니다. 

초기에 우먼스톡은 “전환” 요소를 이번 프로젝트에서 가장 중요한 과제로 잡았습니다. 내부 논의를 거쳐  “베스트” 페이지의 전환을 개선해보는 것을 우선과제로 잡고 실행에 옮기기로 했습니다.

✔︎ 베스트 페이지 현황 파악

베스트 페이지의 현황 파악 결과를 살펴본 결과, 다음과 같은 이슈를 파악할 수 있었습니다.

뷰저블의 스크롤 히트맵 / 클릭 히트맵으로 이슈 파악
한 페이지임에도 불구하고, 좌, 우가 마치 반으로 나뉜 것처럼 보입니다. 유독 우측 상품의 데이터가 약 3배 정도 몰린다는 점을 클릭 히트맵 화면에서 살펴보실 수 있을 것입니다.

2단 콘텐츠 구성 의도가 이것은 아녔을 텐데요..?

사용자가 스크롤을 길게 내리기 이전에, 적정량의 콘텐츠를 빠르게 제공하는 것이, 이단 콘텐츠로 UI를 전시한 것이 원래의 기획의도였을 것입니다. 그러나, 우먼스톡의 고객들의 이용 양상은 달랐습니다. 우측 엄지나 검지로 콘텐츠를 클릭하지 않았을까 생각됩니다.

04. 그럼 무엇을 해야 할까? 

우먼스톡 페이지 내에서 좌측 상품을 소비하지 않는 고객의 특성을 고려하여 UI를 변경하기로 하였습니다. 상품 상세 카드를 2단에서 1단으로 변경하기로 하고, 디자인 개편 작업에 들어갔습니다.

05. 그래서 성과는?

✔︎ 2단 -> 1단으로 개편. 전환 성과 비교

기존의 2단 유아이를 1단으로만 변경했음에도 불구하고, 1PV당 클릭수는 1.13에서, 1.57로 증가했고, 동일한 개수의 상품 전환율을 취합하여 파악해 봤을 때, 전환율은 1.9배 증가했다는 성과를 파악할 수 있었습니다.

“데이터를 통한 혁신적인 UI?”

2단에서 1단으로 변화하는 유아이 자체는 크게 혁신적이지 않다고 생각될지도 모릅니다. 그러나 내부에서 나름의 이유와 논리를 가지고 2단으로 기획하며, 운영했던 유아이를 1단으로 바꾸는 일은 생각보다 많은 난관에 봉착해야 하는 일일 수 있겠지요. 누군가는 고도화 자체에 대해 보수적으로 생각할 수도 있고, 누군가는 연구결과를 들고 와서 “타사 UX 분석 사례에서 이것이 더 유효하다고 연구결과가 나와있다.” 고 이야기할지 모릅니다.

그러나 “우리 고객의 데이터”를 봐야 합니다. 타사의 사용자와 우리 고객은 다른 유저이기 때문이지요. 우먼스톡의 유저가 좌측 콘텐츠를 클릭하지 않았지만, 다른 쇼핑몰의 유저들은 좌, 우 균일하게 콘텐츠를 클릭할 수도, 혹은 우리 유저들은 좌측을 더 많이 클릭하는 양상을 보일지도 모릅니다. 타사 고객의 경험이나, 성향과 우리 고객이 행동 패턴이 완전히 같을 수는 없기에, “수집된 우리 고객의 데이터”를 기반으로 UI, 혹은 비즈니스 개선 방향을 살펴보는 것이 중요합니다.

때문에 우먼스톡의 이번 UX 개선 프로젝트를 높이 평가하는 것 중 하나는, 기존의 논리로 서비스를 기획하고, 운영했을 텐데도 불구하고, 과감하게 “우리 사용자”의 데이터를 토대로 이번 개편을 진행했다는 점입니다. 데이터를 통해, 실제로 비즈니스에 적용되는 순간을 맛보기 위해서는, 데이터에 대한 적극적이고 열린 태도로 업무를 진행하는 노력이 필요한 것 같습니다.

오늘은 우먼스톡의 이야기로 실제 분석 시 어떤 방향으로, 분석을 진행해 볼 수 있을지, 활용 가능한 데이터는 무엇인지, 각 조직원들은 어떻게 데이터를 활용할 수 있을지 살펴봤습니다. 게재를 허락하여 준 우먼스톡에게 감사드립니다. 

잠깐! 
마무리하기가 아쉬워, 분석 예제 하나를 다음 시리즈에서 살짝 풀고 넘어가도록 하겠습니다. 다음 분석 예시에서는 우먼스톡의 유입 / 전환 경로 별 페이지 소비 형태를 스크롤 및 어텐션 그래프로 확인해보겠습니다. 그럼, 다음 편도 기다려주세요. 🙂 감사합니다.

우먼스톡(https://www.womanstalk.co.kr/)이란?