[W5D4] KREAM의 A/B 테스트 설계하기 (2) - 코드스테이츠 PMB 11기

 

[W5D3] KREAM의 A/B 테스트 설계하기 (1) - 코드스테이츠 PMB 11기

저번 글에서 크림의 랜딩페이지를 분석해보았습니다.

분석을 통해 제가 생각한 크림의 개선 부분은 총 3가지입니다.

 

[1] 공유 버튼

카카오페이 결제를 유도하는 할인 프로모션을 터치 시 볼 수 있는 프로모션 설명 페이지에서

'친구에게 링크 공유하기' 버튼은 유의사항을 지나 맨 하단에 위치하였습니다.

많은 사용자가 해당 링크를 공유할수록 홍보가 되지만

많은 사용자가 프로모션 콘텐츠를 지나~ 유의사항을 지나~ 링크 공유까지

스크롤을 내리지 않을 것이라고 생각이 되었기 때문에

저는 공유하기 버튼을 상단에 위치하는 방향으로 개선하고 싶다는 생각을 했습니다.

 

 

[2] '크림을 소개합니다' 콘텐츠 순서

크림을 소개하는 해당 콘텐츠는

크림에 익숙하지 않은 초기 사용자 혹은 가입도 하지 않은 예비 사용자를 타겟팅한 것입니다.

과제 작성을 위해 분석할 때 기준으로
(어제까지만해도 카카오페이 할인이었는데 오늘은 롯데카드로 바뀌었네욥..!)

크림의 캐러셀의 첫번째 콘텐츠는 '카카오페이 5%할인 프로모션'이었으며

'크림 소개' 콘텐츠는 7번째 페이지에 위치하였습니다.

'결제 유도'라는 행동은 크림 가입자를 타겟팅한 것이기 때문에

저는 예비 사용자를 타겟팅한 '크림 소개' 콘텐츠가

캐러셀에서 첫번째로 위치하여야 한다고 생각했습니다.

 

 

[3] 통일된 디자인? 다른 디자인?

 

이건 사실 개선점이라기보다는 개인적인 궁금함에 가까운 것인데

위의 3가지 콘텐츠는 모두 사용자로 하여금 SHOP으로 이동하기 위한 것입니다.

이때 이 셋의 콘텐츠 디자인을 위와 같이 통일하는 것과

모두 다르게 디자인하는 것 중 어떤 것이 SHOP의 유입률을 더 높일 수 있을지 궁금했습니다.

 

 

 

As is - To be를 통해
테스트하고 싶은 내용에 대해 이야기해주세요.

 

앞서 언급한 개선점 중 세번째에 언급한 '통일된 디자인? 다른 디자인?'이 제일 궁금하기는 하지만

여기서 '다른 디자인'이라는 것이 단순히 A/B 테스트로 분석하기에는

너무 모호한 지점이 많다고 생각했습니다.

따라서 저는 첫번째로 언급한 공유버튼 위치에 대한 테스트를 진행하고 싶습니다.

 

As is - To be를 정리하면 다음과 같습니다.

첫번째는 공유버튼의 위치를 이동시키자는 것이며

두번째는 버튼 터치시 단순히 url 복사만 가능케하는 것이 아니라

공유 팝업이 뜨도록 하는 것입니다. (아래 이미지 참고)

 

 

해당 테스트를 통해 제가 세운 가설은

공유 버튼의 위치를 상단으로 이동시키면 공유수가 올라갈 것입니다.

이를 통해 이루고 싶은 것은 사용자의 공유수를 높여

더 많은 사용자가 프로모션을 홍보하도록 하는 것이며

나아가서는 이 홍보가 신규 가입자 유입으로도 이어지길 바랍니다.

 

 

A/B 테스트 화면

Figma로 테스트 화면을 디자인해보았습니다.

왼쪽은 As-is 페이지를 Figma로 구성한 것으로 가장 하단의 링크 공유 버튼이 있습니다.

터치 시 url이 복사되었다는 문구만 팝업합니다.

실제 랜딩페이지 팝업창

사용자가 실제로 링크를 카카오톡으로 공유하기 위해선 해당 버튼을 통해 링크를 복사함을 확인한 후

별도로 카카오톡 앱을 켜 원하는 톡방을 들어가 입력창에 '붙여넣기'를 통해 입력 후 전송해야 합니다.

 

A/B 테스트 화면 중 오른쪽은 To-be를 Figma로 구성한 것입니다.

하단의 링크 공유 버튼을 가장 상단의 배너에 위치시켰습니다.

해당 배너는 사용자가 스크롤을 내려도 화면 상단에 고정되어 있습니다.

따라서 프로모션 콘텐츠의 어느 위치에서도 공유 버튼에 접근 가능합니다.

해당 버튼을 터치 시 공유 팝업창이 뜨기 때문에 한번의 터치로 원하는 방식으로 링크 공유가 가능합니다.

공유 팝업 예시 화면