내가 로켓펀치 PM이라면 랜딩페이지 이렇게 개선할거야
[코드스테이츠 PMB 11기] A/B테스트(1)-랜딩페이지 분석하기
위 글에서 로켓펀치 개선하고 싶은 점 더 보이는데... 다음에 기회가 된다면 다시 다루겠다!라고 글을 마무리지었었다. 그리고 그 다시 다룰 기회가! 바로 찾아왔다.(후후) 이번엔 로켓펀치의 랜딩 페이지를 분석하고, 그 분석을 기반으로 A/B 테스트까지 구성해보고자 한다!
1. 랜딩 페이지(Landing Page)란?
먼저 랜딩(Landing)의 사전적 의미는 '착륙'이다. 땅에 발을 딛는 것이다. 그 말을 인터넷 페이지에 적용하면 사용자가 처음 발을 내딛는 페이지라고 할 수 있다. 정확한 의미는 홈페이지 방문, 키워드 검색 혹은 배너 광고 등으로 유입된 인터넷 이용자가 최초로 보는 페이지를 말한다. 랜딩 페이지는 불필요하거나 혼란을 주는 내용을 최대한 피하고, 방문자가 방문 목적을 쉽고 빠르게 달성할 수 있도록 안내하는 것이 중요한데, 제작자 또는 디자이너가 랜딩 페이지를 어떤 형태 또는 방식으로 디자인하느냐에 따라 방문자의 적극적인 참여 또는 행동을 유발할 수 있다.
나는 일단 로켓펀치의 랜딩 페이지로 구글에 로켓펀치를 검색했을 때 바로 위에 뜨는 홈페이지를 랜딩페이지로 설정했다.
로켓펀치 웹 랜딩 페이지 구조
CTA 1(회원가입) → CTA 2(프로필 등록/기업 등록) → 홈페이지 설명 → CTA 3(개인 프로필 등록) → CTA 4(기업 등록) → CTA 5(회원가입)
여기서 CTA(Call To Action) 란 웹 사이트 내 목표를 달성하기 위해 고객에게 '행동'을 유도하는 버튼이나 배너를 말한다. 한국어로는 행동 유도 버튼, 목표 달성 버튼이라고 해석하기도 한다. 각각의 CTA 옆에 괄호로 그 버튼의 목표에 대해서 정리했다.
2. '로켓펀치'의 랜딩페이지와 개선안
로켓펀치 랜딩 페이지 바로가기: https://www.rocketpunch.com/
사실 랜딩페이지가 2번, 개선안이 3번 구성이어야 한다. 그런데 한 번호에서 함께하는 이유는 로켓펀치의 랜딩 페이지는 총 6단계로 그렇게 길지 않다. 그리고 각 단계마다 작게라도 개선할 점이 내 눈에는 계속 보여서 그냥 넘어갈 수가 없어서... 내 욕심이지만 전체 랜딩페이지를 다뤄보고자 한다.
1단계 : CTA (회원가입)
현재 '로켓펀치' 랜딩 페이지
대표 카피: 일로 연결되는 사람들, 로켓펀치
마이크로 카피: 이미 회원이신가요?, 업무와 연관된 다양한 사람들을 만날 수 있는 APP을 다운받아보세요.
CTA: 구글로 회원가입, 페이스북으로 회원가입, 휴대전화로 회원가입, 이메일로 회원가입, 로켓펀치 APP
내가 '로켓펀치' PM이라면?
1. 대표 이미지 변경
일단 왼쪽의 이미지는 왜 저 이미지가 있는지 제일 궁금하다. 일로 연결되는 사람들이라는 대표 카피와도 딱히 어울리지 않고, 그렇다고 홈페이지 모습을 직관적으로 알려주는 이미지도 아니어서 내가 지금 로켓펀치에 온 게 맞나?라는 생각이 먼저 드는 이미지 같다. 그래서 일단 이미지는 100% 맘에 드는 이미지는 아니지만, 로켓펀치를 직관적으로 보여주는 이미지를 가져왔다. 참고로 이건 로켓펀치 앱 다운 랜딩페이지에 있었다...(개인적으로 앱 랜딩 페이지가 더 직관적이고 깔끔하다고 느꼈다.)
2. 직관적인 회원가입
우측의 회원가입은 내가 직접 만든 것은 아니고, 위의 페이지에서 이메일로 가입하기 or 휴대전화로 가입하기를 누르면 나오는 창인데 바로 빈 곳을 채우면 회원가입이 된다는 느낌이 들어서 이렇게 변경하는 것이 어떨까?라는 생각으로 바꿨는데 이건 뇌피셜+ 커리어리의 랜딩페이지를 참고했다.
3. 전체적으로 깔끔하게 정리(데이터 근거X)
이미 회원이신가요? 로그인 부분은 원래 대표 카피 바로 아래에 있어서, 그대로 쭉 연결되어서 읽혀 정신이 없다는 느낌을 받았다. 그래서 가장 아래로 뺐는데, 만약 이 페이지에서 저 로그인 버튼을 눌러서 로그인을 하는 사람이 많다는 데이터가 나온다면, 더 크게 아예 버튼 형식으로 만드는 식으로 가면 좋을 것 같은데 나는 데이터가 없으니... 그냥 보기 좋은 떡을 만들었다! 그리고 원래 맨 아래에는 앱 다운로드 CTA가 있었는데, 이것 또한 굳이 로켓펀치는 웹사이트가 있는데 지금 신규로 유입되어 온 사람을 회원가입시키는 것이 앱을 알려주는 것보다 중요하지 않을까?라고 생각하고 차라리 여기보다 다른 곳에 있으면 좋겠다는 생각으로 빼버렸다. 그런데 이것도 만약 저 위치에 앱 다운로드 CTA가 아주 사람들을 많이 끌어들인다는 데이터가 있다면 나처럼 하면 안 될 것이다...^^
2단계 : CTA (프로필 등록/기업 등록)
현재 '로켓펀치' 랜딩 페이지
대표 카피: 로켓펀치에 있는 사람들과 연결해보세요.
마이크로 카피: 다양한 분야의 사람들과 기업들이 교류하고 있는 로켓펀치 커뮤니티에 합류하세요!
CTA: 내 프로필 등록, 내 기업 등록
내가 '로켓펀치' PM이라면?
1. 과한 정보, 정보가 중간에 끊김 방지
원래의 로켓펀치는 너무 정보가 많이 있다는 느낌이 들었다. 사람들이 이런 커뮤니티를 선택할 때 어떤 기준으로 선택하는지는 자세하게 모르지만, 나 같은 경우에는 얼마나 좋은 회사에서 어떤 일을 사람들이 여기서 활동하고 있나? 를 먼저 생각하게 되어서 중요한 부분을 직무와 기업이라고 생각해서 이름/직무/회사 정보만 들어가도록 했다. 기업의 설명이나, 개인의 세부적인 프로필 모두 각자가 직접 기입해둔 것을 그대로 가져온 것인지는 모르겠지만, 전체적으로 통일성도 없고, 데이터가 너무 과하게 들어갔다고 생각해서 빼버렸다.
2. 직관적인 CTA 버튼
나는 처음에 이 화면에 CTA 버튼이 있는지도 몰랐다. 너무 프로필들 사이에 내 프로필 등록, 내 기업 등록이 녹아들어있었기 때문이다. 그래서 직관적으로 버튼을 만들어 주고, 그 위에 설명을 간단하게 적어줬다. 나는... UX Writing을 한 번도 해본 적도 없고, 배워 본 적도 없어서 내용적인 측면은 부실하다는 점 미리 양해 말씀을 드린다...
3단계 : 홈페이지 설명
현재 '로켓펀치' 랜딩 페이지
대표 카피: 연결된 사람들의 소식과 추천 콘텐츠를 실시간으로 받아 보세요.
내가 '로켓펀치' PM이라면?
1. 전체 내용 정렬 정리
전체적인 로켓펀치 랜딩 페이지에서 아쉬웠던 점이다. 앞으로도 계속 나올 거긴 한데 글의 자간, 크기, 줄 바꿈을 크게 신경 쓰지 않았다는 느낌을 많이 받았다. 사람들은 글을 읽을 때 보통 단어 단위 아니면 어절 단위로 읽는다. 그래서 어떻게 줄 바꿈을 구성하느냐에 따라 한눈에 들어오는지 안 들어오는지가 판가름 난다고 생각한다. 그래서 정렬을 신경 써서 정리했다.
2. 제목과 설명의 대응
대표 카피에서는 소식과 콘텐츠를 받는 것에 대해 이야기하고 있는데, 내용에 마지막 부분에서 흥미로운 사람이 있으면 연결을 할 수도 있다고 하고 있다. 연결이 로켓펀치의 차별화 요소인 것은 알고 있지만, 이 단계에서는 굳이 강조할 필요가 없는 부분이라고 생각해서 삭제했다.
4단계 : CTA (개인 프로필 등록)
현재 '로켓펀치' 랜딩 페이지
대표 카피: 사람들과 연결하고 생각을 공유하세요.
마이크로 카피: 나와 연결된 사람과 내가 팔로우하는 기업이 올린 게시물을 피드에서 받아보세요.
CTA: 내 프로필 만들기
내가 '로켓펀치' PM이라면?
1. 직관적인 CTA버튼
이번에도 CTA가 버튼이 아닌 글로만 적혀있어서 강조하기 위해 버튼 형식으로 변경했다.
2. 설명의 분리와 정리
원래 로켓펀치의 양쪽 내용을 보면 내 글, 소식, 질문이라는 말이 계속 반복되고 있음을 볼 수 있다. 왼쪽은 프로필에 올려서 연결을 강조, 오른쪽은 전문성을 강조한다고 생각했다. 그래서 나의 생각/궁금한 것을 묶어서 프로필 영역에, 내 소식과 나의 글을 묶어서 전문성 영역으로 나누어 정리했다.
5단계 : CTA (기업 등록)
현재 '로켓펀치' 랜딩 페이지
대표 카피: 로켓펀치는 기업과 개인의 소통 채널입니다.
마이크로 카피: 내가 관심 있는 기업들을 팔로우하고 그 기업들의 뉴스, 채용 정보 그리고 투자 정보를 피드에서 발견해 보세요.
CTA: 기업 프로필 만들기
내가 '로켓펀치' PM이라면?
1. 내용의 정렬
이건 객관적인 데이터가 있는지? 잘 모르겠는데, 첫째줄 보다 두 번째 줄의 길이가 더 길이가 길어야 안정감 있어 보인다 생각해서 줄 바꿈을 변경했다. 그리고 마찬가지로 내용 부분에서도 줄 바꿈을 수정했다.
2. 직관적인 CTA버튼
그냥 워딩만 있었던 기업 등록하기도 버튼으로 만들었다.
6단계 : CTA (회원가입)
현재 '로켓펀치' 랜딩 페이지
대표 카피: 지금 로켓펀치 바로 가입하기
CTA: 무료 가입
내가 '로켓펀치' PM이라면?
1. 시작을 유도하는 UX Writing
지금 로켓펀치 바로 가입하기보단 로켓펀치에서 강조하는 '연결'을 사용하여 카피를 바꾸고, 그 카피와 연결되는 CTA도 카피를 '시작하기'로 바꿔보았다.
3. 과제를 마치며 아쉬운 점
과제를 다 마치니 가장 먼저 들었던 생각은 내가 봐도 아쉬운 점이 많아 보이는 랜딩페이지인데 왜 로켓펀치는 수정을 안 했을까?이다. 그냥 단순하게 생각하면 이 랜딩페이지를 통해서 유입되는 인원이 그렇게 많지 않기 때문일까?라는 생각이 들긴 하는데 내가 그 데이터는 모르니 아쉬울 따름이다... 내가 개선안이라고 내놓긴 했지만 나의 능력 부족으로 더 개선하고 싶은데 못하는 부분들이 있어서 더 아쉽다. 특히 이미지 같은 경우 각각의 단계를 잘 나타내 주지 못한다는 생각이 들었는데, 도저히 어떤 이미지를 써야 잘 나타내 줄지를 잘 모르겠어서 이미지를 크게 손대지 못했다! 그리고 아무런 데이터 없이 완전 내 뇌피셜로 개선안을 낸 것에 더하여 UX Writing 영역은 내가 경험이 없어서 정말 누구한테 보여주기 부끄러운 개선안들을 만들어 낸 것 같다.(하하) 내일은 이 여러 개선안 중 1가지를 정하여 A/B 테스트까지 구성하려한다. 투비컨티뉴...
