상품카드 개선 프로젝트
매력있는 정보를 한 포인트에 모아서 상품의 매력도 높이기
제가 담당하고 있는 패션바이카카오는 4050여성을 타겟으로 한 소호 패션 버티컬 플랫폼입니다.
세련되고 이쁜 상품들을 저렴하게 구매하고 싶은 여성들이 주로 구매를 하고 있죠.
많은 프로젝트가 있었지만, 흥미로웠던 프로젝트가 있어서 공유하려고 합니다.
디자인은 거의 2일만에, 개발과 QA도 3일만에 진행이 되었던 신속했던 프로젝트 였죠.
회사 내부 데이터를 다 들어내 보여드릴 수 없는 점 양해 부탁드리면서, 글 시작해 보겠습니다.
상품카드의 문제점
커머스에서 상품카드는 실로 복잡한 컴포넌트입니다.
화면에서 복잡하지 않게 나열되어야 하며, 사용자에게 필요한 정보를 명확하게 보여주고
사용자가 상품에 매력을 느낄 수 있도록 정보를 배치해야 합니다.
패션바이카카오(이하 패바카)의 상품카드는 문제점 2가지를 가지고 있었습니다.
상품카드 ASIS첫번째로는 잉여공간으로 더 많은 상품 카드를 사용자에게 보여줄 수 없다는 점이었는데요. 풀어말하자면 상품의 정보에 따라 요소가 추가되고 빠지며 모든 상품 카드가 동일한 높이값을 갖고 있지 않아서 생기는 문제였습니다. 만약에 상품 카드가 동일한 높이값을 가지고 간다면, 잉여공간이 생기지 않을 테고, 그 공간에는 약 1행의 상품카드가 들어갈 수 있을테죠.
두번째로는 상품이 매력적으로 보이지 않을 정도로 정보의 위계가 없다는 점이었습니다.
정보의 배치에는 이유가 없었고, 단지 스토어 > 가격명 > 가격 > 그외의 요소 순서대로 배치가 되어있을 뿐이었죠.
저는 두가지 문제점을 한번에 해결할, 솔루션을 고민하기 시작했습니다.
사용자로 돌아가기
가격 중시하기
앞서 말씀드렸듯이 패바카는 이쁜 상품을 '저렴'하게 구매할 수 있다는 것에 방점이 찍혀있었습니다.
그렇다면 사용자들에게 가장 중요한 것은 스토어명이나 가격명이 아닌 가격 그 자체일 것입니다.
저는 이것을 우선해서 디자인 하기로 했습니다. 과감하게 가격명을 빼는 시도도 해보구요.
그리고 '가격을 중시하는' 사용자에게 니즈가 없을 것 이라 판단되는 스토어 명을 제일 하단에 배치를 했습니다.
매력적인 정보들을 사진 근처에 배치하기
또한 사용자들이 가장 매료되는 요소는 바로 사진일 것입니다. 사진에 가장 시선을 오래 둘테니, 사진 근처에 상품을 매력적으로 보이게 할 수 있는 요소를 모아서 배치하도록 했습니다.
그래서 사진 밑에 가격을 바로 붙였습니다. 또한 상품의 신뢰도를 높일 수 있는 리뷰 점수또한 가격과 사진과 가까이해서 배치했습니다. 또한 무료배송, 직진배송 같은 매력있는 뱃지들도 사진 안에 배치 시켰습니다.
리뷰나 뱃지같은 경우는 어떤 상품에는 있을 수도, 없을 수도 있는 유동적인 정보 값 입니다. 해당 정보들을 무조건적인 정보 옆이나 안에 배치를 하니, 저절로 상품카드의 높이값은 고정이 되었습니다.
- 리뷰는 가격 옆에 있으니, 리뷰가 있거나 없거나 높이값이 변하지 않음
- 뱃지는 사진 안에 있으니 뱃지가 있거나 없거나 높이값이 변하지 않음
결과적으로는 다음과 같은 디자인이 나오게 되었습니다.
최대 40%이상의 공간을 아낄 수 있는 디자인이 나왔습니다. 그렇다면 성과는 어떻게 나왔을까요?
클릭 수, 노출 수는 당연히 증가하였고, 찜 수가 확연하게 증가했다는 것을 알려드릴 수 있을 것 같습니다. 찜 수가 증가한 이유는 제 생각에는 매력적인 정보들, 가격, 리뷰, 뱃지, 사진들을 한 포인트로 보여주고, 그 가운데 액션 아이템인 '찜'이 위치해서이지 않을까- 라고 생각하고 있습니다.
더불어서 찜 해제수도 확연하게 늘었는데, 찜수가 그보다 더 늘었다는 점을 확인할 수 있었으니, 결과적으로는 좋은 결과를 얻게 되었네요.
백엔드 개발없이, 디자인과 프론트 엔드 개발로만 이뤄졌던 짧은 프로젝트였는데 확연한 성과를 가지게 되어서 기쁩니다. 앞으로 계속 데이터를 보면서 디벨롭할 기회가 있으면 좋겠습니다.
이상입니다. 의견이 있으시다면 자유롭게 댓글로 남겨주시고, 좋은 인사이트를 얻으셨다면 좋아요 한번 부탁드립니다. 감사합니다 =)
