가상 A/B 테스트를 통해 당근마켓 랜딩페이지 개선하기
당근마켓 PC 웹 랜딩 페이지 A/B테스트 [코드스테이츠 PMB 16기]
앞의 글에서 이어지는 내용입니다.
오늘은 랜딩 페이지이다.
앞의 글에서는 거래가 이루어지는 흐름 중에서 검색 파트(필터)의 사용성 개선에 집중했었다면,
오늘은 서비스와 상품을 더 매력적으로 노출시켜 보다 더 많은 고객 유입을 시킬 수 있는
다양한 방법 중, 서비스의 첫인상이자 얼굴인
랜딩 페이지의 사용성 개선에 집중해 보는 시간을 가져보려 한다.
어떻게 랜딩 페이지를 만들고 노출시켜야 더 많은 고객들이 유입되고, 전환되는지 알아보고
더 나아가 현재의 당근마켓의 랜딩페이지를 감히 개선해 보는 가상 A/B Test까지 진행해 보자.
랜딩 페이지란?
일반적으로 랜딩 페이지는 새로운 잠재 고객이 서비스의 웹 사이트에서 방문하는 첫 번째 페이지로,
이 정의를 사용하면 랜딩 페이지는 가격 페이지, 블로그 게시물 또는 지원 포럼의 스레드와
같이 잠재 고객이 처음 방문하는 사이트의 모든 페이지가 될 수 있다.
고객들은 당근마켓에 어떻게 유입돼서, 어디로 방문할까?
당근마켓 고객 유입의 핵심 전략, 오가닉 마케팅
당근마켓은 실제로, 서비스 초기 고객들의 유입 및 활성화가 절실히 필요했을 때 외에는
철저하게 페이드 마케팅을 최소화해 왔다.
그렇다면 당근마켓의 오가닉 마케팅 전략에는 어떤 것들이 있었을까?
"당근이세요?" 사람들의 인식에 깊이 뿌리내리기
어느새 중고 거래 = 당근이 자리하고 있다는 것을 우리는 심심치 않게 발견할 수 있다.
누군가가 물건을 기다리고 있다면, 아 중고거래 하는가 보다가 아닌
아 "당근"하는가 보다라고 생각이 들게끔 우리는 이미 당근이라는 단어에 잠식되어 있다.
이는 당근마켓의 슬로건 전략이 제대로 고객들에게 전해졌다는 의미이고,
대중들의 인식 속에 부정적으로 자리하는 것을 피하기 위해
당근은 각종 바이럴 마케팅, 페이드 마케팅을 진행하는 것보다 자연스럽게 사람들의 삶에 숨어들었다.
메시지에는 "카톡" 알림이, 중고 거래에는 "당근" 알림이 울리도록 설정했고,
당근마켓에서의 따듯한 사연이나 재미있는 소식들은 커뮤니티를 통해 자연스럽게 많은 사람들에게 전해졌다.
각종 커뮤니티로 전해지는 당근마켓의 따듯하고, 재미있는 사연들 / 사진 출처 = 당근마켓 팀블로그"당근"은 고객을 위해 모든 것을 맞춘다.
당근은 고객에게 맞춤 서비스를 제공하기 위해, 뭐든 맞추기 위한 최적화 작업에 가장 노력을 한다고 한다.
당근마켓을 이용하는 고객들의 데이터를 최대로 활용해서, 그들에게 맞춤 서비스를 제공하기 위해서
최선을 다하는데, 이것이 고객의 만족으로 또 이어지고, 다시 그 충성 고객들의 데이터들은 당근마켓만의
고급 고객 데이터가 되어 당근마켓의 강력한 무기가 된다.
이 고급 고객 데이터를 통해서 당근마켓은 타겟 고객들에게 최적화된 광고와
SEO(Search Engine Optimization) 검색엔진 최적화를 통해 잠재 고객들에게 당근마켓을
더 노출시킬 수 있고, 자연스럽게 신규 고객들을 더 유입시킬 수 있었다.
당근, 이벤트 같은 것도 실시해..? "당근"
물론 가끔씩 당근도 이벤트를 실시한다, 현재는 친구 초대 이벤트를 진행 중인데
이벤트를 구석에 숨겨 놓고 조건도 꽤나 까다로워서 적극적으로 진행하는 이벤트는 아니지만,
그래도 당근은 이벤트 같은 것을 하기는 한다는 것을 알리기 위해 이야기했다.
이벤트는 부끄러운 게 아니에요 당근..! / 이미지 제작 = 앤더슨당근마켓에 첫 방문 시, 고객이 마주하게 될 랜딩페이지
(좌) 당근마켓의 PC 웹 랜딩 페이지 (우) 당근마켓의 앱 랜딩 페이지당근마켓의 핵심 서비스, 중고 거래까지의 단계 살펴보기
앱 당근마켓의 랜딩 페이지부터, 거래 완료까지의 여정
랜딩 페이지 -> 회원 가입 -> 동네 설정 및 인증 -> 매물 검색 및 탐색 -> 채팅 -> 거래 -> 거래 완료
PC 웹 당근마켓의 랜딩 페이지부터, 서비스 둘러보기
랜딩 페이지 -> 서비스 및 매물 둘러보기
여기서 발견한 특이한 점은, 웹에서의 당근마켓은 실제 당근마켓 앱처럼 서비스가 이용가능 할 것 같은
마켓플레이스 서비스 웹 사이트처럼 보이지만, 실제로는 서비스를 이용할 수 없다는 것이다.
웹 사이트가 당근마켓의 서비스들을 소개하는 페이지로만 보이지 않고 있고
중고거래 등과 같은 서비스를 이용할 수 있을 것 같은 구조를 보이고 있다.
애초에 웹 당근마켓은 당근마켓의 서비스를 소개하는 용도였기에 실질적인 서비스를 이용할 수 없다.
그렇기에 고객들은 웹에서의 충분하지 않은 안내와
웹에서도 당근마켓을 이용해 보세요,라는 웹사이트에 노출되는 문구에 혼동이 생길 수 있다.
물론 채팅 기능의 추가로 이용은 할 수 있게 되었지만, 당근마켓의 핵심 서비스의 여정을 그대로
경험할 수는 없다, 반쪽 짜리도 아닌 극히 일부의 기능과 흐름을 이용하는 정도이다.
(심지어 로그인 버튼도 보이지 않는다.)
모바일 앱 당근마켓과 PC 웹 당근마켓의 랜딩 페이지
모바일 앱 당근마켓의 랜딩 페이지 살펴보기
당근마켓 앱의 랜딩 페이지다음 단계 몰입에 최적화되어 있는 구조
당근마켓의 서비스 문구와 다음 단계로 이동할 수 있는 버튼만을 배열하여 단계 진행에 몰입할 수 있는
최적화된 구조로 화면을 구성했다.
랜딩 페이지 카피라이팅
당근마켓의 핵심 서비스, 지역 기반 중고 거래를 나타내는 메인 카피라이팅인 당신 근처의 당근마켓이라는
문구가 잘 표현되어 있고, 그것을 뒷받침해주는 문구가 부연 카피라이팅으로 배열되어 있어
핵심 서비스의 전반적인 이해가 가능하다.
특히 요즘은 Writing에서는 잡초 제거(Weed Cutting)의 중요성이 자주 대두되는데,
각종 영상과 이미지 콘텐츠에 익숙해진 나머지 사람들은 이제는 글도 읽지 않고 본다는 것이다.
한눈에 잘 보이도록 쓸데없는 단어들은 제거하고, 문구를 간결하고 정확히 만드는 것이 핵심인데
당근마켓은 잡초 제거를 잘하여 명료하고 간결하게 그들의 서비스를 소개하고 있다.
CTA (Call To Action) 버튼
당근마켓의 브랜드 컬러, 주황색으로 버튼을 직관적으로 잘 보여주고 있고 최대한 간결하고 명료하게
작성하여 고객의 다음 행동을 잘 유도하고 있다.
그리고 위치 또한 엄지 영역(Thumbs zone)에 잘 위치하여 고객이 버튼을 활성화하는 데에
문제없이 자리하고 있다.
PC 웹 당근마켓의 랜딩 페이지 살펴보기
당근마켓 PC 웹의 랜딩 페이지어떻게 서비스를 이용해야 할지 모르겠는 구조
여러 가지 메뉴 버튼들과, 기능 버튼들이 존재하고
랜딩 페이지는 존재하지만, 그곳에서 다음 단계로 안내하거나 유도하는 CTA 버튼이 존재하지 않는다.
고객은 어떻게 서비스를 이용해야 할지 모르고,
여러 버튼을 눌러보지만 서비스를 둘러보는 정도에 그치고 어떻게 이용해야 할지 미궁에 빠진다.
서비스를 이용할 수 있는 웹 사이트인지, 서비스를 둘러보는 웹 사이트인지 용도가 헷갈린다.
랜딩 페이지 카피라이팅
모바일과 똑같이, 간결하고 명료하게 메인 카피라이팅과 부연 카피라이팅이 잘 표현되어 있고
서비스 이미지까지 첨부되어 더 자세히 당근마켓의 핵심 서비스에 대한 소개와 정보를 잘 제공하고 있다.
CTA (Call To Action) 버튼
고객의 다음 행동이나 전환을 유도하는 CTA가 존재하지 않는다.
이는 고객이 사이버 미아가 될 확률을 매우 증가시킬 수 있으며, 이탈에 치명적이다.
위의 메뉴 버튼들과 검색 영역, 채팅하기 기능 버튼을 활성화시키기 위해 CTA를 제거했을 수 있지만,
위의 버튼을 눌러 페이지를 이동하더라도, 서비스의 흐름을 전혀 파악할 수 없다.
당근마켓 PC 웹 랜딩 페이지 개선하기
모바일 웹 당근 마켓은 좋은데 PC 웹 당근 마켓은 왜?
모바일 웹 당근마켓 랜딩 페이지모바일에서 웹으로 당근마켓을 접속하면,
모바일 앱으로 고객이 전환하여 서비스를 이용할 수 있도록 명확하게 CTA 버튼을 제공하고 있다.
물론 모바일 환경에서는, CTA 버튼을 통해서 기존 다운로드 했었던 당근마켓을 열거나
Google Playstore, App Store 등으로 바로 연계되어 당근마켓 앱을 다운로드할 수 있도록
흐름을 가져갈 수 있어서 노출시키고 고객의 행동을 유도했다고 볼 수 있다.
PC 웹에서는 그런 연동과 흐름을 가져가지 못한다고 해서 버튼을 없애고 끝내는 것이 아니라,
PC 웹 방문자들에게 당근마켓은 모바일 어플을 통해서 각종 당근마켓 서비스를 제대로 이용할 수 있다는,
자연스럽게 모바일 어플로 전환이 이루어질 수 있도록하는 유도 문구와 안내가 분명 필요하다.
당근마켓 PC 웹 랜딩 페이지의 문제점Case A. 배너 이미지에 모바일 앱 다운로드 안내 및 권유 문구 삽입
Case A. 배너 이미지에 모바일 앱 다운로드 안내 및 권유 문구 삽입 구현 이미지PC 웹 호환의 문제로 CTA로 고객의 행동을 유도하고, 연계할 수 없으니
문구를 삽입하여 당근마켓 앱의 다운로드로의 전환을 유도하고 안내해야 한다.
실제 서비스를 제대로 이용하려면 모바일 앱을 이용해야하기 때문이다.
잘 보일 수 있도록 메인 배너 이미지 속
서비스를 소개하는 메인 카피라이팅과 부연 카피라이팅 밑에 배열하였다.
카피라이팅은 최대한 간결하고 명료하게 핵심만을 담아서 고객의 행동을 유도할 수 있도록 만들었다.
Case B. 메뉴 헤더 위 모바일 앱 다운로드 안내 및 권유 문구 삽입
Case B. 메뉴 헤더 위 모바일 앱 다운로드 안내 및 권유 문구 삽입 구현 이미지Case A와는 다르게, 위치를 변동시켜서 적용한 케이스이다.
메인 배너 이미지에 노출하지 않고, 메뉴 헤더의 상단에 위치시켜 고객이 웹사이트를 통해서
다양한 당근마켓의 서비스를 둘러보다가,
당근마켓의 핵심 서비스는 모바일 앱을 통해서 이용할 수 있다는 사실을 안내 및
앱으로 전환할 수 있도록 유도하는 문구를 발견할 수 있도록 디자인을 설계하였다.
마찬가지로, 최대한 간결하고 명료하면서 당근마켓의 서비스톤을 유지하며 카피라이팅을 작성하였다.
당근마켓 PC웹 랜딩 페이지 A/B Test 진행해 보기 (가상)
그렇다면, 가상으로 A/B Test를 진행해 보면서 글을 마무리하도록 하자.
PC웹 랜딩 페이지 사용성 개선과 전환율 상승을 위한 A/B Test
PC웹 랜딩 페이지 사용성 개선과 전환율 상승을 위한 A/B Test 이미지 구현- 가설
"PC 웹 당근마켓 방문자들에게 서비스 사용을 위해 다운로드 안내 및 유도 문구를 제공하면,
PC 웹으로 당근마켓을 방문하여 혼란을 느끼던 고객은 모바일 앱을 다시 방문 및 다운로드하게 될 것이고,
당근마켓 앱 다운로드 수와 방문자 수 증가할 것이다."
가설을 세우며 느낀 문제점들
가설 부분에서 설정이 어려웠던 부분은 바로 사용성 개선을 어떻게 지표로 나타내느냐였다.
고객이 느끼는 혼란과 불편함이 개선됐음을 어떻게 지표로 나타낼 것인지와 같은 문제는
아직 나에게는 너무 어렵다는 것을 깨달았다,
그리고 안내된 문구로 인해 변화하게 될 PC 웹 환경에서 모바일 앱으로의 전환율을 알고 싶은데,
그것을 어떻게 측정할 수 있을지도 아직 모르겠어서 단순히 앱 다운로드 수 혹은 이용자 수의
증가로 나타낼 수밖에 없는 부분이 너무 아쉬웠다,
애초에 프로젝트를 잘못 설계한 게 아닐까? 하는 생각까지 들었다.
- 목표
PC 웹 랜딩 페이지에 안내 및 유도 문구를 삽입하면 PC 웹에서 모바일 앱으로 전환이
하루에 1,000건 이상 발생할 것이다.
(모바일 어플 일 다운로드 수, 방문자 수 증가?)
목표를 설정하며 느낀 문제점들
프로젝트가 잘못되었나 하는 생각을 더 굳히게 되었던 것 같다.
도무지 PC 웹에서 모바일 앱으로의 전환을 어떻게 지표화 할지 모르겠어서,
모바일 어플 일 다운로드 수, 방문자 수 증가라는 말도 안 되는 지표를 설정했다.
모바일 어플 다운로드 수에 대한 변수통제는 대체 어떻게 할 것이란 말인가?
그리고 1,000이라는 증가 치도 데이터가 없어 어림짐작으로 만들었다.
당근마켓의 PC 웹의 DAU를 따로 구할 수가 없었기 때문이다.
- 기간
오차 범위를 줄이면서도, 실패 시 또 다른 프로젝트로 빠르게 넘어갈 수 있도록 10일간 진행.
문구만 배열하면 되는 것이기 때문에 개발 비용은 매우 적은 편에 속한다.
- 대상
Test 기간 동안 PC 웹사이트로 당근마켓을 방문하는 모든 고객들 (Cohort)
- 측정 지표
앱 다운로드 수 증가, 앱 DAU 증가
측정 지표를 설정하며 느낀 문제점들
위에서 반복해서 말했던 것처럼, 지표를 어떻게 설정해야 하는지 너무 어려웠다.
내가 진행하면서 개선하고자 하는 것들이 지표로 표현이 안된다는 게 너무 당황스러웠고 곤욕이었다.
프로젝트를 애초에 잘못 설계했다는 생각이 확신이 되었다, 어떤 지표와 데이터를 개선하고 하고 싶어서
진행한 것이 아니라, 모든 것이 내가 단순히 느낀 불편에서 이 프로젝트가 시작됐다는 것이
이 비극의 시작이었다.
하지만 괜찮다.
알았으면 됐고, 앞으로 많이 배우고 나아가면 된다.
마지막으로, 가상을 이미 한 김에 끝가지 해보려 한다.
만약 수치가 개선 됐을 시 다음 단계로 진행해야 할 A/B Test
만약 수치가 개선 됐을 시, 다음 단계로 진행해야 할 A/B Test (문구 위치 수정)
참고 문헌 및 아티클
https://www.mk.co.kr/news/fastview/10058965
https://zdnet.co.kr/view/?no=20201019183731
