지그재그 랜딩페이지 분석하고
A/B테스트 제안하기
[코드스테이츠 PMB 10기] 랜딩 페이지 분석 및 A/B 테스트 설계
지그재그의 첫인상
인간관계에서 첫인상이 중요하듯이 서비스에서도 첫인상은 매우 중요하죠.
디지털 시대에 살고 있는 우리는 수많은 프로덕트와 만나고, 관계를 이어가고 있습니다.
그렇다면 어떤 서비스에 대해 궁금하고, 관심을 가지고 있는 고객이 해당 제품을 검색하거나, 광고 배너를 통해 처음 만나게 되는 화면은 무엇일까요? 바로 '랜딩 페이지'입니다.
랜딩 페이지는 '착륙'이라는 의미를 가지며 광고, 검색 엔진을 통해 사용자가 처음 만나게 되는 페이지를 말합니다. 사용자가 랜딩 페이지를 탐색하는 몇 초 동안 브랜드의 미션, 제품 등 고객에게 명확한 가치를 제시하고, 제품의 매력을 어필해 이탈을 최소화해야 합니다. 따라서 랜딩 페이지는 더 많은 고객을 끌어오고 유지시키며 서비스를 확장시키는데 중요한 역할을 하게 됩니다.
국민 패션 쇼핑 앱 지그재그는 고객을 어떻게 맞이하고 있을 까요?
웹 검색 포털에서 '지그재그'를 검색한 후, 랜딩 페이지를 만났습니다.
지그재그의 랜딩 페이지는 총 6단계로 구성되어 있습니다.
CTA(다운로드/신규 입점안내)-주요 기능-CTA(입점 파트너)-지그재그 성과-CTA(다운로드)-정보 고지, SNS
1단계 CTA( 앱 다운로드 / 신규 입점안내 )
제가 처음 보았던 화면은 바로 앱 다운로드를 안내해주는 섹션이었습니다.
스타일 쇼핑 앱인 지그재그는 랜딩 페이지에 유입된 고객들이 바로 앱 다운로드를 할 수 있도록 안내하고 있습니다. 처음 눈에 띄는 건 다운로드 안내였으나, 자세히 살펴보니 오른쪽 상단에 작게 '신규 입점 안내' 버튼이 있네요.
PC에서 접근 시 QR로, 모바일 기기로 접근했을 때는 다운로드 CTA 터치한 번으로 다운로드 화면으로 전환이 가능했습니다. 신규 입점안내는 클릭 또는 터치 시 입점 파트너를 위한 랜딩 페이지로 바로 전환됩니다.
흰색 텍스트, 버튼과 지그재그의 메인 컬러인 핑크가 어우러져 트렌디한 느낌을 주고, 주요 요소에 집중이 잘되었습니다. 하지만 신규 입점안내 버튼을 더 눈에 띄게 구성했으면 입점 파트너 고객들이 쉽게 찾을 수 있지 않을까 하는 아쉬움이 남았습니다.
메인 카피: '내 맘대로 쇼핑앱 지그재그'
서브 카피: '3천5백만이 선택한 국민 쇼핑앱 6500개 이상 여성 쇼핑몰과 브랜드를 한 번에'
CTA 카피: QR코드 다운로드 / 애플과 구글 스토어 / 신규 입점안내
2단계 주요 기능 소개
스크롤을 내려 두 번째로 보이는 섹션은 지그재그의 주요 기능을 소개하는 화면이었습니다.
여러 쇼핑몰을 한 번에 찾을 수 있는 즐겨찾기, 한 번에 결제가 가능한 Z결제, 하루 만에 도착하는 직진 배송, 다양한 필터링이 가능한 스마트 검색, 좋아하는 패션 아이템을 저장할 수 있는 내 상품까지 지그재그의 핵심 기능과 내용을 담고 있습니다.
3단계 CTA(입점 파트너)
입점 파트너관련 내용은 3번째 섹션에서 볼 수 있습니다. 지그재그는 쇼핑몰, 브랜드, 패션 잡화, 최근 오픈한 뷰티까지 스타일 관련 상품과 고객을 연결시켜주는 플랫폼이기 때문에 입점 파트너의 브랜드 가치,상품이 곧 서비스의 경쟁력이 되며 많은 입점몰 선택지가 있을 수록 더 많은 고객을 유입시킬 수 있습니다.
따라서 입점 파트너 확보가 매우 중요한데요, 지그재그는 파트너를 세분화 시켜 입점 파트너의 종류를 신규와 기존 파트너로 나눠서 CTA와 랜딩 페이지를 각각 따로 두고 있습니다. 신규 파트너는 카카오 스타일 파트너스 페이지로 기존 파트너는 입점한 셀러들만 사용할 수 있는 파트너 센터 로그인 페이지로 이어지고 있습니다.
랜딩 페이지에 모든 내용을 한 번에 담지 않고 사용자와 입점 파트너를 나누고, 입점 파트너 내에서도 신규와 기존 파트너를 세분화 시켜 랜딩 페이지를 다르게 구성하고 있는 것이 지그재그의 섬세한 UX설계가 돋보였습니다. 또한 랜딩 페이지를 통해 얻을 수 있는 각 타깃층의 데이터를 구분해서 수집할 수 있어 목표하는 지표를 높이기 위한 전략을 각가 수립할 수 있습니다.
메인 카피: '지그재그는 입점 파트너와 함께 성장합니다.'
서브 카피: '매월 370만 고객이 이용하는 성공 플랫폼 지그재그, 지금 바로 시작하세요.'
CTA 카피: 신규 파트너 플랫폼 입점 안내 / 기존 파트너 센터 로그인
4단계 지그재그 성과 소개
4번째는 가장 최근까지 지그재그의 성과, 실적을 보여주는 섹션입니다. 지난해까지 지그재그의 입점한 쇼핑몰과 브랜드가 6500개에 달하며, 연 간 거래액은 1조 원, 월 사용자 수, 앱 다운로드 수를 알 수 있습니다. 지그재그가 이룬 성과 수치를 노출하면서 일반 유저와 사업 제휴, 투자자 등 비즈니스를 목적으로 탐색하는 사람들에게 신뢰를 주며, 함께하고 싶다는 니즈를 불러일으키는 브랜드 파워를 경험하게 됩니다.
해당 섹션에서 아쉬운 건 텍스트를 잘 보이게 하기 위해 배경을 흐리게 구성했지만 3단계에서 쓰였던 이미지를 다시 사용했다는 것과, 해당 이미지가 반응형이 아닌 Background 이미지를 반복하게 만들어 놓아서 웹 브라우저 사이즈를 조절하다 보면 같은 이미지가 계속 반복된다는 것입니다. 사이즈 100%만 해도 양쪽으로 반복되는 배경이 보이네요.
5단계 CTA(다운로드)
랜딩페이지 구성의 마지막이라고 볼 수 있는 섹션은 1단계와 같이 지그재그 앱 다운로드로 전환하기 위한 CTA를 구성했습니다. 해당 섹션은 랜딩 페이지의 마지막까지 스크롤을 내린 사용자들을 위해 상위로 다시 가지 않아도 앱을 다운로드할 수 있게끔 배치한 것이라고 생각됩니다.
메인 카피: '지금 바로 지그재그를 다운로드하세요.'
CTA 카피: QR코드 다운로드 / 애플과 구글 스토어
6단계 정보 고지/SNS 링크
랜딩 페이지의 맨 아래에서는 지그재그가 속한 카카오 스타일에 대한 정보와 정책, SNS 링크 버튼을 볼 수 있습니다. 각 링크를 통해 비즈니스적인 지그재그의 상세한 정보를 확인할 수 있습니다.
모바일 버전 랜딩페이지
웹과 다르게 모바일 랜딩 페이지에서는 앱 다운로드 CTA가 플로팅으로 만들어져 있습니다. 스크롤을 내려도 계속 다운로드 버튼이 따라다니면서 어떤 화면든지 다운로드로 이어지게끔 하단에 고정되어있습니다.
그런데 웹 랜딩페이지의 서브 카피가 없어지고 화면 중심의 신규 입점 안내 CTA로 인하여, 일반 고객이 아닌 인해 입점 파트너를 위한 소개 페이지라는 혼동이 오는 것 같습니다. 그리고 기존 파트너 로그인 CTA는 없어지고 신규 입점 안내 CTA만 나와 있는데요. 이렇게 설계하신 이유는 모바일 버전에서 랜딩 페이지 접속 시 각 CTA 클릭 수와 전환율을 봤을 때 신규 입점 안내가 월등히 높았거나, 신규 파트너를 타겟팅한 것이라고 생각해볼 수 있겠습니다.
지그재그 랜딩 페이지 개선하기
랜딩 페이지 분석을 바탕으로 개선안 A/B테스트를 설계했습니다.
지그재그에 관심을 가진 사람들이 랜딩 페이지에 유입될 때, 첫 화면에서 지그재그 잠재,신규 고객들 및 입점 파트너의 니즈를 충족 시킬 수 있는 방안을 생각했습니다.
사람들이 포털에서 지그재그를 검색 하고, 광고를 클릭하는 가장 근본적인 이유는 무엇일까요?
지그재그에 대한 '관심'이겠죠. 물론 광고에서 지그재그에서 제공하는 혜택 문구 같이 고객을 유도하는 매력적인 카피들에 의해 유입될 수 있습니다. 하지만 지그재그에 대한 관심이 아예 없다면 광고를 보지 않고, 랜딩 페이지 및 앱 다운로드 페이지로 전환되지도 않았을 것입니다.
저는 '첫 화면에서 관심을 가지고 유입된 고객의 전환율을 높이자' 라는 목표를 세웠습니다.
따라서 광고 영상, 모션 배경을 넣어 시선을 끌고 해당 화면에 기존 보다 텍스트,버튼 크기를 키운 CTA,
클릭을 유도하는 UX 카피를 추가했습니다. 그리고 웹 랜딩 페이지는 어디서든 QR 다운로드를 할 수 있도록 스크롤을 따라오는 아이콘으로 만들어 보았습니다.
가설 : '광고 영상 배경 혹은 모션을 추가하여 지루함을 없애고, CTA 버튼 크기를 키우고, 액션 유도 카피를 쓴다면 앱 다운로드 및 파트너 전환율이 증가할 것이다.'
목표 : 랜딩 페이지 체류 시간 및 CTA 전환율 증가
대상 : 지그재그 신규 및 잠재 고객, 신규 입점 파트너
측정 지표 : 전환율, 체류 시간
다음과 같이 A/B테스트 설계 후 테스트 화면을 디자인했습니다.
(영상이나 모션을 넣고 싶었는데 저의 그래픽 실력이 모자라 조금 더 시간이 필요할 것 같아요..
완성도 높은 테스트 화면을 구현해보겠습니다..!)
