본문 바로가기

Product Manager/프로덕트 분석

내가 "오늘수거" PM이라면 CTA 부터 개선할 거야 [코드스테이츠 PMB7기]

오늘 분석해볼 서비스 ㅡ "오늘수거"

 

수거했어, 오늘도

 

신박한 서비스 뭐 없을까? 고민하던 중에 디스콰이엇에서 발견한 서비스, 오늘수. 안 할 수도 없고 번거롭고 불편한 쓰레기 배출과 분리수거. 지구도 지키고, 나도 편한 방법이 없을까?

 

오늘수거가 이 문제를 해결합니다. "수거"로요.

 

오늘수거 서비스는 과감하고 창의적인 노력을 통해 복잡한 현대인의 삶을 윤택하게 만들고, 나아가 불투명하고, 비효율적인 폐기물 시장을 혁신하고자 해요. 말뿐인 환경이 아니라, 환경을 위해 할 수 있는 가장 효율적인 방법을 탐구하고, 바쁜 현대인의 삶에서 쓰레기에 대한 고민을 제거하고자 해요.
  오늘수거 웹사이트 발췌

현관문 앞 오늘수거 박스에 쓰레기를 담아 내놓으면, 끝. 출처: 오늘수거 이용자 후기 사진

 

이제까지 없던 혁신적인 서비스!
너무 혁신적인 나머지
고객이 이해하지 못하면...?

 

스타트업이 탄생하는 이유, 기존에 없던 새로운 문제 해결 방식으로 돈을 벌기 위해.

하지만 아무리 탁월한 기술력을 갖추고 있어도, 아무리 전망이 좋아도, 지금 당장 고객이 이해하지 못하는 서비스는 그저 좋은 아이디어에서 끝나고 하루아침에 사라져 버릴 수밖에 없다.

 

생소한 서비스도 친숙하게 느껴지도록 만드는 기적, 마이크로카피(UX writing)

최근 IT 업계에서는 마이크로카피의 중요성이 주목받고 있고, 지난 힙서비 3기, 4기 활동에서 나는 이 내용을 귀에 딱지가 앉도록 들었고, 다양한 서비스를 분석하는 과정에서 다양한 마이크로카피 사례를 분석했다. 그에 따라 그 중요성을 실감하고 있다. 솔직히 이만큼 힙하고 가성비가 좋은 전략은 없지 않나 싶다. 개발도 디자인도 필요 없이 당장 내일이라도 서비스에 적용해볼 수 있으니까.

 

오늘수거는 새롭다. 그래서 생소하다.

굳이 유사 서비스를 찾자면 홈케어 서비스, 파출부 고용 정도? 하지만 그곳에도 일반 가정의 쓰레기 배출을 대행해주는 곳은 흔한 경우가 아니었다. 무엇보다 비싸고, 알아보기 어렵고, 낯선 누군가가 우리 집에 온다는 것 자체가 허들이다.

 

게다가 고객은 자신들이 겪는 문제의 본질이 무엇인지 조차 알지 못한다.

오늘수거가 설득해야 하는 고객들의 대다수가 이런 상황이다. 그들은 그동안 분리배출은 당연히 불쾌하고 어려운 거라고 생각했다. 매번 배출일자에 맞춰서, 세척하고 분리해서.... 이 귀찮은 문제를 당연한 거라고, 어쩔 수 없는 거라고 생각하고 있었다. 겨우 박스 하나 내놓는 것으로 해결할 수 있으리라고 생각했을까?

 

오늘수거는 어떤 고객가치를 전달하는가? 이들이 오늘수거를 사용하면 어떤 이점이 있는가? 이 쓰레기들이 다 어떻게 처리가 되는지, 어떻게 분리수거가 되는지... 이게 다 뭔진 몰라도, 하나는 확실하다. 오늘수거를 이용하면 현관문 앞에 박스/봉투 하나 내놓는 것으로 전부 해결할 수 있다는 거. 내 마음도 몸도 편하게. 따라서, 오늘수거가 집중해야 하는 핵심은 바로 이것일 거다.

죄책감과 불편함 대신, 가벼운 마음과 편리함

 

 

돈도, 인적 리소스도 부족한 초기 스타트업의 승부수

오늘수거는 올해 5월에야 MVP 모델의 월평균 수거 수 1,000회를 달성한 초기 단계의 프로덕트다. 생존을 위해, 오늘수거는 고객에게 문제를 알리고 솔루션을 제안해야 한다. 따라서 오늘수거 PM과 팀원들이 선택한 전략은 바로 마이크로카피(UX writing). 앞서 소개한 "수거했어, 오늘도"가 그 결과물이다.

 

그래서 이번 포스팅에서는 오늘수거의 랜딩페이지를 분석해보기로 결심했다.

이들의 랜딩페이지의 장단점을 분석하고,

내가 오늘수거의 PM이라면 어떻게 랜딩페이지를 개선할지,

이를 검증하기 위한 A/B테스트 실험을 어떻게 설계할 수 있을지 다뤄보자. 

 

 


 

 

오늘수거 랜딩페이지 분석

 

스크롤하면서 넘어가는 UI 구성. 이미지의 내용은 각 단계별 설명과 일관되어있으며, 이미지 톤/무드 또한 감성적이고 쾌적하다.

 

오늘수거 메인 랜딩페이지는 총 5 단계로 나눠져 있으며 상하 스크롤을 통해 화면이 전환되는 방식으로 UI가 구성되어있다. 또한 전달하는 메시지가 무척 일관적이고 단순하다는 특징이 있다. 개인적으로 이런 단순한 구성이 서비스 자체의 편리함을 전달하는 접근 방식이라고도 생각했다.

 

1단계 이미지 - 메인카피 - CTA
2단계 이미지 - 메인카피 - 서브 카피(가격) - CTA
3단계 이미지 - 메인카피 - 서브 카피(가격) - CTA
4단계 이미지 -  메인카피 - 서브 카피(가격) - CTA
5단계 이미지 - 메인카피 - 서브 카피(CTA 설명) - CTA

<오늘수거 랜딩페이지 분석>

 

 

또한, 각 단계마다 CTA 버튼 "서비스 신청하기"가 삽입되어 있으며, 구체적인 서비스 이용 사례 + 가격 정보를 설명에서 제시하고 있다. 오늘수거는 1000원~2500원대라는 부담 없는 가격 정책을 어필, 고객들이 기존에 이용해본 적 없는 새로운 서비스인 점을 극복하고 '속는 셈 치고 한번 이용해볼까' 생각하여 서비스 신청으로 전환되도록 유도하고 있다.

 

배달 음식 쓰레기 1500원
일반 쓰레기 & 재활용 쓰레기 2500원
음식물 쓰레기 1000원

<랜딩페이지에서 제시된 가격 정보>

 

어떤 카피 문구를 포함하고 있는가?

1단계

대표 카피 : 무엇이든 / 문 앞에 두고 수거 요청하면 끝.

CTA 카피 : 서비스 신청하기

 

1단계

 

2단계

대표 카피 : 다 먹은 배달 음식 쓰레기도 봉투에 담아 / 수거 요청하면 끝. 

서브 카피 : 1500원

CTA 카피 : 서비스 신청하기

 

2단계

 

3단계

대표 카피 : 일반쓰레기와 재활용 쓰레기도 모두 한 곳에 담아 / 문 앞에 두고 수거 요청하면 끝. 

서브 카피 : 2500원

CTA 카피 : 서비스 신청하기

 

3단계

 

4단계

대표 카피 : 음식물 쓰레기도 종량제 봉투 안에 담아 / 문 앞에 두고 수거 요청하면 끝.

서브 카피 :  1000원

CTA 카피 : 서비스 신청하기

 

4단계

 

5단계

대표 카피 : 무엇이든, 문 앞에 두고 수거 요청하면 끝

서브 카피 1 : [쓰레기 종류]도 [봉투/모두 한 곳에/종량제 봉투/]에 담아 수거 요청하면 끝. [가격]

서브 카피 2 : 서비스를 신청하시려면 하단의 버튼을 누르세요

CTA 카피 : 서비스 신청하기

 

5단계

 


"오늘수거" 랜딩페이지 상단바 구성

"홈" 탭을 포함해 8가지 탭이 있다.

그중에서도 메인으로 설정된 탭은 "홈", "자유이용 1회" , "월정액 올인원 서비스", "솔직후기"이다.

 

 

각 탭의 화면은 다음과 같다.

(포스팅 작성 중에 "자유이용 1회"탭 명칭 변경(after: "1회 이용")이 있었던 것으로 보인다.

본 포스팅에서는 "자유이용 1회"로 명칭 통일하였음.)

메인 탭의 구성
그 외의 탭 구성

 

 


 

 

오늘수거 랜딩페이지에서 아쉬운 점들

내가 오늘수거 PM이라면
CTA 부터 개선할 거야

 

1. 식별하기 어려운 CTA 버튼 디자인

안 보여요...

랜딩페이지가 아무리 단순하다지만, CTA 버튼까지 미니멀하게 유지해버린 게 아쉬웠다. 다양한 색깔의 배경 이미지에 의해 가장 중요한 CTA 버튼이 묻히는 느낌이다.

 

 

2. 가독성을 해치는 장문의 서브 카피

 

정말 필요한 카피였을까? "서비스를 신청하시려면 하단의 버튼을 누르세요"

5단계에서 위 이미지 속 (노란색 박스로 표시해둔) 서브 카피로 CTA 버튼 클릭 시 전환되어 보일 화면에 대해 설명을 제시하고 있다. 하지만 이는 CTA 문구인 "서비스 신청하기"와도 그 내용이 중복되며, 긴 카피는 오히려 가독성을 해친다. 애초에 CTA 버튼이 잘 보이도록, CTA 문구를 보다 직관적으로 작성하면 이 서브 카피 자체가 필요하지 않을 것이다.

 

 

3. 서로 일치하지 않는 CTA 카피와 flow

CTA 카피는 클릭 시 경험하게 될 다음 단계에 대한 명확한 정보를 직관적으로 제공할 때 보다 많은 클릭수와 전환을 이끌어 낼 수 있다.

 

현재 랜딩페이지에서의 CTA 버튼은 총 다섯 개, 카피는 모두 "서비스 신청하기".

랜딩페이지를 둘러본 후 고객은 어떤 입장일까?

그래서 이 버튼을 누르면 어디로 가는데? 서비스를 어떻게 신청하는 건데?
그래서 이게 구독 서비스인 거야? 아님 일회성인 거야? 서비스 이용 과정은 어떤데? 봉투는 무슨 봉투인 건데?
이걸로는 정보가 충분하지 않은데... 벌써 신청을 하라고요?

게다가 CTA 버튼 클릭 시 이동하는 화면은 일반적인 서비스 신청 화면(고객 정보를 입력하고 서비스 이용을 신청하는 페이지)이 아닌, 오늘수거 카카오 채널 화면이다. 

분명 서비스 신청하기를 눌렀는데?

실제로 오늘 수거는 서비스 신청을 카카오 채널 챗봇을 통해서 받고 있다. 공식 웹사이트 > "자유이용 1회" 탭, 혹은 "월정액 올인원 패키지"탭 페이지 하단에서 "서비스 신청 방법"을 찾아볼 수 있었다.

 

"자유이용1회" 페이지 하단에서 "서비스 신청 방법" 발견할 수 있었다.

하지만, 이런 배경을 이해하지 못한 고객은 자신이 기대한 것과는 다른 화면에 당황할 수밖에 없다. 따라서 CTA 문구와 클릭 시 이동하는 페이지를 카카오 채널 페이지가 아닌, 수거 요청 관련 내용이 포함된 서비스 관련 상세 설명 페이지로 설정하면 이 문제를 해결할 수 있을 것이다.

 

 


내가 오늘수거 PM이라면
CTA 부터 개선할 거야

 

📌 메인 가설

"서비스 하기" CTA 버튼 클릭 시 '자유이용 1회' 서비스 페이지로 이동시키면, 서비스 신청률이 증가할 것이다.

 

📑 A/B 테스트 설계

고객 문제: 서비스 신청 전에 이용 방법 등 관련 정보를 랜딩페이지를 통해 빠르고 쉽게 파악하기 어렵다.
목표: 신규 유입 고객의 서비스 신청 수 증가시키기
대상: 웹사이트 신규 유입 1000명 (A: 500, B: 500)
기간: 2주
고객 가치 : 서비스 이용에 대한 충분한 정보 획득, 서비스에 대한 신뢰 형성
측정 지표 : CTA 버튼 & 퍼널 별 전환율, 신규 유입 고객의 서비스 신청 수

 

 

As is - To be를 통해 테스트하고 싶은 내용

CTA 버튼 클릭 후 flow

 

📌 가설-1

"홈"탭을 살펴본 유저는 서비스 신청에 앞서 서비스 관련 정보를 더 얻고자 할 것이다.
CTA 카피와 CTA 버튼 클릭 후 이동하는 화면이 일치할 때, 이탈률이 감소할 것이다.

CTA 문구를 "서비스 신청하기" ➡ "더 알아보기"로 변경하여 유저가 일관성 있는 경험을 하도록 돕는다.

 

📌 가설-2

상대적으로 낮은 가격인 "자유이용 1회" 페이지를 우선적으로 검토할 경우, 퍼널에서의 이탈률이 감소하고 서비스 신청 전환율이 높아질 것이다.

오늘수거의 "편리한 쓰레기 배출"은 기존에 없던 가치이므로 일단 써보고, 계속 머무를 수밖에 없도록 만들 수 있는 강점으로 작용할 수 있다. 반면, 사용해본 적 없는 새로운 유형의 서비스를 이용할 때, 처음부터 높은 가격대의 "올인원"을 제시한다면 이는 유저에게 부담으로 작용할 것이다. 또한, 랜딩 후 보게 되는 가격 정책 또한 "자유이용 1회"에 해당한다. 따라서 일관성을 유지, 고객에게 부담 없는 가격으로 새로운 유형의 서비스를 이용할 때 느끼는 부담감을 줄이고자 한다. 

 

우선은 신규 고객 유입 ➡ 자유이용 1회로 연결되도록 유도하기 위해,

CTA 버튼 클릭 ➡  "'자유이용 1회'에 대해 더 알아보기"로 flow를 구성한다.

 

 

 

Type B (after) ㅡ 개선 후 CTA 카피 및 flow


 

 

추가로 개선하고 싶은 것들

 

1. CTA 버튼 디자인과 카피 변경 : 하얀색 채우기 된 형태 & "더 알아보기"

 

먼저, 뒷배경 이미지를 비롯해 다른 요소들과 CTA 버튼이 분리되어 보일 수 있도록 디자인을 수정한다. 현재는 채우기 없이 테두리만 있는 상태인데, 하얀색 채우기가 된 형태로 변경하여 전환율 변화를 확인해보면 좋을 것 같다.

 

figma로 제작해본 예시 ㅡ BEFORE & AFTER, 색만 바꿔줘도 훨씬 잘 보인다.

위 이미지는 figma로 제작해본 예시 ㅡ BEFORE & AFTER인데, 확실히 색만 바꿔줘도 훨씬 잘 보이는 걸 확인할 수 있다. 실제 UX 디자인 영역에서도 "한 화면 내에 여러 가지 요소가 있을 때, 주요 버튼이 확실히 분별되도록 만드는 것이 중요"하다고 말한다.(링크)

 

또한, 기존에 해당 CTA 버튼에 연결된 링크는 "오늘수거 카카오 채널"이었다.

  • Type A (before) : "서비스 신청하기" 클릭 > "오늘수거 카카오 채널"

신규 유입된 고객에게는 정보가 충분하지 않을 수 있다. 탭을 일일이 클릭하여 확인하도록 유도하기에는 중간에 이탈할 확률이 더 높다. 보다 확실하게 전환될 수 있도록 돕기 위해서는 수거 요청 관련 내용이 포함된 서비스 관련 상세 설명 페이지를 해당 CTA 버튼과 연결하는 것이 적합하다. (flow 개선 관련 내용은 아래 번에서 다룬다.) 따라서 CTA 카피 또한 이를 반영한 "더 알아보기"로 수정하고자 한다. 

  • Type B (after) : "더 알아보기" 클릭 > "자유이용 1회" 탭

 

Type B (after)

 

2. 서브 카피 삭제 "서비스를 신청하시려면 하단의 버튼을 누르세요"

 

📌 가설

유저가 한 화면에서 읽어야 하는 카피가 적을수록 CTA 버튼 클릭률이 높아지고 전환율이 증가할 것이다.

 

flow 변경 시 해당 서브 카피는 불필요한 정보가 된다. 화면의 직관성을 높이고 유저가 cta 버튼 자체에 집중하도록 돕기 위해, 해당 카피를 삭제한다.

 

 

 


 

+) 추가로 실험을 진행한다면, 메인 페이지뿐만 아니라 

"자유이용 1회" 탭과 "월정액 올인원 패키지" 탭으로 이동했을 때, 최하단에 위치한 "서비스 신청하기" CTA 버튼을 화면 하단에 상시 보이는 토스트 형식으로 보이게 하는 것도 전환율 변동에 어떤 영향을 줄지 검증해보고 싶다. UX 디자인 원리에 따르면 이런 형태로 구성했을 때 버튼을 보다 빠르게 식별하기 쉽고, 자연히 전환율에도 긍정적인 영향을 줄 것으로 예상되기 때문이다.

출처: https://uxmovement.com/mobile/optimal-placement-for-mobile-call-to-action-buttons/

 

 

Optimal Placement for Mobile Call to Action Buttons

Did you know that where you place your buttons affects how fast users complete their task? Quicker task completion results in a more satisfying experience. If this is what you want, you have to place your buttons where users expect to find them. Here’s a

uxmovement.com

 

 

 

 


 

참고 자료

 

https://mediahub.seoul.go.kr/archives/2000154?tr_code=new01

 

알쏭달쏭 쓰레기 분리배출…올바른 방법은?

서울시대표소통포털 - 내 손안에 서울

mediahub.seoul.go.kr

 

https://www.notion.so/54546ee5d74148f9835395a4a005c73a

 

오늘수거 소개

오늘수거 서비스는 과감하고 창의적인 노력을 통해 복잡한 현대인의 삶을 윤택하게 만들고, 나아가 불투명하고, 비효율적인 폐기물 시장을 혁신하고자 해요. 말뿐인 환경이 아니라, 환경을 위

www.notion.so

 

https://uxmovement.com/mobile/optimal-placement-for-mobile-call-to-action-buttons/

 

Optimal Placement for Mobile Call to Action Buttons

Did you know that where you place your buttons affects how fast users complete their task? Quicker task completion results in a more satisfying experience. If this is what you want, you have to place your buttons where users expect to find them. Here’s a

uxmovement.com