[코드스테이츠 PMB 10기] 랜딩 페이지 A/B 테스트 (1)
삼쩜삼과 그리팅의 랜딩 페이지는
전혀 다르게 기획되었다
취업 준비를 하면서 이따금 마주하게 되는 채용사이트가 있다. 위 사진의 패스트파이브 이외에도 꽤 많은 기업들이 서로 비슷한 UX/UI의 채용사이트로 인재 영입을 하고 있는 것을 발견했다. 대기업·중견기업보다는 통합 HR솔루션 구축이 어려운 스타트업에서 사용하는 서비스인 듯했다.
위와 같이 만들어진 채용사이트는 매끄러운 유저 플로우 + 유용한 채용관리 기능을 제공하여 취업 과정 중 나에게좋은 UX 경험을 선사했다. 취준생 입장에서도 완성도 높다고 느끼는 서비스인데, 주고객인 기업은 얼마나 만족하고 있을지 궁금했고, 또 어떤 서비스인지도 알아보고 싶었다. 그리고 채용사이트의 최하단에서 다음과 같은 로고를 발견할 수 있었다.
그리팅은 기업용 채용관리 솔루션(B2B)이다. 경력직 수시채용이 늘어나며 인재 채용을 위해 필요한 업무량과 시간이 증가한 최근의 채용 트렌드에 발맞춰 웹 기반의 SaaS 솔루션을 구축했고, 다수의 채용 플랫폼을 통해 지원한 이력서를 한 번에 열람하고 관리할 수 있도록 했다. 기업은 그리팅을 통해 각 지원자별 평가, 일정 조율, 합격 유무 통보를 그리팅으로 확인할 수 있다.
그리팅을 사용하면 인재 채용 담당자와 경영진들은 복잡한 커뮤니케이션 과정을 대폭 절감할 수 있다. 2022년 현재 1300개 기업이 그리팅을 이용 중이며, 그리팅을 통한 입사 지원자 수는 일주일 평균 2700여명에 달한다. 그리팅의 고객사 알토스벤처스의 박희은 파트너는 "고객의 목소리에 집중하면서 필요한 기능을 빠르게 업데이트하고, 고객반응을 체크하며 개선한다."라는 후기를 남겼다. 그래서 이번에 학습한 A/B 테스트의 주제에 걸맞은 서비스라는 생각이 들었다.
A/B 테스트란 결국 고객에게 긍정적인 UX를 제공할 수 있는지를 지속적인 시험을 통해 정량적으로 평가할 수 있는 테스트 기법이기 때문이다. 사전에 정의한 지표와 관련된 여러 가지 버전의 기능이나 페이지를 평가하는데, 이때 두 그룹의 사용자들에게 서로 다른 페이지나 기능을 보여준 뒤 어떤 그룹에서 더 좋은 성과가 나타나는지 확인한다.
위 설문조사 통계는 A/B 테스트에 대한 의미 있는 인사이트를 담고 있다. 왼쪽은 '당신의 기업에서 얼마나 자주 A/B 테스트를 진행하나요?'를, 오른쪽은 'A/B 테스트가 실제로 반영되는 비율은 얼마나 되나요?'를 주제로 하는 통계이다.
전자의 경우 응답자의 45%는 회사가 3개월에 한 번씩 새로운 A/B 테스트를 시작한다고 답했고, 40%는 매주 또는 한 달에 한 번 시작한다고 답했다. 또, 후자의 경우 응답자의 38% 는 A/B 테스트 실험의 10% 미만이 실제로 실행된다고 답했다. 결론적으로 응답자 12명 중 6 명은 A/B 테스트 결과를 기반으로 제품 결정을 내리는 것이 매우 어렵다고 말했다. 대부분의 A/B 테스트 결과가 서비스에 결정적인 역할을 하지 못했거나, 말그대로 실패했기 때문이다.
이러한 설문조사를 결과를 감안하면 A/B 테스트는 국내외 다양한 기업에서 폭넓게 쓰이는 테스트 기법이지만, 이를 제대로 수행하기란 무척 어렵게 느껴진다. 어떻게 하면 A/B 테스트를 효과적으로 진행할 수 있을까? 수많은 방법론과 꿀팁(!)들이 있겠지만, 오늘 학습한 내용을 토대로 한 줄 요약을 해보자면, 훌륭한 PM은 A/B 테스트 진행 시 다음과 같은 작업을 '제대로' 수행해야 한다.
표본과 지표 정하기
결과 해석하기
위와 같은 작업을 거친 끝에, 고객의 문제 해결을 위해 지속적이고 긍정적인 가치를 창출한다면 효과적인 A/B 테스트라고 볼 수 있다. A/B 테스트와 관한 내용은 다음 포스팅에서 더 자세하게 다룰 예정이므로, 오늘은 간단히 소개만 하고 넘어가려고 한다.
* 위 링크에서 그리팅의 랜딩 페이지를 확인할 수 있습니다.
** 그리팅 랜딩 페이지에 대한 저의 개선점을 먼저 읽어보고 싶으신 분은 바로 3번으로 넘어가셔도 무방합니다!
메인 카피: 반복적인 채용업무, 그리팅에서 쉽고 간편하게
CTA 카피: 도입문의 / 무료로 시작하기
메인 카피: 이미 수많은 기업들이 그리팅과 함께 채용업무의 변화를 이끌고 있습니다.
메인 카피: 다양한 플랫폼에서 쏟아지는 지원자 정보, 이제 한눈에 조회하고 한곳에서 관리하세요.
메인 카피: 지원자 관리, 모집부터 등록까지 가뿐하게
서브 카피: 그리팅 공고 링크를 다양한 채용 플랫폼에 올려보세요. 지원서를 하나의 통합된 형식으로 받는 것은 물론, 지원자 정보를 자동으로 한곳에 모아 볼 수 있습니다.
메인 카피: 우리 회사만의 채용 절차를 만들고, 지원자의 채용 단계를 관리하세요
서브 카피: 지원자 칸반보드. 다양한 포지션에 알맞은 채용 단계를 만들고 다음 단계로 통과시킬 지원자를 선택하세요. 공고 안에서 이뤄지는 모든 채용절차를 한눈에 볼 수 있습니다.
메인 카피: 인사팀과 실무진의 환상적인 콜라보레이션
서브 카피: 인사팀이 아니더라도, 이메일 초대로 간편하게 / 민감한 정보는 권한설정으로 안전하게. / 타 부서 동료들에게 보여주기 곤란한 정보는 잠금처리로 감출 수 있어요.
메인 카피: 한눈에 확인하는 이력서 손쉬운 협업 평가
서브 카피: 이력서 미리보기. PDF, JPEG, PNG, HWP 등 다양한 형식의 파일들을 다운로드하지 않고도 즉시 확인할 수 있어요. / 협업평가. 채용단계별 평가 내용을 빠르게 등록해 팀원들과 공유하세요.
마이크로 카피: 포트폴리오가 독보적으로 눈에 띄는 분이네요. (…) / 괜찮은 이력을 가지신 분이라 여겨집니다. (…) / …
메인 카피: 반복되는 이메일 쓰기, 템플릿과 변수단어로 해결
서브 카피: 그리팅 이메일. 자주 사용되는 내용의 이메일을 템플릿으로 재활용하고 변수단어 생성 기능으로 여러 지원자와 효율적으로 소통하세요.
메인 카피: 여러 지원자와 한 번에 잡는 면접 일정
서브 카피: 면접일정 테이블. 면접이 가능한 시간대를 설정하여 지원자에게 이메일로 전달하세요. 지원자는 원하는 시간을 선택하여 일정을 확정지을 수 있습니다.
마이크로 카피: 구글 캘린더에 등록
메인 카피: 그리팅으로 전향해야 할 보다 많은 이유.
서브 카피: 채용페이지 만들기 / 공고 대시보드 / 인재풀 / 슬랙알림 / 보안강화 / 파일 저장소 / 팀원 멘션 / 지원경로 추적 / Greepick
마이크로 카피: 손쉬운 웹페이지 빌더를 (…) / 채용단계별 지원자 현황과 (…) / 포지션과 상관없이 (…) / …
메인 카피: 아직도 망설여지시나요?
서브 카피: 그리팅은 1개월간 무료로 모든 기능을 사용해보실 수 있습니다. 부담가지지 마시고 마음껏 이용해 보세요!
CTA 카피: 무료로 시작하기
이렇게 무려 13단계(...)로 그리팅 랜딩 페이지를 분석했다. 사실 분석이라기에는 나열에 가깝다는 걸 알고 있지만, 워낙 많은 단계로 구성되어 있다 보니 일일이 분석하다가는 데일리가 아닌 위클리 과제가 될 것 같았기에(ㅠㅠ) 다음 포스팅으로 넘기기로 했다.
그런데 다른 서비스들의 랜딩 페이지와 비교해보았을 때, 그리팅의 랜딩 페이지는 유독 여러 가지 내용을 담고 있었다. 위 사진의 세금 환급 서비스 삼쩜삼은 5단계, 줄서기 서비스 테이블링은 1단계의 랜딩 페이지를 제공한다. 그 이유가 무엇일지 궁금해져서, 그리팅이라는 서비스의 특징과 연결하여 생각해봤다.
간단한 랜딩 페이지를 제공하는 삼쩜삼과 테이블링은 공통적으로 모두 회원가입 단계를 생략하고도 이용 가능한 간편 서비스라는 공통점을 갖는다. 반면, 그리팅은 개인이 아닌 기업 고객을 대상으로 한 B2B 서비스로, 회원 가입과 결제가 필수적인 서비스이다.
좋은 랜딩 페이지란 서비스의 이익 창출에 도움이 되는 이벤트를 수행하도록 유도할 수 있어야 한다. 그리팅의 경우, 이 이벤트란 유료 플랜 가입일 것이다. 따라서 그리팅의 랜딩 페이지가 전환율(Retention)을 끌어올리기 위해서는 랜딩 페이지에 유입된 고객이 유료 플랜 가입을 고려할 수 있도록 결제 시 제공되는 혜택에 대한 자세한 설명을 제공해야 할 필요가 있었을 것이다.
그리팅의 랜딩 페이지를 살펴보면서, UX 라이팅을 매우 세심하게 작성했다고 느꼈다. 위에서 언급한 대로 제공해야 하는 정보량이 막대한 데다가, 각각의 기능을 명확하게 설명해야 하는 상황에서 좋은 UX 라이팅의 조건(명확함/간결함/유용함/일관성)을 대부분 만족하고 있었다. 디자인적 측면에서는 글자 크기/굵기/색상/이미지 등을 적극적으로 활용하여 가독성을 높였다.
* 좋은 UX 라이팅의 조건에 대한 설명은 위 포스팅을 참고해주세요.
그래서 '그리팅의 좋은 UX 라이팅이 더 돋보일 수 있는 방법이 없을까?' 고민하던 중, GIF 이미지라는 아이디어가 떠올랐다. 독서 플랫폼 밀리의 서재는 위와 같이 수많은 책들이 좌우로 이동하는 GIF 이미지를 활용하여 '당신을 기다리는 100,000권의 도서'라는 메인 카피의 메시지를 효과적으로 부각했다. 또한, 커리어 플랫폼 서핏은 최근 새롭게 선보인 커리어 관리 기능에서 다양한 템플릿과 콘텐츠를 제공받을 수 있음을 GIF 이미지를 통해 알리고 있다.
고민 끝에 [기능] 설명 : 3단계를 개선하기로 했다. 해당 단계는 별다른 이미지 없이 메인 카피와 배경색으로만 간결하게 구성되어 있다. 랜딩 페이지의 다른 부분에서 수많은 정보들을 꽉꽉 눌러 담았기에, 이 부분까지 화려하게 만들었다면 고객의 피로도가 상승했을지도 모른다.
그러나 나는 다양한 플랫폼에서 '쏟아진다'는 서술어를 강조하여 '그리팅 하나로 이 수많은 채용 플랫폼들을 커버할 수 있다니!'라는 아하 모먼트(Aha Moment)*를 돋보이게 하고 싶었다. 그래서 위와 같이 리디자인을 시도했다.
* 신규 유저가 제품에서 처음으로 가치를 느낀 순간. 특정 액션이 '아하 모먼트'가 되기 위해서는 대다수 유저의 전환점(tipping point)를 대표할 수 있어야 한다. 출처: https://brunch.co.kr/@lulina724/25
먼저, 인재 채용에 관심이 있는 그리팅의 잠재 고객이라면 사용하고 있거나 익숙하게 느낄 채용 플랫폼들의 로고 이미지를 다운받았다. 이후 Adobe Photoshop으로 테두리를 둥글게 만드는 과정을 거쳐 로고 이미지의 형태를 통일했다. 최종적으로 다양한 채용 플랫폼의 로고가 위에서 아래로 쏟아지는 모습을 표현하기 위하여 Adobe Premier 키프레임을 활용했다.
이밖에 [채용 단계] 설명 : 5단계의 이미지도 GIF 이미지로 바꾸었으면 좋겠다는 생각을 했다. 현재는 마우스 커서, 그림자 및 테두리, 기울기 등의 요소로 작동 방식을 나타내고 있는데, GIF 이미지를 통해 잠재 고객에게 '지원자 칸반보드'라는 낯선 기능을 효과적으로 소개할 수 있을 듯하다.
마지막으로 [리뷰] : 11단계를 개선하려 한다. 그리팅 랜딩 페이지가 고객 리뷰를 보여주는 방식에서는 약간의 어색함을 느꼈다. 버튼을 누르기 전까지는 단 한 개의 리뷰만을 볼 수 없기 때문이다.
그리팅은 유료 가입이 필수적인 서비스인 만큼 잠재 고객이 리뷰를 열람하고자 하는 니즈 역시 강할 거라 예상된다. 그런 만큼 랜딩 페이지에서 한 눈에 수많은 리뷰들을 열람할 수 있거나, 또는 수많은 리뷰를 보유하고 있음을 알리는 UI가 필요하다고 생각했다.
위와 같은 개선점의 사례로 온라인 클래스 플랫폼 베어유를 꼽았다. 베어유는 랜딩 페이지에서 수강 후기를 탐색하고 결제(=전환)를 결정하려는 고객들의 특성을 반영하여 위와 같이 리뷰 영역을 구성했다. 좌우 버튼을 선택하면 리뷰를 넘겨볼 수 있다는 점을 그리팅과 같다.
그러나 베어유의 경우, 버튼을 누르지 않은 상태에서도 카드가 오른쪽→왼쪽 방향으로 움직인다. 이러한 랜딩 페이지를 통해 고객은 한 눈에 수많은 리뷰들을 열람할 수 있고, 베어유가 수많은 리뷰를 보유하고 있다고 인식할 수 있다. 그리팅 또한 이러한 개선점을 반영하여 지금의 심심한 리뷰 영역을 보다 다채롭게 꾸며주었으면 하는 바람이다. 그리고 나는 그리팅을 통해 원하는 기업에 입사하고 싶다는 바람 역시 갖고 있다! ผ(•̀_•́ผ)
참고자료