brunch

You can make anything
by writing

C.S.Lewis

by 진하 Sep 12. 2021

'도그메이트'의 랜딩페이지를 분석해보자! (1)

CTA 확인하기

유저가 검색이나 광고를 통해서 접속했을 때 처음으로 만나게 되는 페이지를 '랜딩페이지(Landing Page)'라고 합니다. 랜딩페이지는 해당 서비스의 마케팅을 위해 존재하기 때문에, 마케팅 측면에서 우리가 의도한 대로 사용자의 액션을 불러낼 수 있도록 만들어야 하죠. 광고를 통해 서비스에 대한 관심을 보였더라도 이 랜딩페이지가 제대로 된 유저 액션을 불러오지 못하면 결과적으로 서비스 유입을 시키기가 매우 힘들어질 수 있습니다.

CTA (Call-To-Action)

콜투액션은 '유저의 반응이나 액션을 유도하는 행위'를 뜻합니다. 유저가 액션을 하도록 유도하는 버튼, 배너, 링크, 양식 등을 말하죠. 이렇게 불러낸 유저의 행동은 유저 유입, 회원가입, 서비스 신청, 이벤트 참여 등의 유의미한 결과를 가지게 됩니다. 그 결과가 무의미하다면 콜투액션이라기 보단 단순히 경험에서 그치게 됩니다. 랜딩페이지에서 콜투액션은 당연 매우 중요한 요소입니다. 어떻게 유저의 액션을 만들어 내는지 실제 프로덕트 분석을 통해 알아보겠습니다.

도그메이트의 랜딩페이지 분석

도그메이트는 모바일 어플리케이션을 통해 반려동물을 돌봐줄 펫시터를 매칭 해주는 온디멘드 O2O 서비스입니다. 어플리케이션에서 간편하게 펫시터를 예약할 수 있고, 돌봄과 산책서비스 등을 신청할 수 있습니다. 추가적으로 '강아지 상식'등 정보성 콘텐츠를 제공하기도 합니다.

자 그럼 도그메이트의 랜딩페이지를 블록별로 분석해 볼게요. 도그메이트의 랜딩페이지는 어떤 메시지와 요소들을 포함하고 있는지, 또 어떤 방식으로 CTA을 위한 장치를 녹여냈을지 알아보겠습니다.

<도그메이트 랜딩페이지 바로가기> www.dogmate.co.kr

헤더, 푸터와 총 9개의 블록으로 이루어져 있어요. 9개의 블록 중 5개의 블록에 CTA 요소를 포함하고 있습니다.

랜딩페이지의 구조

[영상 배너 + CTA] - [서비스 어필] - [설명 1 + 보충설명 링크] - [보충설명] - [설명 2] - [설명 3] - [서비스 리뷰] - [보충설명 링크] - [CTA] - [고객센터 안내]

첫 번째 블록 [영상 배너 + CTA]

Backgraond에 영상을 삽입 : 짧은 강아지 돌봄 영상 루프

메인 문구 : 전문 펫시터가 돌봐드려요

보조 문구 : 나와 내 반려동물을 위한 돌봄 서비스

CTA : 앱 설치 유도 버튼 "앱 설치하기"

두 번째 블록 [서비스 어필]

누적 데이터를 다수의 행복한 강아지 이미지와 함께 보여줌

문구 : 1등 펫시터 도그메이트

활성화된 서비스라는 느낌을 줍니다.

세 번째 블록 [설명 1 + 보충설명 링크]

어떤 서비스가 제공되는지 설명

문구 : 우리 강아지 전담 매니저, 방문 펫시터

정보 : 각각의 항목을 텍스트로 나열, 클릭 시 부가적인 설명을 보여줌

CTA : 더 많은 정보를 볼 수 있도록 유도하는 버튼 "자세히 보기"

네 번째 블록 [보충설명]

세 번째 블록에서 제시한 '펫시터'에 대한 전문성 어필

문구 : 믿고 맡길 수 있는 펫시터

정보 : 3가지 주요 펫시터 선별 기준을 이미지와 함께 나열

다섯 번째 블록 [설명 2]

서비스에 대한 신뢰감 어필

문구 : 안심할 수 있는 돌봄 프로세스

정보 : 주요 안심 포인트를 버튼 형태로 나열하고, 클릭 시 오픈하여 부가 설명을 보여줌

반려인들이 서비스를 이용하지 않을 이유를 해결해줌

여섯 번째 블록 [서비스 리뷰]

이미 서비스를 사용한 사람들의 리뷰 내용을 나열

문구 : 6만 명의 반려인이 선택한 펫시터 서비스

정보 : 8개의 실제 리뷰 나열

리뷰 오른쪽 화살표를 클릭 시 팝업 형태로 리뷰를 볼 수 있지만 알아보기 힘듦

일곱 번째 블록 [보충설명 링크]

고양이 펫시터도 운영 중임을 알림

문구 : 고양이 펫시터

보조 문구 : 고양이 전문 펫시터가 직접 방문하여 집사의 일을 대신해드립니다.

CTA : 더 많은 정보를 볼 수 있도록 유도하는 버튼 "자세히 보기"

도그메이트라는 이름과는 다르게 고양이도 펫시팅 가능. 하지만 자세히 보기를 눌러도 강아지 펫시팅에 대한 내용을 가진 페이지로 연결되어 혼란스러움.

여덟 번째 블록 [CTA]

앱 설치 유도

문구 : 앱 전용 쿠폰 및 회원 전용 쇼핑몰 혜택을 누려보세요!

CTA : 앱 설치 유도 버튼 "앱 설치하기"

어플리케이션 목업 이미지에 이벤트 화면을 보여줌 -> 앱 설치를 하면 이득을 볼 것 같은 느낌을 줌

아홉 번째 블록 [고객센터 안내]

고객센터 안내

문구 : 더 궁금하신 사항이 있다면, 고객센터로 문의 주세요!

CTA : 고객센터 전화연결 버튼, 카카오톡 1:1 상담 연결 버튼

정보 : 고객센터 이용시간

전화 버튼은 모바일에서는 바로 연결, PC Web에서는 "고객센터로 연락주시면 친절하게 상담 도와드리겠습니다." 메시지 박스를 띄워줌

블록 외

스크롤 위치와 별개로 도그메이트 앱 설치 CTA버튼과 작은 카카오톡 상담 연결 버튼이 띄워져 있습니다. 페이지 구조에서 처음과 마지막에 앱 설치 CTA가 배치되어 있고 중간은 대부분 정보로 이루어져 있지만 플러팅 버튼으로 언제든 앱 설치 프로세스로 진입할 수 있도록 안내하고 있습니다. 이 플러팅 버튼을 포함하여 PC에서 앱 설치 CTA 버튼들을 누르면 토스트 팝업의 형태로 앱 설치 주소를 문자로 받을 수 있도록 해줍니다. PC를 이용하고 있는 사용자에게 모바일 어플리케이션 다운로드 페이지로 이동을 시켜도 앱 설치로 바로 이어지기는 쉽지 않을 텐데, 전화번호를 입력하면 흐름이 끊기지 않고 모바일에서 바로 다운로드 링크로 들어갈 수 있는 것이죠.

이 랜딩페이지를 모바일에서 볼 때는 또 다른데요, 모바일에서는 어플리케이션 설치 페이지로 직접 연결할 수 있기 때문에 접속을 하면 풀 스크린의 형태로 먼저 앱을 설치하도록 권유합니다. 거절하고 모바일 웹에서 보겠다고 하는 것도 가능합니다. PC웹에서 보이던 플러팅 버튼 대신에 모바일에서는 "펫시터 예약하기" 버튼으로 CTA를 유도합니다.