[이커머스] 뷰저블 실제 분석 사례(2/2): UX Heatmap으로 페이지 내 콘텐츠 탐색 패턴 및 활용도 확인하고 개선하기

데이터 분석에 대해 고민이 많은 고객분들을 위해서 
뷰저블 UX 리서치 팀에서 진행한 
CX 데이터 분석 사례를 공유 드립니다.
 

이런 분들께 도움이 됩니다.

“결제까지 더 많은 고객이 도달하도록 하고싶은데, 어떻게 해야할지 모르겠어요…”


* 자사몰 개선이 필요하지만, 데이터 분석이 막막한 쇼핑몰 운영자
* 마케팅 실시 이후, 채널 별 여정 패턴 차이를 및 성과를 확인하고 싶은 마케터
* 디자인 개선 방향성을 결정하기 위해 눈에 보이는 근거가 필요한 UX디자이너
 

아직 1편을 못보셨다면?

#1 고객 여정으로 문제 발견하고 고객 행동 데이터에서 근거 찾기

▷#2 UX Heatmap으로 페이지 내 콘텐츠 탐색 패턴 및 활용도 확인하고 개선하기

Notice

이 글은 백년화편의 실제 분석 사례를 바탕으로 작성되었으며, 이는 백년화편과 당사의 업무협약 및 정보제공활용 동의를 기반으로 합니다. 또한 이해를 돕기 위해 일부 이미지 및 데이터를 가공하여 사용하였음을 알려드립니다.

• 서비스명 : 백년화편
• 분석 페이지 수 : 총 19개
• 분석기간 : 2024년 8월 7일 ~ 8월 20일 (2주간)

백년화편 웹사이트 이미지

무료 컨설팅의 세 번째 주인공은 바로 건강하고 고급스러운 답례떡 선물로 유명한 ‘백년화편’ 입니다.
백년화편은 떡 선물세트 1위 브랜드로, 당일생산한 떡을 원하는 날에 신선하게 받아볼 수 있도록 다양한 배송 서비스를 제공하고 있습니다.  백년화편 사이트 바로가기

백년화편 분석 목표
– 주문 및 결제 프로세스 점검
– 페이지 및 상품 탐색 패턴 및 주요 버튼 활용도 확인

1탄에서는 뷰저블 Journey Map과 UX Heatmap 두 서비스를 연계하여,
백년화편의 주문 및 결제 프로세스를 점검하고 이탈 원인 및 개선 포인트를 찾아낸 사례를 소개 드리겠습니다.

2탄 – 페이지 내 콘텐츠 탐색 패턴 및 활용도 확인

분석 목표 및 니즈

UX Heatmap

→ 히트맵을 통해 구체적인 고객 행동 데이터 확인 및 개선 방향 판단

1) 메인 페이지

1-1) “메인 페이지의 배너를 고객이 얼마나 활용하고 있는지 궁금해요.”
1-2) “메인 페이지에서 MY페이지 진입 시, 하위 메뉴 활용도가 궁금해요.”
1-3) “메인 페이지의 콘텐츠가 얼마나 활용되고 있는지 궁금해요.”

분석 내용

1) UX Heatmap  : 메인 페이지

[분석 니즈 1-1]
메인 페이지의 배너를 고객이 얼마나 활용하고 있는지 궁금해요.”

[인사이트]
대부분의 고객이 배너를 2p까지 탐색하고 있으므로,
중요한 마케팅의 경우 2p 까지는 노출될 수 있도록 해야 마케팅 효율을 높일 수 있어요.

상단 배너 라이브 히트맵 확인 내용
– 3p 배너부터는 노출도가 10퍼센트대로 1, 2p 배너에 비해 매우 낮아져 마케팅 효율이 떨어지고 있음.

백년화편의 메인 배너 위치를 표시한 이미지
UX Heatmap > Live Heatmap 기능으로 백년화편 메인 페이지의 배너 노출도를 분석한 이미지

→ Live Heatmap과 노출도에 대해 더 궁금하세요?

[분석 니즈 1-2]
메인 페이지에서 MY페이지 진입 시, 하위 메뉴 활용도가 궁금해요.”

[인사이트]
특정 버튼 외 절반의 버튼이 활용되지 않고 있으므로, 
활용도 및 고객의 진입 니즈를 고려해 버튼을 재배치하면 사용자의 편의성을 증진시킬 수 있어요.

메인 페이지 상단 GNB 히트맵 확인 내용

– 주문/배송조회(3.9%), 할인쿠폰(2.4%)에 대한 고객의 진입 니즈가 가장 높았으나, 
  상대적으로 중요도가 낮은 회원정보 수정보다 하단에 위치함을 확인하였습니다.

– 절반 정도의 버튼은 아예 활용되지 않고 있음을 확인하였습니다.

백년화편 메인 페이지에서 MY 페이지 버튼 호버 시 제공되는 하위 메뉴 Click PV Rate 분석 이미지

[분석 니즈 1-3]
“메인 페이지의 콘텐츠가 얼마나 활용되고 있는지 궁금해요.”

#1. 명품 혜택 안내 콘텐츠

[인사이트]
PC 대비 MO에서의 주목도와 활용도가 확연히 떨어지는 상태예요. 
모바일 환경에서 고객의 시선을 끌 수 있는 UI로 개선한다면 모바일에서의 콘텐츠 활용도를 보다 높일 수 있을거예요. 

스크롤 중간 위치의 콘텐츠 히트맵 확인 내용

– Click 히트맵 확인 결과, PC에서의 해당 영역 전환율(Click PV Rate) 합은 0.8%, 모바일에서는 0.2

– Scroll 히트맵에서의 주목도 확인 결과, PC에서 9.7초 주목, 모바일에서는 0.6초 주목.

백년화편 메인 페이지 – 명품 혜택 영역의 클릭률 합 및 스크롤 히트맵 분석 이미지

Click PV Rate 및 Scroll 주목도 데이터의 의미

– Click/Tap PV Rate : 전체 PV 중, 클릭한 PV 비율 = Unique Click/Tap = 순 클릭/탭
→ Click 히트맵 자세히보기 

– Scroll 히트맵의 주목도 : 도달율과 노출시간이 반영된 주목도
→ Scroll 히트맵 자세히보기 

#2. 하단 캐러셀 콘텐츠

[인사이트]
클릭해야 조회 가능한 탭 UI 및 캐러셀이 거의 탐색되지 않고 있어요.
중요 콘텐츠가 default로 노출될 수 있도록 콘텐츠를 재배치한다면 강조하고자 하는 콘텐츠가 더 주목받을 수 있을거예요!

하단 캐러셀 콘텐츠 라이브 히트맵 확인 내용

모바일에서 default로 보여지지 않고, 클릭해야 조회 가능한 탭 UI 및 
– 2p, 3p의 캐러셀 콘텐츠의 노출도가 1~2%에 그치는 것을 확인하였습니다.

백년화편 메인 페이지 – 명품 혜택 영역의 클릭률 합 및 스크롤 히트맵 분석 이미지

2탄에서는 백년화편의 메인 페이지 내 사용자 행동을 분석하고 개선안을 도출해낸 사례들을 알아보았습니다.

3탄에서는 상품 리스트 페이지와 상세 페이지 내 사용자 행동을 분석하고 개선안을 도출해낸 더욱 다양한 사례들을 알아보도록 하겠습니다.

이번 포스팅이 도움 되었다면 지금 바로 뷰저블 Journey Map과 UX Heatmap으로 
여러분들의 서비스를 점검하고 개편해보세요.

뷰저블 포럼에서 시리즈 이어서 보기

#1 고객 여정으로 문제 발견하고 고객 행동 데이터에서 근거 찾기

▷#2 UX Heatmap으로 페이지 내 콘텐츠 탐색 패턴 및 활용도 확인하고 개선하기

https://www.beusable.net/ko/
Print Friendly, PDF & Email

Share This Post

Share on facebook
Share on linkedin
Share on twitter
Share on email

Related