왓섭은 어떻게 고객들에게 첫 인상을 남길까
[코드스테이츠 PMB 10기] 랜딩페이지 A/B 테스트
왓섭의 랜딩페이지는
사람을 유혹하기 위한 것이다
1. 3초만에 결정되는 첫 인상, 랜딩페이지
온라인 서비스를 이용하다보면, 제품의 브랜드를 알리고 소개하는 페이지 또는 특정 구매 행동을 하도록 만드는 페이지 등을 많이 본 적이 있을 것이다.
나의 개인적인 경험을 공유하자면, 최근 콘텐츠 관련 정기구독에 많은 관심이 생겨 퍼블리나 아웃스탠딩을 많이 기웃거리는데 맨 처음 나타나는 이 화면 역시 랜딩페이지라 할 수 있다.
이처럼 검색 엔진, 광고 등을 경유하거나 네이버나 구글 검색을 통해 사용자들이 유기적으로 접속하였을 때 최초로 보게 되는 웹페이지를 랜딩페이지(landing page) 라고 부른다.
어원 역시 찾아보면 좋을 것 같아 영어로 살펴보니, "A landing page is a standalone web page that a person 'lands' on after clicking through from an email, ad, or other digital location' 이라고 하는데, 사람들이 처음 착륙하게 되는 페이지라서 랜딩페이지라고 부르는 것 같다.
랜딩페이지 (출처. 퍼블리)그렇다면 사용자들이 이 랜딩페이지에 도달하였을 때 얼마나 많은 비율이 이탈할까?
그 수치는 놀랍게도, 47%에 이른다. 즉, 평균적인 수치로 봤을 때 100명 중 47명이 랜딩페이지에 도달했음에도 깊이 둘러보지 않고 해당 사이트 창을 닫는 것이다. (참고)
또한 사람들이 보통 사람의 첫인상을 인식할 때 3초만에 인식을 한다는 통념처럼, 웹사이트에 대한 첫인상 역시 평균 3초만에 형성된다고 한다. 즉, 3초라는 그 짧은 시간 만에 사용자들이 이 웹페이지를 계속 이용할 지, 아니면 이탈할 지에 대한 판단을 내리는 것이다. (참고)
그러므로 우리 PM은 랜딩페이지를 설계할 때 사용자들이 원하는 것을 바로 제시할 수 있으며 3초 안에 지속적으로 이 사이트를 이용할 수 있도록 적재적소에 콘텐츠를 배치해야 한다. 그리고 이 짧은 시간 안에 사용자를 설득 시키기 위해서는 랜딩 페이지에 다음 네 가지에 대한 답을 제시할 수 있어야 한다. (참고)
· 이 회사는/브랜드는 잘 소개하고 있는가?
· 이곳은 신뢰할 만한 곳인가?
· 이곳은 어떤 세부 상품/서비스를 팔고 있나?
· 다음 행동을 유도하고 있는가? (CTA가 명확한가?)
그래서 이번 포스팅에서는 위의 내용에 입각하여 구독관리를 도와주는 '왓섭'의 랜딩페이지를 살펴볼 예정이다. 그 전에 왓섭이 어떤 서비스를 제공하고 있는 지부터 간략하게 설명하고자 한다.
2. 내 구독 관리를 도와줘요, 왓섭
해당 서비스는 이번에 콘텐츠 관련 구독을 신청해볼까 하는 생각이 많이 들면서, 그러면 구독 관리를 어떻게 하지? 하는 고민에서 찾아본 서비스이다.
왓섭은 마이데이터를 활용하여 개개인의 구독 서비스를 관리해주는 구독 서비스 통합관리 플랫폼이다.
요즘은 넷플릭스, 유튜브 프리미엄, 멜론 등 여러 서비스들이 구독 비즈니스 모델을 채택하게 되면서 구독 경제 시대가 되었다. 하지만 구독 서비스들이 범람하게 되면서 각 개인들은 내가 무엇을 구독했는지, 또는 언제가 결제일인지를 잘 몰라 관리하기 어려운 시대가 되기도 하였다.
이에 왓섭은 이런 서비스 소비자들이 겪는 문제점을 해결하고자 ▲이용 중인 서비스 자동 추출 ▲간편 해지 ▲결제 전 알림 ▲지출 관리(결제금액 및 결제일 확인) 등의 기능을 제공하고 있다.
특히, 결제 전 알림과 간편 해지 기능은 사용자들이 구독 서비스 결제 전 알림을 통해 추가 결제에 대한 여부를 쉽게 결정할 수 있고, 해지 역시 쉽게 할 수 있다고 한다. 이는 현재 국내에서 사용되고 있는 국내외 295개의 구독 서비스 전체에 대한 간편 해지 기능을 제공하여, 구독 서비스 해지에 대한 어려움을 충분히 해소하고 있다.
그렇다면 왓섭은 현재 랜딩페이지를 어떻게 구성하고 있을까?
하나부터 열까지 꼼꼼히 살펴보고자 한다.
3. 왓섭의 랜딩페이지
*아래의 링크로 왓섭 랜딩페이지를 확인할 수 있습니다:)
[앱 설치/문의] CTA : 1단계
메인 카피 : 왓섭, 구독을 더욱 편리하게
CTA 카피 : 앱 설치하기
[기능] 설명 : 2단계
메인 카피 : 흩어져있던 내 다양한 구독들 전부 모아서 보면 좋지 않을까요?
[구독요약] 설명 : 3단계
메인 카피 : 한눈에 보는 내 정기 구독
서브 카피 : 구독, 전화요금부터 적금, 대출, 관리비까지. 내 손 안에서 간편하게 관리
[실시간 구독 현황] 설명 : 4단계
메인 카피 : 시간마저 지켜주는 구독 관리의 시작
서브 카피 : 아직도 구독을 직접 적어서 관리하나요? 이제 왓섭이 자동으로 찾아서 관리해드릴게요!
바디 카피 : 모든 구독을 한 눈에 실시간 자동 관리 / 결제 수단 연동으로 한 번에 등록 / 구독을 넘어서, 생활까지 빠짐없이
CTA 카피 : 어떻게 이렇게 빠를까요?
[구독 요약과 정보] 설명 : 5단계
메인 카피 : 한 눈에 확인 한 번에 결정
서브 카피 : 숨만 쉬어도 매월 얼마씩 쓰고 있을까요? 내역을 모아, 요약과 정보도 한 눈에 확인해봐요!
바디 카피 : 구독료는 물론 결제일까지 확실하게. / 자세한 정보도 꼼꼼하게 확인
[결제 전 알림] 설명 : 6단계
메인 카피 : 잊고 살아요. 우리가 챙길게요.
서브 카피 : 왓섭은 구독이 결제되기 3일 전부터 알려드려요. 이제 몰래 결제되던 구독과는 안녕이라구요.
바디 카피 : 다가오는 결제일은 알림으로 미리 확인 / 갱신 3일 전은 물론 갱신된 후에도 꼼꼼하게 / 구독료가 조금만 달라져도 누구보다 빠르게 알림
[유도] 설명 : 7단계
메인 카피 : 지금 시작해요 나를 위한 구독 관리
서브 카피 : 내 구독을 모두 모아, 보기 편하게 요약해서, 잊기 전에 알림.ㅣ 소중한 돈과 시간을 지키는 방법, 이제 왓섭 하나면 충분해요
[보안] 설명 : 8단계
메인 카피 : 철저한 보안만큼 중요한 건 없으니까
서브 카피 : 업계 최고 수준, 강력한 보안
CTA 카피 : 왓섭에게 보안이란?
[구독 해지] 설명 : 9단계
메인 카피 : 해지는 어려워도 왓섭은 쉬워요
서브 카피 : 해지 버튼이 아무리 꼭꼭 숨어있더라도 왓섭과 함께라면 버튼 하나로 간편하게 해지할 수 있어요
[간편 해지] 설명 : 10단계
메인 카피 : 4단계로 끝나는 간편한 구독 해지
서브 카피 : 누구나 쉽고 안전하게 해지할 수 있어요 / 내가 편한 방법을 선택하고 / 쉽고 빠르게 그리고 확실하게 / 누구나 손쉽게 해지 완료!
[다양한 해지 방법] 설명 : 11단계
메인 카피 : 내가 편한 방법으로. 내 구독이니까.
서브 카피 : 누군 전화가, 누군 홈페이지를 통한 해지가 편할 수 있어요. 왓섭은 누구나 간편하게 해지할 수 있도록 다양한 해지 방법을 제공해요.
바디 카피 : 계정 입력만으로 자동 해지 / 친절한 설명과 함꼐하는, 웹에서 해지하기 / 앱 마켓에서 구독한 서비스도 스토어에서 해지 / 단계별로 자세하게, 앱에서 해지하기 / 직접 확실하게, 전화로 해지하기
[해지] 설명 : 12단계
메인 카피 : 구질구질한 해지 깔끔하게 안녕
서브 카피 : 복잡한 해지는 그만
CTA 카피 : 왓섭이 해지에 진심인 이유
[구독하기] 설명 : 13단계
메인 카피 : 구독으로 사는 법 왓섭에서만.
서브 카피 : 다양한 상품과 서비스를 원하는대로 구독해요. 내 취향에 맞는 제품과 서비스가 기다리고 있어요.
[먼저 체험해보기] 설명 : 14단계
메인 카피 : 써보기 전에는 아무도 모르니까.
서브 카피 : 넷플릭스는 되는데, 다른 구독들이라고 안될게 있을까요? 왓섭에는 다양한 구독을 미리 체험해볼 수 있어요!
바디 카피 : 구독 한 번이면 필요할 때마다 찾아가요 / 체험해보고 부담 없이 구독해요 / 나도 모르게 갱신될 일 엇는 결제 전 알림까지
[안심하고 구독해요] 설명 : 15단계
메인 카피 : 쉬운 구독만큼 선택도 간편하게
바디 카피 : 결제 건너뛰기는 물론 상품 변경도 손 쉽게 / 원하지 않을 때는 언제든지 간편 해지 / 마음에 들었던 서비스는 언제든지 구독해요
[취향저격 구독] 설명 : 16단계
메인 카피 : 쉬운 구독만큼 선택도 간편하게
[설치 유도] CTA : 17단계
메인 카피 : 간편한 구독 관리를 단 하나의 앱에서
CTA 카피 : 앱 설치하기
[협력사] 설명 : 18단계
[리뷰] 설명 : 19단계
[언론 보도] 설명 : 20단계
메인 카피 : 언론이 전하는 왓섭의 모습
4. 왓섭의 랜딩페이지는..?
내리다 내리다 지치는, 엄청난 스크롤 바..
먼저, 왓섭의 모든 랜딩페이지(무려 20단계..)를 나열해보았다. 원래는 각 페이지마다 분석을 해보려 했지만, 예상 외로 왓섭의 랜딩 페이지가 너무 길어서 데일리 과제로 끝내기는 힘들 것 같아 차후로 미룰 수 밖에 없었다..
그래서 이번 포스팅에서는 위의 4가지 요건을 충족하는 지를 이번 포스팅에서 확인해보고 해당 분석 내용을 토대로 고객 전환율을 올릴 수 있는 랜딩 페이지로 개선해보고자 한다.
· 이 회사는/브랜드는 잘 소개하고 있는가?
· 이곳은 신뢰할 만한 곳인가?
· 이곳은 어떤 세부 상품/서비스를 팔고 있나?
· 다음 행동을 유도하고 있는가? (CTA가 명확한가?)
[원칙 1] 이 회사/브랜드는 자신을 잘 소개하고 있는가?
왓섭이 자신을 잘 소개하고 있는가, 에 대한 질문은 '그럴수도..' 라고 할 수 있다.
맨 처음 랜딩 페이지, [앱 설치/문의] CTA : 1단계 에서도 볼 수 있지만 브랜드 네임인 '왓섭' 과 '구독을 더욱 편리하게' 라는 메인 카피를 같이 배치해두어 왓섭이 어떤 서비스인지는 현재 모르겠지만 대충 구독을 편리하게 만들어주고자 하는 서비스이구나 하는 점을 바로 알아차릴 수 있었다.
또한 스크롤을 내리면서 바뀌는 화면을 이용하여 왓섭이 어디에 물음을 던졌고, 어떻게 해결하고자 하는 지를 간결하게 서비스 화면으로 보여주고 있었다.
하지만 왓섭은 구독관리 뿐만 아니라 다른 서비스 역시 제공을 하고 있다. 즉, [구독관리]를 하면서도 '내 모든 구독 보기', '간편하게 해지하기', '다른 서비스 체험하고 구독하기' 이렇게 3가지의 서비스를 제공하고 있는 것이다.
하지만 왓섭의 스크롤은 너무 길어서 모든 내용을 보기 전에 사용자가 이탈할 가능성이 높다. 그러므로 이 부분에 대해서 좀 더 간결하게 내용을 전달하면서도 깊은 내용을 보고 싶은 사용자들을 위해서 따로 페이지를 만들어야 하지 않을까, 생각이 들었다.
[원칙 2] 이곳은 신뢰할 만한 곳인가?
이 질문에서도 'yes' 라는 답을 얻을 수 있다.
왓섭이 구독 관리를 할 수 있는 이유는 바로 개인의 마이데이터 활용이다. 그러므로 사용자가 보안에 불안감을 가지지 않을 수 있도록 왓섭은 보안 측면에서 매우 신중을 기해야 한다.
이에 왓섭은 이미 랜딩페이지에서 [보안] 설명 : 8단계 에서 어떻게 개인정보를 보호하고 있는 지 상세하게 알려주고 있다.
또한 [리뷰] 설명 : 19단계 에서 왓섭을 이용한 수많은 리뷰들을 계속해서 보여주는 무한 롤링 배너를 활용하여 왓섭이 매우 유용한 서비스임을 알려주고 있었다.
그에 더하여 [언론 보도] 설명 : 20단계에서는 왓섭이 언론에서 받은 평들을 모아 왓섭이 이미 유명 언론에서도 주목을 받는 서비스임을 보여주고 있다.
[원칙 3] 이곳은 어떤 세부 상품/서비스를 팔고 있나?
이는 [먼저 체험해보기] 설명 : 14단계 와 [취향저격 구독] 설명 : 16단계 를 통해 왓섭이 구독관리 이외에도 어떤 서비스를 제공하고 있는 지를 쉽게 알 수 있게 하였다.
하지만 이 부분에서 아쉬웠던 점은 [취향저격 구독] 설명 : 16단계 의 페이지가 작은 화살표로 움직여야 했던 점이다. 왓섭은 간결화에 초점을 맞추고 있기 때문인지 필요한 버튼들이 모두 너무 작았다.(..) 그래서 이 부분 역시 좀 더 편한 사용성을 위해 수정할 필요가 있다고 느꼈다.
[원칙 4] 다음 행동을 유도하고 있는가? (CTA가 명확한가?)
CTA가 명확한가? 하는 질문에서는 왓섭의 랜딩페이지는 조금 아쉬웠다. 왜냐하면 앞서도 이야기를 했지만 스크롤은 20단계나 거칠만큼 너-무- 길었고, 맨 위 상단의 오른쪽에 앱 설치하기 버튼은 있지만 페이지에 비해 너무 작아서 눈에 들어오지 않았다.
또한 맨 처음과 맨 마지막 단계에만 CTA 버튼을 두고 있었기 때문에 스크롤을 내리다가 지친 사용자가 이탈할 가능성도 있다는 생각이 들었다.
그래서 이번 포스팅에서는 앞서 서술하였던 부분들, [취향저격 구독] 설명 : 16단계과 CTA의 명확성에 초점을 두고 왓섭의 랜딩페이지를 개선하고자 한다.
5. 고객의 이탈율을 막아라!
좀 더 명확한 CTA
그렇다면 명확한 CTA를 위해서는 어떻게 해야 할까? 이 부분은 고민한 끝에 CTA 버튼의 마이크로카피를 수정하고, 왓섭의 3가지 제공 서비스를 단적으로 알려주어야 한다는 결론을 얻었다.
먼저, CTA 버튼의 마이크로카피를 살펴보면 '앱 설치하기' 로 매우 딱딱한 형식을 가지고 있다. 온보딩 과정에서의 모든 마이크로 카피는 살펴보았을 때, 말을 건네듯이 부드러운 체를 유지하고 있는데 중요한 CTA 에서만 딱딱한 형식을 가지는 것은 일관되지 않다는 생각이 들었다.
그래서 해당 부분에서는 어떻게 수정할까 하다, '뱅크샐러드' 의 CTA 버튼 마이크로 카피가 생각났다.
뱅크샐러드의 CTA 버튼 카피를 보면 '뱅크샐러드 사용해보기' 로 한번 가볍게 사용해볼까? 하는 느낌을 주고 있다. 그러므로 왓섭 역시 '왓섭 사용해보기' 라는 버튼으로 가볍게 다가가보면 어떨까, 하는 생각이 들었다.
또한 뱅크샐러드에서는 아래의 그림처럼 뱅크샐러드가 제공하는 가치를 3가지로 간단하게 이야기를 하고 있다.
만약 사용자가 서비스에 대해 더 상세하게 알고 싶다면, '서비스 더 알아보기' 버튼을 이용하여 더 많은 정보들을 얻을 수 있게 하였다.
이처럼 왓섭 역시 [구독 모아보기], [간편 구독 해지], [새로운 서비스 구독] 3가지의 왓섭 가치를 한 눈에 알아볼 수 있도록 하나의 랜딩페이지로 구성하고 긴 스크롤은 서비스를 더 상세히 알고 싶은 사람을 위하여 따로 버튼을 두는 게 좋지 않을까? 하고 제안해본다.
더 많은 취향 보기
[취향저격 구독] 설명 : 16단계 의 경우, 왓섭이 이용한 리뷰 무한 롤링 배너처럼 이 역시 계속해서 배너가 이동되는 것을 제안하고자 한다. 이 아이디어는 현재 위클리 과제로 분석하고 있는 밀리의 서재 랜딩페이지에서 차용했다.
밀리의 서재 랜딩페이지의 경우, 10만권의 책을 지속적으로 롤링하는 형식을 사용하여 사용자들이 '밀리의 서재는 많은 책을 가지고 있구나' 라는 생각을 가지게 한다.
왓섭 역시 해당 기능을 사용한다면 왓섭을 통해 구독할 수 있는 서비스들에 사용자들은 흥미를 가지게 되고, 어떤 구독 서비스들이 있지? 하는 생각으로 왓섭에 대한 구독자를 늘릴 수 있는 방안이라 생각이 들었다.
+) 번외
번외로 문의하기 부분에서도 조금 불만족스러운 부분이 있었다. 아래의 이미지와 같이 물음표에 마우스 호버하게 되면 '궁금한 게 있으신가요? 왓섭에게 문의하기' 라 뜨는데 처음에는 여타 다른 페이지들과 같이 자체 물음을 할 수 있도록 만들었을 거라 예상했다.
하지만 예상과 다르게 갑작스럽게 카카오톡으로 이동이 되면서 왓섭 카카오 채널톡이 개설이 되었다. 그래서 해당 부분에 관하여 좀 더 명확한 카피라이팅이 필요하지 않을까, 하는 고민을 하게 되었다. (카카오톡 알림에 깜짝 놀랐다..)
하지만 이 부분은 전환에 필요한 필수적인 요소가 아니므로, 차후에 수정해보도록 하겠다.
참고자료.
