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

앱 서비스 하나를 선택하여 랜딩 페이지를 분석해주세요. 

오늘 제가 선택한 앱 서비스는

바로 크림 KREAM입니다.

 

여러모로 핫한 서비스인데 한번도 써본 적이 없는 것 같아서

이번 과제를 통해 크림을 처음 접하는 사용자의 입장에서 분석해보았습니다.

 

웹사이트 검색에서 앱 다운로드, 결제 유도까지 제가 정의한 크림의 단계는

아래와 같이 총 7 단계로 정의해보았습니다.

CTA >> 설명 1 >> 설명 2 >> CTA >> CTA >> 설명 >> CTA

 

CTA - '크림을 소개합니다'

아직 어플리케이션을 깔지 않은 사용자로서

한정판 거래 플랫폼이 있다는 입소문을 통해 검색창에 크림을 검색합니다.

크림 모바일 웹

모바일 웹 기준 처음 크림 사이트에 들어가면

가장 상단에 앱 다운로드를 유도하는 팝업창이 있으며며

화면 가운데 크게 콘텐츠를 보여주는 캐러셀이 있습니다.

해당 캐러셀은 사용자가 터치로 움직일 수도 있으며

 일정 시간 후 자동적으로 다음 페이지로 넘어갑니다.

맨 마지막 캐러셀 콘텐츠를 보면 '크림을 소개합니다' 문구가 보입니다.

크림 서비스를 처음 접하는 사용자 입장에선

친히 소개해준다니 터치하여 콘텐츠를 보게 됩니다.

 

 

설명 1 - 왜 크림인가? WHY

 

콘텐츠를 눌러 이동하자 하단에는 앱 다운로드를 유도하는 버튼이 있으며

 크림을 설명하는 콘텐츠가 시작됩니다.

다운로드 버튼은 스크롤을 내리더라도 위치가 바뀌지 않고 유지됩니다.

 

 

 

설명은 크게 WHY와 HOW로 나눌 수 있습니다.

우선 WHY를 봅시다.

 

크림이 스스로 말한 '크림을 써야 하는 이유'는 크게 3가지로 나눌 수 있습니다.

 

 

 

[1] 익명 거래로 안전 거래

[2] 주식처럼 예측하는 시세 거래

[3] 철저한 검수로 편안한 거래

 

이 3개의 화면을 보면서 생각이 든 것은

세 문장을 '거래'라는 단어로 문장의 마지막을 통일시키고

하단의 카피를 통해 사용자가 해당 문구를 쉽게 이해할 수 있도록 자세한 설명을 추가하였으며

일러스트 역시 통일성 있게 신경썼다는 것이었습니다.

 

 

설명 2 - HOW

사용자에게 왜 크림을 사용해야 하는지 설명했다면

이제 사용자에게 어떻게 크림을 사용해야하는지 설명해 줄 차례입니다.

 

 

따라서 크림은 하단에 일러스트와 텍스트로 서비스 이용 방법을 자세하게 설명해주고 있습니다.

 

여기서 제가 해당 설명에서 마음에 들었던 부분은

판매와 구매를 따로 설명하는 것이 아니라

동시에 진행되는 프로세스에 있어서

판매와 구매를 한꺼번에 단계별로 설명해주는 것이었습니다.

 

크림에서는 누구나 판매자가 혹은 구매자가 될 수 있기 때문에

해당 과정을 굳이 분리해서 설명할 필요가 없었던 것 같습니다.

 

하단으로 스크롤을 조금 더 내리면 크림은 크림 서비스 이용 방법을 설명하는 영상을 첨부하였습니다.

텍스트보다 영상이 더 이해가 잘 되는 사용자를 위한 배려로 보입니다.

 

 

HOW To 콘텐츠는 크림의 실제 앱 화면을 보여주며 설명이 끝납니다.

 

 

 

CTA - 앱 다운로드

위 WHY와 HOW 콘텐츠는 결국

검색을 통해 모바일 웹으로 접속한 사용자로 하여금

크림 앱을 다운로드할 수 있게 자세한 설명을 제공한 것입니다.

따라서 하단의 앱 다운로드 버튼은

스크롤을 내리더라도 항상 하단에 고정되어 있습니다.

 

설명을 읽은 사용자가 앱 다운로드를 결심하여 버튼을 누르면

바로 앱 스토어로 이동해 다운로드를 시작할 수 있도록 유도합니다.

 

 

CTA - 결제 유도

크림 앱을 깔면 가장 처음으로 보이는 홈 화면입니다.

(여러 프로덕트를 보다가 느끼는 건데 요즘은 하단 바에서 홈 아이콘이 가운데가 아닌 좌측 끝에 있는게 트렌드인가 싶습니다..)

 

정확히 "카카오페이 결제 시 즉시 할인 5%"라는 문구를 메인 카피로 세우고

'4월 11일 (월)부터 최대 3만원 할인!'이라는 문구를 추가했습니다.

현재 과제를 하고 있는 오늘은 13일이니 이미 해당 프로모션이 시작한지 이틀이나 지났지만

'4월 11일부터'라고 써있는 것을 보니 아마도 프로모션 시작 일자 전부터 

해당 콘텐츠를 캐러셀에 위치시켜 홍보하지 않았을까 싶습니다.

 

할인 프로모션 콘텐츠를 통해 사용자의 결제를 직접 촉구하고 있습니다.

터치해보도록 하겠습니다.

 

 

 

설명 - 카카오페이로 결제 시 할인 프로모션

해당 콘텐츠를 터치하면 사용자는 프로모션에 대한

기간, 대상, 혜택, 참여 방법에 대한 설명을 볼 수 있습니다.

 

하단에는 유의 사항이 있으며 가장 아래로 내리면

'친구에게 링크 공유하기' 버튼을 통해

사용자에게 해당 프로모션에 대한 홍보를 유도합니다.

 

 

CTA - 서비스 탐방 유도

굳이 직접적인 결제를 유도하는 것이 아니더라도

크림은 캐러셀을 통해 사용자에게 서비스 탐방을 유도합니다.

캐러셀의 2, 3, 4 번째 페이지는 위 이미지와 같이 통일된 디자인으로 구성되어 있습니다.

제품의 이미지, 마이크로 카피, 메인 카피로 제품 명,

'지금 거래하기' 버튼으로 구성되어 있는 것을 보실 수 있습니다.

 

세 가지 콘텐츠 모두 터치시 바로 SHOP으로 이동합니다.

SHOP은 하단바에서 가운데 위치한 기능입니다.

 

 

캐러셀을 통해 SHOP으로 자연스레 이동하게 된 사용자는

바로 상품을 보게 되고 더 나아가서 가격을 비교하고

서비스의 기능을 사용하게 될 것입니다.

 

W5D4에 이어서..