퍼블리 A/B 테스트 가보자고~!
랜딩페이지 UX분석과 개선 테스트 설계하기 [코드스테이츠 PMB 17]
오늘은 나 같은 주니어들에게 피가 되고 살이 되는 사이트! 퍼블리의 랜딩 페이지의 ux를 분석하고 A/B 테스트를 통해 개선점을 제안해보고자 한다! (3월에 썼던 글인데 브런치로 옮겨오느라 조금 늦은 글이라는 점 감안해 주시면 감사하겠습니다!)
퍼블리에 유입되는 경로를 알아보자.
퍼블리 홈페이지로 유입될 수 있는 경우는 오가닉(직접검색)과 인스타그램이다
인스타그램 계정에는 홈페이지 링크가 포함된 링크를 기재했다.
유입부터 전환까지
랜딩페이지의 구조 및 최종 전환까지의 퍼널을 파악해 보자
직접검색 혹은 SNS 유입 - 홈페이지 접속 - 탐색 - 회원가입 - 무료체험 - 유료구독
퍼블리 홈페이지에 들어가면 바로 무료체험 - 회원가입의 과정을 유도한다.
회원가입 후 무료체험을 바로 시작할 수 있지만 퍼블리에 대해 정보가 없을 경우 구독을 망설일 것이라 생각했다. 따라서 사이트를 탐색 후 구독을 결정하고 싶어 할 유저의 심리를 생각하여 탐색 이후 구독을 시작하는 프로세스로 정했다.
랜딩페이지 구조 및 UX
*작성일 기준 퍼블리 프로모션이 진행 중이라 함께 포함시켰다.
1. 첫 화면 랜딩페이지 섹션
CTA 버튼은 채도가 높고 눈에 띄는 컬러를 선택했고 웹 색상을 소프트톤의 노란색 하나로 통일하여 포인트 색이 강조되도록 했다.
2. 아티클 상단 섹션
아티클 썸네일보다 크기가 크고 검은색 배경을 사용해 카피가 눈에 띄게 한다. 아티클 수와 템플릿 수의 정량적 정보를 언급하여 구독 시 사용자가 얻을 수 있는 보상이 많음 체감할 수 있도록 한다.
퍼블리 콘텐츠 페이지
3. 아티클 하단 섹션
비구독자는 아티클의 도입부만 읽을 수 있고 아래와 같이 구독 CTA가 노출된다.
퍼블리 콘텐츠 페이지
3. 프로모션 섹션
전환율 높이는 A/B 테스트하기
-랜딩페이지 개선점과 A/B 테스트를 설계해 보자
수정할 섹션 : [프로모션]
개선점 : UX 변경
이번 프로모션 랜딩페이지의 아쉬운 점을 발견했다. 하단에 다른 CTA버튼보다 크기가 큰 '99,000원 특가로 구독하기' 버튼이 계속 고정되어 있어서 같은 컬러지만 다른 CTA버튼의 주목도가 떨어진다.
따라서 CTA 버튼의 위치를 변경하고자 한다.
제안 아이디어는 퍼블리 홈페이지에서 하단 스크롤링을 하면 상단에 프로모션 랜딩페이지가 생기면서 고정으로 노출되고 있는 것을 착안하였다. ⬇️
컬러를 바꿔볼까 했는데 CTA는 '이게 버튼이구나'라고 한 번에 인지해야 하기 때문에 원컬러로 지속적인 노출을 해야 하는 게 맞는다고 생각해서 컬러보다는 위치 변경을 선택했다.
똑같은 프로모션의 CTA인데 클릭만 되면 됐지 굳이 바꿀 필요 있을까?
각자 다른 마이크로카피가 포함되어 있기 때문에 어느 CTA 전환율이 높은 지를 파악하여 그로스해킹 전략을 세울 수 있다는 점에서 바꿀 필요가 있다고 생각한다.
예를 들어, 아래 네 개의 CTA는 모두 다 같은 내용을 나눠 놓은 것인데
(9개월 구독권+ 커리어리 스킬업 강좌 무료권 + 에어팟 or 퍼블리 페이백 포인트 자동 응모)
만약 에어팟과 퍼블리 포인트 페이백 이벤트의 CTA (퍼블리 구독하면 자동응모) 수가 다른 CTA보다 상대적으로 많다면 고객은 다른 것보다 에어팟과 퍼블리 포인트에 관심이 더 많다는 인사이트를 얻을 수 있다.
이는 다음 프로모션에 참고할 만한 유용한 데이터가 된다.
A/B 테스트 설계
A/B 테스트의 측정지표는 CTA 클릭률이다. 가설을 확인하기 위해서는 상단 고정 CTA 클릭률과 프로모션 보상 카피 CTA 클릭률의 비교가 필요하기 때문이다. 이를 통해 유저가 '보상'카피 CTA에 더 집중할 수 있었는지 확인할 수 있다.
또한 해당 프로모션의 수요를 파악하여 보상이 고객들의 니즈에 맞았는지, 이전에 진행했던 프로모션 전환율과의 비교를 통해 확인할 수 있는 지표도 될 수 있을 것이다.
