모바일 및 웹 디자인 참조 라이브러리인 Mobbin은 요금제 팝업의 UI를 재구성해 전환율을 19% 증가시켰습니다. Mobbin이 문제를 식별하고 개선하는 과정이 비슷한 문제를 겪는 분들께 도움이 될 것 같아 공유합니다!
리서치: 사용자 경험 관찰
Mobbin은 사용성 조사 중 사용자가 불편을 느끼는 상호 작용을 발견했습니다. 문제는 무료 사용자가 유료 요금제의 콘텐츠를 선택해 팝업을 작동시켰을 때 발생했습니다. 팝업은 무료로 시작 또는 Pro 선택의 두 가지 선택 사항을 제공했습니다.
Pro(유료) 요금제를 선택한 사용자는 가격 페이지로 이동했지만 "무료 시작"을 선택한 사용자는 팝업이 사라지면서 웹사이트로 다시 이동했습니다. 저희는 과거에 유사한 팝업을 작업한 적이 있기 때문에 이를 사용자 경험을 개선하고 전환율을 높일 수 있는 기회로 보았습니다.
대조군(원본 페이지)
다음으로 팝업을 자세히 살펴봤습니다.
- 원본 페이지에선 두 개의 플랜은 비슷한 영역을 차지하고 있었습니다.
- Pro 상자는 유료 플랜의 네 가지 이점을 강조하고 있습니다.
- 모든 앱 둘러보기
- 플로우 둘러보기
- 무제한 검색 결과
- 무제한 컬렉션
사용자에게는 이 가입 프로세스가 유료 버전과의 첫 상호 작용이므로 이 기회를 최대한 활용하고 싶었습니다. 저희는 사용자가 Pro에 가입하지 않을 것이라고 가정하는 대신, 우리가 프로세스를 수정하면 사용자가 가입할 것이라고 가정해봤습니다.
실험군(테스트 할 페이지)
- "무료" 옵션을 제거하고 Pro 요금제에 집중했습니다.
- 가입 선택을 “프로 플랜을 결제하느냐, 건너뛰느냐”로 재구성
- 무료" 패널을 제거함으로써 Pro 요금제를 홍보할 수 있는 더 많은 공간 확보
- "건너뛰기 및 탐색 시작"은 CTA를 추가해 팝업을 지우는 방법을 알리고 사용자 경험을 개선했습니다.
- Pro 요금제의 UI를 개선했습니다.
- 혜택 중심의 광고 제목 추가: "무제한 액세스"
- 액세스의 의미를 정량화하기: "300,000+ 화면 및 프로 기능"
- 프로 기능에 대한 자세한 내용: 태그, 필터 및 검색 등
- CTA 수정: "Pro 선택하기"에서 "Pro 기능 탐색하기"으로 변경
결과: 전환 19% 증가
테스트 기간 동안 가격 책정 페이지(사용자가 Pro에 가입하는 페이지) 방문이 29% 증가하고 유료 구독이 19% 증가하는 것을 확인했습니다.
쿼터에서 더 많은 아티클을 확인할 수 있습니다
쿼터가 도움이 되었나요? 더 많은 아티클을 매일 쿼터 홈페이지에서 확인하실 수 있어요
*지금 확인하지 않은 아티클은 내일 없을 수도 있습니다 :(
“무슨 아티클이 있는 지 한 번 볼까?” 👉 남아있는 아티클 한 번에 볼래
“바로 내가 찾던 거야! 앞으로 계속 보고 싶은데?” 👉 올라올 아티클도 놓치지 않을래
방법이 궁금해요!
제가 진행했던 프로젝트의 방문율, 전환율 등을 보는 방법이 없어 어려움을 격고 있었어요.
모빈은 제가 애용하는 사이트인데 해당 사이트의 데이터가 올라와 반가운 마음이 컸고, 어떻게 데이터를 추출하신 건지 궁금했습니다 !
AB테스트는 내부적으로 따로 진행하신걸까요?
일반적으로 요런 ui개선건은 동일한 시기에 유저를 a/b로 나누어 테스트하거나 리소스가 부족한 경우에는 개선을 진행한 후 전기간과 비교하여 성과를 측정합니다.