메인배너로 CTA 홀리기
(내가 '문토' PM라면..)
[코드스테이츠 PMB 8] 고객 분석 기법 A/B 테스트
졸업을 유보하고 다양한 경험을 하면서, 나와 비슷한 생각을 가지고 일을 하려는 사람들을 많이 만나보고 싶다는 생각을 했었다. 또 여러 사람들과 일을 벌여보면서 취향 또한 일을 할 때도 굉장히 중요하다는 것도 느끼게 되었다. 나와 같은 방향을 고민하고 대화를 나누며 일을 만들어볼 사람들이 내겐 필요했다. 하지만 내가 지금 사는 곳에서는 한계가 분명히 있었고, 결국 나는 이런저런 프로그램을 찾다 온라인으로 눈길을 돌렸다. 그러다 알게 된 것이 바로 소셜 살롱 '문토'이다.
출처 - 문토
문토는 취향으로 만나는 관심사 기반 커뮤니티로 온, 오프라인으로 다양하게 사람들을 만나 볼 수 있다. 문토를 알게 되고 랜딩 페이지에 처음 들어갔을 때 문토를 알기 위해서 시간이 걸렸던 기억이 난다. 취향으로 모이는 건 잘 알겠는데 그래서 어떻게 한다는 거지?라는 생각이 들었다. 쭉 페이지를 내렸을 때야 앱이 있다는 사실을 알았고 앱을 다운로드하고 이것저것 확인해 보게 되었다. 그러고 난 뒤 랜딩 페이지에 있는 콘텐츠들을 보았는데, 기존 앱과는 다른 형태의 모임들이 있어서 문토를 처음부터 알고 있지 못했던 나는 헷갈리는 부분이 생겼다. 아마 랜딩 페이지에서 사용자에게 어떤 혼선을 주는 부분들이 있었기 때문이라는 생각이 들었다. 그래서 이번에는 문토의 랜딩 페이지를 따라 개선해야 할 부분을 찾아보고자 한다.
'문토'의 랜딩 페이지 (8단계)
유도1 (메인 배너) - CTA (sba 서울산업진흥원) - 유도2 (소셜링) - 유도3 (VOD) - 설명 (후기) - 설명 (매거진) - CTA (앱 다운로드) - 유도4 (문토 정보, 소셜 미디어)
문토는 원래 아래와 같은 3가지 모임으로 진행되고 있었다.
리더 모임 - 수업이나 강의 형식이 아닌, 전문가 리더와 다양한 경험을 함께 하며 취향을 더 깊이 있게 즐기는 모임
함께 만드는 모임 - 다양한 주제에 대한 서로의 생각과 경험을 자유로운 대화를 통해 공유. 새로운 사람들과 특별한 일상을 함께 만들어 가는 모임
클래스로 모임 - 지식을 압축적으로 전달하는 강의형 모임. 각 분야 최고의 전문가 리더님으로부터 관심사에 대한 핵심 정보를 배움
하지만 현재는 함께 만드는 모임이 소셜링으로 리더, 클래스 모임은 VOD 형태로 진행되고 있는 것 같다. 이런 문토의 자세한 비즈니스 모델을 아는 데 정말 한참 걸렸다... 인스타부터 공지사항, 소개 페이지까지 샅샅이 뒤져 알게 된 사실이다. 아직도 문토에는 소셜링, 리더 모임, 파트너 등 다양한 카피들로 사용자를 혼돈시키고 있어, 이러한 혼돈을 줄 수 있는 점을 문토의 랜딩 페이지 내에서 가장 먼저 개선해야 한다. 그리고 종료된 프로그램이나 코로나로 인해 고려 중인 서비스들로 현재 이용할 수 없다면 이에 대한 고지가 반드시 필요한데, 관련된 안내도 없어서 더 혼동된다고 생각한다.
또한, 현재 문토 웹에서는 등록된 소셜링을 볼 수 있지만 참여하기 위해선 문토 앱을 설치해야 한다. 그리고 문토 VOD는 웹에서만 구매가 가능하다. 그렇기 때문에 문토 웹에서는 소셜링을 이용하기 위해 문토 앱 설치를 권장하는 CTA와 VOD 구매 CTA를 중점으로 보여주어야 한다.
이러한 문제점을 생각하며 문토 랜딩 페이지를 단계별로 살펴보고, 개선할 점을 찾아보자.
'문토'의 랜딩 페이지 구조를 파헤쳐 보자
단계별로 알아보는 문토 랜딩 페이지 (20년 10월 기준)
1단계 - 유도1 (메인 배너)
문토의 메인 배너는 위와 같은 3개의 이미지로 구성되어 있다.
문토의 홈페이지 첫 화면은 큰 배너로 가득 차 있다. 하지만 여기서 메인 배너 첫 화면을 누르면 다른 페이지로 이동되지 않는다. 단지 문토에 대한 설명만 작성되어 있다. 또한 배너가 자동으로 돌아가지 않고 고정되어 있어 사용자가 하나씩 넘겨보아야 한다. 그리고 2,3번째 페이지는 각각 VOD, 소셜링 페이지로 이동된다. 여기서 문제가 발생한다. 우선 첫 메인 페이지에서 클릭되는 화면이 아니기 때문에 사용자는 1차적으로 '어? 그냥 소개용 이미지 배너인가 보다'라고 배너를 인식하게 된다. 또한 자동으로 넘어가지 않아서 수동으로 다음 화면으로 넘겼을 경우에도 똑같은 레이아웃에 설명이 써져있기 때문에, 첫 배너 화면과 같은 소개용 이미지 배너라고 착각할 확률이 높다.
문토처럼 메인화면에 큰 배너를 둔 클래스 101과 비교해 보았다. 각 배너는 오른쪽 하단 바의 게이지가 채워지면서 자동으로 다음 이미지로 넘어가게 된다. 그리고 오픈! 증정! 클릭! 과 같은 메인 카피가 작성되어 있다. 이런 카피 문구와 휙휙 돌아가는 배너는 자연스레 관심을 유도하게 되고 사용자는 빠르게 지나가는 배너를 쓱 훑어보고 어? 이거 뭐지? 하며 궁금증이 생기는 찰나와 함께 클릭하게 된다. 그렇기 때문에 그냥 고정되어 있을 땐, 심리상 이걸 빨리 눌러보고 싶다는 마음이 덜 들게 된다.
이렇게 바꿔보자
기존 클래스 101 같은 경우에는 다양한 콘텐츠가 개별로 배너에 등록되지만, 지금 문토는 소셜링이나 VOD 개별로 노출시키는 광고 매출은 없는 것으로 판단된다. 그렇기 때문에 현재도 이런 문토 내의 VOD와 소셜링에 관한 메인 페이지로 배너를 구성한 것 같다. 하지만 그래도 현재 문토 메인 배너보다 사용자의 흥미를 이끌 수 있는 카피로 개선해야 한다. 통일되지 않는 문구를 취향이라는 단어로 묶어 카피를 개선했다. 그리고 현재 문토 웹에서 사용자가 최종적으로 도달해야 할 사항들은 VOD, 앱 다운로드, 그리고 2단계에서 확인하게 될 Sba 서울산업진흥원 커뮤니티 내용이다. 그렇기 때문에 이러한 내용을 배너로 만들고 사람들이 배너를 통해 최종 구매, 다운로드 CTA까지 도달 거리를 줄이도록 개선했다.
2단계 - CTA (Sba 서울산업진흥원 커뮤니티 이동)
출처 - 문토 홈페이지 문토는 지금 Sba 서울산업진흥과 함께 서울시 중소기업 재직자를 대상으로 커리어 커뮤니티와 취미, 여가 커뮤니티를 진행하고 있다. 내가 맨 처음 이 카피를 보았을 땐, 직장 생활 ON&OFF라는 카피에서 커리어와 취미, 여가 커뮤니티를 바로 떠올릴 수 없었다. 밑에 마이크로 카피를 보면 '마케팅, 리더십, 미술, 영화, 건축, 클래식, 재즈, 재테크, 글쓰기까지'라고 나와있는데 커뮤니티 주제를 나열해 둔 거라 바로 어떤 종류의 커뮤니티인지 떠올리기가 어렵다. 문토를 통해 유입된 고객은 이미 소셜링과 같은 커뮤니티에 관심이 있는 사용자들이다. 나열식 카피에 작성된 내용은 기존에 문토에서 진행하는 소셜링에서도 쉽게 볼 수 있어, 사용자들은 과연 직장 생활 ON&OFF가 어떤 차별점이 있을까라는 의문이 든다. 그렇기 때문에 기존 소셜링과 차별성을 강조해 전문가들과 함께 하는 커뮤니티임을 어필하고, 이것을 무료로 제공한다는 것을 강조하는 것이 중요하다고 생각한다.
이렇게 바꿔보자
차라리 '커리어 커뮤니티', '취미여가 커뮤니티'라고 카피를 적어주는 것이 훨씬 직관적이라고 생각한다. 그리고 소셜링과는 다르게 전문가들과 함께하는 커뮤니티 프로그램이기 때문에 이런 내용이 담긴 카피를 작성했다. 사용자는 '전문가 리더와 함께하는'이라는 카피를 보고 전문적인 지식과 취미활동을 기대하게 될 것이다. 그리고 '서울시 중소기업 재직자는 무료'라는 것을 강조해 사람들이 첫 문구에 무료라는 단어로 호기심을 자극할 수 있도록 했다. 또한 '직장 생활 ON&OFF 프로그램'이름을 가장 크게 쓰는 것보다, 무료가 창조된 CTA 위계를 키워 더 직관적으로 전달하고자 했다.
3단계 - 유도2 (소셜링)
문토 소셜링 (출처 - 문토 홈페이지) 메인 카피 - 취향이 통하는 친구와 원 데이 소셜링
서브 카피 - 좋아하는 경험을 함께하고 특별한 하루를 만들어요!
이렇게 바꿔보자
문토 소셜링 (출처 - 문토 홈페이지) 
개선 후
문토에서 유도하는 페이지 내에서 상단 오른쪽에 모두 보기, 전체 보기와 같은 통일되지 않은 단어들을 사용하고 있었다. 그래서 '000 모두 보기'로 카피 문구를 통일시켰다. 3단계 유도 페이지는 소셜링에 관한 정보를 담고 있기 때문에 '소셜링 모두 보기'로 카피를 변경했다. 그리고 현재 '취향이 통하는 친구와 원 데이 소셜링' 이런 메인 카피 부분에 마우스를 올리면 클릭 커서로 바뀌지 않고 있다. 클릭 커서로 바뀌지 않으면 페이지를 누르지 않고 그냥 지나칠 수 있어, 사용자가 이 부분을 누르면 자연스레 페이지가 이동한다는 것을 인지할 수 있도록 UX를 개선해야 한다. 그리고 하단에 '나와 취향이 통하는 친구 바로 만나기'라는 CTA 버튼을 부착해 바로 앱 다운 페이지로 이동할 수 있도록 개선했다. 배너에서 CTA와 이 페이지에서 CTA를 A/B 테스트를 통해 비교해 사람들이 어디서 더 유입이 많이 되는지 비교해 볼 수 있을 것이다.
4단계 - 유도3(VOD)
문토 VOD (출처 - 문토 홈페이지)메인 카피 - 일이 취향인 당신을 위해 준비했어요
서브 카피 - 언제 어디서나 인사이트가 필요한 순간, VOD로 플레이해요!
현재 문토의 VOD 썸네일이 색깔과 카피로만 구성되어 있다. 탈잉과 클래스 101과 비교해 보면 강사를 강조해 더 눈에 확 띄도록 구성되어 있다. 반면 기존 문토 썸네일은 보자마자 무엇을 말하는지 알 수가 없다. 강사가 나오는지 혹은 그냥 일과 관련된 자료만 정리되어 있는지조차 파악할 수 없고 VOD라는 단어를 보고 유추해야 한다. VOD 페이지로 들어가면. 강사와 함께 카피가 적힌 썸네일로 구성되어 있다. 이 부분을 랜딩 페이지로 노출시켜 사용자가 바로 인지하고 클릭해서 들어갈 수 있도록 유도해야 한다.
이렇게 바꿔보자
문토VOD 개선후그래서 기존에 페이지 안에 있던 강의를 랜딩 페이지에 노출시키고 올패스와 패키지 강의를 하단에 배치했다. 그리고 올패스 와 기존 다른 VOD를 확연하게 인지할 수 있도록 마크를 피드에 부착했다. 이렇게 두 종류의 강의를 노출시켰을 경우 사람들은 배경 색을 보고 어떤 종류의 강의들 인지도 한눈에 알아볼 수 있을 것이다.
5단계 - 설명(후기)
후기 (출처 - 문토 홈페이지)메인 카피 - 모임 참여하기를 망설이고 있다면?
서브 카피 - 모임에 참여한 문토 멤버들의 한마디를 들어보세요!
후기를 누르면 보이는 페이지 (출처 - 문토 홈페이지)'다 함께 글쓰계'를 누르면 현재 완료된 모임이 나타난다. 이러한 모임은 소셜링과 다른 종류의 모임이다. 이런 종류의 모임을 추가로 신청할 수 있는 부분도 랜딩 페이지에서 보이지 않고, 예측하건대 코로나로 인해 잠정적 중단으로 보인다. 그래서 이런 모임에 대한 후기는 현재로서는 사용자에게 혼선을 줄 여지가 있다.
이렇게 바꿔보자
후기 개선 후소셜링을 참여한 후 느꼈던 후기를 중점적 배치해야 한다. 또한 모임에서 소셜링으로 카피도 수정해, 사람들이 소셜링에 더 궁금하고 앱을 다운 받아보고 싶어 할 수 있도록 의심의 장벽을 낮추는 요소로서 작용되도록 개선했다. 그리고 '더 많은 후기 보기 버튼'을 추가해 모임 페이지로 이동하도록 개선했다.
6단계 - 설명(매거진)
이렇게 바꿔보자
이 매거진도 모임을 이끌었던 리더들에 대한 내용으로 구성된 매거진이다. 그렇기 때문에 과연 이런 내용이 현재 소셜링 참여를 유도하는 데에 어떤 긍정적인 효과를 미칠지 확실하지 않다. 소셜링에 더 집중적으로 사용자를 유입하고 싶다면 다른 내용의 콘텐츠로 변경해야 한다. 문토에서는 소셜링을 이용하고 후기를 남기는 앰배서더를 모집하고 있다. 그래서 이러한 앰배서더들의 후기를 담고, 인터뷰한 콘텐츠로 이 부분을 개선해야 한다. 소셜링이 궁금했던 사람들은 매거진을 보고 소셜링 참여 혹은 주최를 고려하게 되고, 최종적으로 CTA를 누를 수 있는 확률을 높일 수 있다. 또한 카피도 '문토 소셜링 앰배서더 이야기'로 수정하고, '이야기 전체 보기'로 수정해 개선했다.
7단계 - CTA (앱 다운로드)
이렇게 바꿔보자
앱 다운로드에서 4가지의 페이지가 각각 옆으로 넘겨야 표시가 된다. 자동으로 화면과 글자가 넘어가도록 수정되어야 한다. 한 페이지로 모아두는 것도 고려해 보았지만, 현재 문토 앱에 그림과 글씨가 너무 많이 있기 때문에 자칫하면 어지러워 보일 수 있다는 단점이 있다. 그리고 이 CTA 단계에서도 앞서 말했던 것과 같이 모임 후기 살펴보기에서 소셜링 후기 살펴보기로 바꿔야 한다.
8단계 - 유도4 (문토 정보, 소셜 미디어)
정보 (출처 - 문토 홈페이지)이렇게 바꿔보자
마지막으로 문토 정보와 소셜 미디어 정보가 작성되어 있다. 여기에서 문토 소개 부분을 클릭하면 처음에 설명한 3가지 모임 기준으로 작성되어 있다. 이 부분을 꼭 소셜링과 VOD에 관한 내용 혹은 현재 개편되고 있는 모임 방식에 대한 내용으로 수정해야 한다. 또한 완전히 종료된 모임의 종류인지, 재 정비 중인지 와 같은 현재 상황에 대한 안내도 필수적으로 작성해 사용자에게 혼선을 주지 않도록 해야 한다.
'문토' 랜딩페이지의 Before & After
좌 - 개선 전 / 우 - 개선 후'문토'의 랜딩 페이지에서 핵심은 무엇일까?
문토 이미리 대표는 “그간 학교, 지역, 직장을 중심으로 존재하던 커뮤니티가 빠르게 해체되고, 초개인 사회로 진입함에 따라 느슨한 연결을 기반으로 한 커뮤니티 서비스에 대한 니즈가 어느 때보다 높아졌다."라며 “문토는 이런 라이프스타일의 변화에 발맞춰 취향이 통하는 사람들과의 온·오프라인 경계 없는 연결을 통해 MZ 세대 관계 맺기의 새로운 이정표를 제시하겠다."라고 밝혔다.
platum - 관심사 기반 커뮤니티 서비스 ‘문토’, 20억 규모 프리 시리즈 A 투자 유치
지난번에 알아본 기존 문토가 운영하고 있던 모임은 직접 만나서 운영되는 대면 형태의 모임이었다. 하지만 현재 문토 앱에서 보이는 모임들은 소셜링(원데이) 중심으로 온 오프라인으로 사람들이 느슨하게 모이고 흩어질 수 있는 커뮤니티를 지향하고 있었다. 현재 20억 투자를 유치한 내용의 최근 문토 기사를 보면 앞으로 문토가 온 오프라인 커뮤니티 서비스로 발전해 나갈 것이라는 것을 더욱 확신할 수 있었다. 문토 앱을 중심으로 사람들이 자연스럽게 자체적으로 모임을 열고 만날 수 있는 '소셜링(원데이)'에 집중하기로 한 것이다. 그렇기 때문에 현재 '문토'의 랜딩 페이지 1순위는 소셜링에 참여할 수 있는 문토 앱 다운로드이다. 문토 랜딩 페이지 내에서는 소셜링 참여가 불가능하고 앱에서만 가능하기 때문에 문토 랜딩 페이지 내에서의 회원가입을 유도하는 것보다도, 우선 먼저 앱을 다운로드하고 앱 내에서 회원가입을 유도하는 것이 더 우선순위에 부합하다고 생각했다.
또한 추가적으로 앱을 다운로드하기 용이하도록 이번에는 모바일 랜딩 페이지를 기준으로 A/B 테스트를 진행하고자 한다.
문토 앱 다운로드 CTA 클릭률을 높이기 위해 랜딩 페이지 최 상단의 '메인 배너'를 이용하고자 한다. 기존 문토 첫 배너는 아무런 CTA가 없이 단지 이미지로만 사용되고 있어 비 효율적이라고 생각한다. 또한, 기존 문토 배너에서는 문토 앱에 대한 언급이 없다. 그리고 배너에서 앱 다운로드 CTA까지 위해서는 배너 첫 화면 - 두 번째 배너로 넘기기 - 세 번째 배너로 넘기기 - 배너 클릭 - 소셜링 피드 누르기 - 소셜링 참여하기 CTA 누르기 - 문토 앱 다운로드 CTA 누르기, 총 5번의 클릭 과정을 거쳐야 한다. 기존에 활용되지 못하고 있는 배너 첫 화면을 개선해 문토 앱 다운로드 CTA에 빨리 도달하도록 개선하고자 한다.
배너에서 앱 다운로드 CTA까지 가는 여정'문토' 랜딩 페이지 앱 다운로드 클릭률을 높이기 위한 A/B 테스트 설계하기
이번 A/B 테스트는 어떤 방식이 랜딩 페이지 내에서 앱 다운로드 CTA 클릭률을 높이는지 알아보기 위함이라는 가정하에 설계했다. 현재 랜딩 페이지 배너의 문제와 개선하고자 하는 랜딩 페이지의 전략을 세우고, A/B 테스트를 위해 각 항목들을 세팅했다.
A/B 테스트를 진행하기 위해 각 항목들을 진행할 세부 스케줄을 계획했다.
마지막으로 A/B 테스트를 위해 각 A 그룹(대조군), B 그룹(실험 군)에게 보여줄 랜딩 페이지 디자인을 확정했다.
좌 - A 그룹_대조군 (기존 모바일 랜딩 페이지) / 우 - B 그룹_실험군
첫 랜딩 페이지 이미지에서 문토에 앱이 있다는 사실을 바로 알아차릴 수 있도록 앱 화면 이미지를 사용했다. 그리고 나와 취향이 통하는 친구라는 카피와 함께 IOS와 Android CTA를 함께 배치했다. 또한 CTA가 모바일 환경에서 손에 잘 닿는 곳에 위치하도록 고려했다. 현재 배너가 모바일 환경에서 화면을 거의 가득 채우고 있기 때문에, 피츠의 법칙을 고려해 배너 최 하단에 CTA를 배치했다.
건축을 설계하다 서비스까지 설계하는 본 투 비 설계자의 PM도전 프로젝트
참고 자료
https://platum.kr/archives/168636
