마케터의 웹페이지 UXUI 개선 사례 with 뷰저블
데이터 분석 프로세스 5가지 단계
프로모션 기획을 주된 업무로 그로스마케터로 일하고 있다. 작년 한 해 신규 프로모션 페이지 30건 정도 오픈했다. 매달 2~3개 페이지를 오픈, 운영, 개선하면서 벌써 3년 차 프로모션 기획자가 되었다. 처음 상세페이지 기획 업무를 맡았을 때는 눈앞이 깜깜해졌다.
상세페이지 어떤 순서로 기획하는 거지?
디자인 레이아웃 구성은?
UX 라이팅은 일반 카피랑 다른가?
신청률을 높이려면 버튼은 어디에 배치해야 할까?
아무것도 모르는 신입이 된 것 같았다. 하지만, 기획자로 6개월의 적응 뒤에 웹페이지 개선을 위해 [뷰저블] 도입한 이후 2년 동안 다양한 분석 및 개선을 통해 역량이 향상되었음을 느낀다.
상세페이지 기획 순서는 서비스에 따라 메인 > 페인 포인트 > 본문 > 이벤트 > 신청순으로 플로우 기준을 세우고
상품이나 서비스에 적합한 레이아웃을 적용하고
짧지만 한방이 있는 가독성을 신경 쓴 글을 쓰고
사용자의 행동을 유도할 수 있는 버튼의 위치 고려하는 등 공부한 걸 페이지에 적용해 보고, 결과를 분석하여 얻은 인사이트를 다시 웹페이지에 반영하여 UXUI 개선해 나갔다.
뷰저블을 실무에서 약 2년 정도 사용하면서 터득한 노하우를 뷰저블리 서포터스 1기가 된 김에 풀어볼까 한다. 나는 마케터이면서 기획자 역할을 하는 사람으로 UXUI 분야 전문가가 아니기에 나만의 노하우, 혹은 방법론으로 하나의 실무자의 사례로 봐주셨으면 좋겠다.
웹페이지 데이터 분석 프로세스 5단계
뷰저블을 도입 한 이후, 스터디를 하기 위해서 포그리트에서 출판한 'Data-Driven UX'책을 보면서 웹 개선을 했는데 가장 기초적이면서 쉬운 프로세스 5단계가 있어서 단계별로 실무에 대입했던 방법에 대하여 이야기해 본다.
나만의 뷰저블 분석 노하우데이터 분석 프로세스 5단계 (44-48p)
1단계 서비스 목표 설정하기
2단계 서비스 목적 달성에 방해되는 문제 페이지 발견하기
3단계 기능과 레이아웃 검증 및 최적화하기
4단계 콘텐츠와 세부 UI 검증 및 최적화하기
5단계 꾸준히 개선하고 개선 효과 추적하기
스터디용으로 이 책을 선택했던 이유는 책 목차에 따라서 실무에 그대로 적용할 수 있는 실용성 때문이었다. 프로세스 5단계에 따라서 어떤 서비스 목표를 개선할지 가이드를 잡아보는 과정을 뷰저블 홈페이지를 예시로 설명해 본다.
1단계 서비스 목표 설정하기
과거 데이터 기준으로 KPI 설정 (GA - 뷰저블)
가장 처음에 정해야 할 일은 서비스 목표 설정하기다. 과거 데이터를 기준으로 KPI 설정해야 하는데, 뷰저블 분석을 처음 한다면 뷰저블 데이터 기준이 없기 때문에 GA에서 트래킹 할 데이터 지표를 기준으로 정하면 된다.
처음에는 심플하게 2가지 지표만 집중했다.
[GA - 뷰저블]
이탈률 > 스크롤뎁스 이탈 구간, 신청폼 도달률
전환율 > 가장 높은 클릭수 (1-10위까지)
© beusable main page기기는 PC, 신규 방문자, 측정 요소는 Click, Move, Scroll, Path
페이지에 유입된 유저의 신청수를 높이려는 목표로
이탈률은 전주 대비 3% 감소
도달률은 전주 대비 3% 증가 기준을 세웠다.
2단계 서비스 목적 달성에 방해되는 문제 페이지 발견하기
개선하기 위한 지표 - 개선하기 위한 요소 파악
히트맵을 보면서 어디에서 이탈이 일어나는지 페이지 전체 픽셀(depth)에서 이탈률이 높은 구간을 파악한다. 기획 구성은 크게 메인 > 회사소개 > 서비스 소개 > 최근 뉴스 > 푸터 순으로 이어진다.
© beusable, Scrolled Heights / Click / Scroll graph이탈률 파악
사실 해당 데이터에서는 이탈이 크게 빠지는 구간이 없고, 본문 끝부분인 뉴스까지 도달률이 50%라서 크게 개선해야 할 필요성은 없다. 그럼에도 불구하고 개선을 한다면, 뉴스에서 푸터까지 20%가량 이탈이 일어나기에 액션을 일으키기 위해 사용자가 관심 있어할 만한 기업 사례, 후기, 또는 앞두고 있는 이벤트 소식 등에 콘텐츠를 배치할 것 같다.
3단계 기능과 레이아웃 검증 및 최적화하기
UXUI 체크리스트 만들기
클릭률 파악
클릭이 많은 순대로 1~10위까지 파악하면 상단 GNB, 하단 푸터 클릭이 압도적으로 많다. 본문 내에서는 [더 알아보기], [블로그], [북] 3개 영역에서 클릭이 있는데 높지 않다. 메인 페이지가 브릿지 페이지로서 다른 상세페이지로 연결하려면 버튼 색상, 위치, 도형 모양, 워딩 등 다양한 실험을 통해 테스트해 볼 수 있다.
© beusable, Click vs Move관심도 파악
버튼은 아니지만 무브 영역에서 관심도 있게 보는 영역을 확인하여 좀 더 강조하는 콘텐츠로 구성할 수도 있다. 포그리트 회사 소개 영역에 어떤 기업들이 사용하고 있는지 빨간색 영역으로 진하다면, 어떤 기업들이 사용하고 있는지 보여주는 신뢰도 지표나 로고로 변경해 보는 것도 고려할 수 있다.
4단계 콘텐츠와 세부 UI 검증 및 최적화하기
마케터/기획자와 디자이너가 협업하면 시너지 증가
체류시간 파악
메인은 가장 첫 번째 랜딩 영역이라서 제외, 서비스 소개 부분에 그래프가 우측으로 튀어나오는 부분이 집중도가 높은 구간이다. 신규 방문자는 처음 방문했기에 서비스 소개 영역에 주목도가 높고, 재방문자는 해당 페이지를 이미 봤던 유저이기 때문에 2번째 영역인 회사소개가 바뀐 사항이 없기 때문에 이탈이 일어나 도달률이 50%까지 빠지는 수치를 볼 수 있다.
© beusable, 신규 vs 재방문 체류시간 차이이처럼 유저의 성격에 따라 신규, 재방문, 기기, 기간에 따라서도 다른 데이터 양상을 확인할 수 있다. 개선 목적에 따라서 요소를 변경하면 된다. 신규 유입자에게 해당 페이지는 나쁘지 않은 지표, 재방문자 리텐션 지표를 높이려면 웹페이지 개편이 필요하다는 의사결정을 내릴 수 있을 것 같다.
5단계 꾸준히 개선하고 개선 효과 추적하기
트래킹은 매주, 개선은 2주에 1번 추천
마지막으로 웹 개선을 하기 위해 트래킹을 하고 있다면, 특정 기간에 따라 트래킹과 테스트하는 걸 추천한다. PV 유입 수에 따라서 1주 혹은 2주에 한번 지표 분석을 했다. 프로모션 오픈 후 1주일이 지난 시점에 한 번, 10일 차쯤 이탈률, 도달률, 전환율을 보고 개선이 필요할 경우 수정 기획안 작성 후 디자이너와 협의하여 2주 차가 되는 시점에 바꿔서 2주 단위로 테스트했었다.
©beusable, 개발자 없이 마케터도 사용할 수 있는 툴뷰저블로 웹페이지 개선과 테스트를 하게 되면서 어떤 기획이 좋은 기획인지 고민하고, 나름의 성공 방정식도 찾았다. 늘 그 방정식이 통하는 건 아니지만, 테스트해 왔던 경험을 바탕으로 이전 방식에서 조금씩 수정하면서 전환율 개선, 페이지를 개편해야 할 시점 등을 판단하는 의사결정을 하는 데 도움을 얻게 되었다.
-
뷰저블 서포터스 1기 뷰저블리로 활동하게 되어 나만의 인사이트를 공유할 수 있는 기회에 대해 감사하게 생각하며, 다음번 포스팅에서는 좀 더 구체적인 개선 사례로 돌아오겠습니다.
!
뷰저블 서포터스 1기로 제품을 무료로 제공받아 작성된 솔직한 후기입니다.
#뷰저블 #뷰저블서포터스 #웹페이지개선사례 #기획자 #마케터
