카테고리 UX 개선하기
검색량 11% 상승시킨 프로덕트 개선 과정
최근 출시된 아몬즈의 카테고리 탭 구현 과정을 이야기하려 합니다. : )
가설을 수립하고, 검증한 내용을 보실 수 있어요.
Overview
사용자들은 주로 목적을 가지거나, 발견하기 위해 커머스에 접속합니다. 목적형 사용자는 자신이 원하는 상품을 찾을 경우 비교적 쉽게 구매전환이 일어나는데요. 그렇기에 원하는 상품을 찾을 수 있도록 도와주는 검색 UX는 커머스에서 굉장히 중요합니다.
이러한 배경으로 최근 아몬즈는 상품탭 개선 프로젝트를 진행했습니다. 사용자들이 가장 많이 사용하는 영역인 만큼, 다양한 부서와 이야기하며 9명의 팀원이 함께 만든 대형 프로젝트였는데요. 오늘은 해당 프로덕트 개선 과정을 나눠보려 합니다.
기존 상품탭의 문제점
아몬즈의 기존 상품탭상품탭을 개선하기 위해서는 어떠한 이유에서, 어떠한 방향으로 개선해야 할지 문제와 제품을 정의하는 것이 필요했습니다. 이는 구매고객 설문조사 및 사용자들의 리뷰를 통해 쉽게 발견할 수 있었는데요. 팀원들과 제품 스터디를 통해 정리하고, 논의한 기존 상품탭의 문제점은 다음과 같았습니다.
문제 1. 직관적으로 인지하기 어려운 카테고리 구조
아몬즈의 상품탭은 진입 시 카테고리와 상품이 함께 보이는 구조였습니다. 카테고리가 최상단에 배치되어 눈에 잘 띄기는 했지만 모든 카테고리를 한 번에 볼 수 없어서, 사용자가 카테고리 구조를 인지하는 데 어려움이 있었습니다. 이로 인해 사용자 입장에서는, 그냥 많은 주얼리들이 규칙 없이 산재해 있는 듯한 느낌을 받을 수 있었습니다.
문제 2. 세밀하지 못한 상품 분류, ‘2차 카테고리와 상세 필터의 부재’
기존의 상품탭은 1차 카테고리와 가격대/소재 필터만 있는 구조였습니다. 그렇기에 주얼리에 대한 분류가 세밀하지 못하고, 귀걸이/목걸이 등 타 커머스와 유사한 수준에 그쳤는데요. 필터 또한 베이스&귀걸이침소재/가격대에 국한되어, 사용자들이 원하는 주얼리를 쉽게 찾지 못하고 버티컬 커머스로서의 신뢰성을 주지 못하였습니다. 이는 편리한 주얼리 쇼핑 경험을 제공하겠다는 amondz의 제품 비전에 치명적인 문제였습니다.
문제 3. 시즌/트렌드를 반영하지 못하는 ‘고정형 카테고리’
모든 패션 아이템들이 그렇듯, 주얼리도 시즌/트렌드에 따라 사용자들이 찾는 상품이 변합니다. 하지만 기존의 카테고리는 DB에 고정된 구조로 계절성 상품, 블랙프라이데이와 같이 이슈성에 따라 카테고리를 변경하는 것이 불가능했습니다. 이는 의도하는 상품군을 먼저 인지하는 사용자들의 ‘직관적인’ 카테고리 탐색 경로(니즈)를 충족시키지 못하여, 탐색의 효율성을 떨어트리는 문제를 나타냈습니다.
개선 방향
위의 주요 문제점 및 기타 이슈들을 정리하고 공유함으로써, 상품탭의 개선 방향을 쉽게 도출할 수 있었는데요. 저희가 정의한 주요 개선 방향은 아래와 같았습니다.
아몬즈의 주얼리 분류를 보여주는 카테고리 리스트 추가
주얼리에 대한 세분된 카테고리와 필터 제공
트렌드/사업단을 반영할 수 있는 유동적인 카테고리 관리 기능
다른 카테고리로 쉽게 전환할 수 있는 편의성 제공
이를 통해 검증하고자 한 가설은 다음과 같이 설정되었어요.
가설
카테고리 리스트 페이지를 추가하면, 사용자가 원하는 상품군을 직관적으로 선택하고 탐색하는 경험이 가능할 것이다.
특화된 2차 카테고리와 상세 필터를 제공한다면, 사용자가 원하는 상품을 더 쉽게 찾을 것이다.
카테고리를 통해 더 많은 상품을 본다면, 자연스레 구매 전환율도 상승할 것이다.
가설 검증 및 개선
먼저 저희는 카테고리의 주요 목적을 주얼리의 분류 체계를 명확히 전달하여, 이에 따라 사용자가 자신이 원하는 카테고리를 직관적으로 선택하고 탐색하는 경험의 구축으로 보았어요. 기존 상품탭에서 단순히 상품을 보여주는 것을 넘어, ‘아몬즈의 주얼리 분류체계를 학습하고, 탐색하는 영역’으로의 확장이었죠.
1. 주얼리 분류체계를 직관적으로 보여주는 카테고리 탭
이를 위해 상품탭의 명칭을 카테고리 탭으로 변경하여, 카테고리의 존재를 강조하였어요! 또한 카테고리 리스트 페이지를 추가하여, 사용자가 주얼리의 분류체계를 한눈에 인지하도록 하였습니다.
2. 트렌드/사업단의 방향을 반영하는 ‘강조형 카테고리’
기존에는 LUXURY, MDPick 등 사업단에서 집중하는 서비스들을 홈의 위젯/기획전을 통해서만 노출할 수 있었는데요. 강조형 카테고리를 추가함으로써, 트렌디하거나 사업단에서 집중하는 서비스를 사용자들이 확실히 인지할 수 있도록 설계하였습니다.
2차 카테고리는 아몬즈에서 새로이 선보이는 기능이기에, 편리한 사용자 경험을 제공하기 위한 많은 논의가 필요했어요. 논의를 통해 세밀한 분류를 통한 사용자의 탐색 정확도를 높이는 것을 주요 목적으로 설정하였습니다.
한편으로 세밀한 2차 카테고리는 너무 복잡하고 탐색 결괏값만 적은 부정적인 탐색 경험을 유발할 수도 있었는데요. 다양하고 세밀한 2차 카테고리와 충분한 탐색 결괏값을 보장하기 위해, 다음과 같이 설계하였습니다. : )
3. 다중 선택하고 펼쳐보는, 상세한 2차 카테고리
저희는 다음과 같은 주요 기능과 정책을 구성하였어요.
(세밀한 분류) 2차 카테고리는 사용자의 니즈를 기반으로, 세밀한 분류를 제공하자.
(다중선택) 동시에 여러 개의 2차 카테고리를 선택함으로, 탐색 결과의 충분한 상품 수를 보장하자.
(펼쳐보기 모달) 2차 카테고리를 한눈에 보고, 선택할 수 있는 기능을 제공하자.
4. 1차 카테고리를 펼쳐서 전환하는 기능
카테고리가 다양해진 만큼 1차 카테고리 간의 전환 경험을 간소화하는 것도 중요한 과제가 되었습니다. 이는 자연스럽게 카테고리 전환을 위한 페이지 뎁스를 최소화하는 것으로 방향이 잡혔어요. 이를 위해 저희는 1차 카테고리도 모달을 통해 펼쳐서 보여주는 기능을 선택하였고, 어디서나 다양한 1차 카테고리로 연결되는 사용자 경험을 만들 수 있었습니다.
아몬즈는 주얼리 버티컬 커머스이기에, 주얼리에 특화된 검색 경험을 제공하는 것이 중요합니다. 하지만 기존에 주얼리는 잡화로 분류되어 세밀한 검색 경험이 불필요하거나, 고가의 상품은 전문가들의 보증 혹은 디자인/가격에 의해 구매가 결정되는 시장이었어요.
5. 필터의 단계를 나누고, 점진적으로 고도화하자.
그렇기에 저희는 기존에 전문가들이 안내해주던 정보들을 이해하기 쉽게 제공하여, 사용자가 직접 판단 및 선택 가능한 필터를 만드는 것을 비전으로 설정하고, 이를 점진적으로 구축하기로 하였습니다. 저희가 설정한 필터의 대략적인 로드맵은 아래와 같습니다.
a단계 일반적으로 패션상품을 선택할 때, 이용하는 정보를 제공
b단계 주얼리에 특화된 정보 중, 사용자도 쉽게 활용할 수 있는 정보를 제공
c단계 일반적으로는 잘 모르지만, 비교적 학습하기 쉬우며 활용도가 높은 정보를 제공
d단계 주얼리 별로 전문화된 정보를 누구나 쉽게 온보딩하고, 선택할 수 있는 필터 제공
6. (a단계&b단계) 보다 다채로운 필터 기능 ‘글로벌 필터와 로컬 필터’
이번 고도화에서는 a, b단계를 혼합하여 제공하기로 하였습니다. 이는 브랜드/상세옵션/컬러/가격&할인율 탭으로 설정되었습니다. 특히 상세 옵션은 모든 카테고리에 적용되는 글로벌 필터와 특정 카테고리에만 적용되는 로컬 필터로 구성되었는데요. 로컬 필터는 귀걸이 카테고리에서 ‘귀걸이침 소재’를, 목걸이/팔찌/발찌 카테고리에서 ‘체인 모양’을 검색하는 기능으로 사용자의 편의성 향상이 클 것이라 예상되었습니다. : )
사실 이번 프로젝트에서 가장 어려웠던 부분은 백오피스와 DB의 구성이었어요. 앞에서 말씀드렸던 것처럼 기존의 카테고리는 DB에 고정되어, 유동적으로 관리할 수 없는 구조였습니다. 유동적인 카테고리 구조를 만들기 위해 상품의 메타 데이터를 활용하여, 카테고리를 구성하는 로직과 백오피스를 구축하였습니다.
7. 태그(메타데이터)를 기반으로, 검색하는 카테고리 구조
아몬즈에는 ‘태그’라는 구조가 있는데요, 아몬즈의 태그탭 혹은 상품별 상세 정보에 보이는 정보들입니다. 태그는 상품의 속성을 구분 짓는 메타 데이터이기에, 동일한 종류의 상품은 동일한 태그가 연결됩니다. 저희는 이를 통해 다음과 같은 로직으로 유동적인 카테고리 구조를 구축하였습니다.
카테고리 맵을 구성
카테고리 맵에 적합한 태그 데이터 생성
동일한 범주의 태그는 그룹핑
상품별로 적절한 태그(카테고리)를 연결
카테고리로 사용될 태그(그룹)를 설정
아몬즈 app/web에서 노출할 카테고리 트리 설정
이러한 DB/백오피스 구조를 통해 사업/운영단 및 트렌드에 따라 유동적으로 바꿀 수 있는 카테고리가 완성되었습니다 : )
결과
1. 카테고리를 통한 상품 탐색 경험 최대 22% 상승
카테고리가 업데이트되고 하루 후부터 사용자의 사용 패턴이 확연히 달라졌는데요. 업데이트 후와 이전 5개월간의 데이터를 비교했을 때, 카테고리/검색을 통해 상품을 본 횟수가 최대 22% 상승하였어요! 마케팅 단의 부스팅 효과를 제외하기 위해, 동일한 구매 전환율을 보였던 기간과 비교했을 때도 11%의 상승률을 보였습니다. 이를 통해 사용자는 확실히 자신이 원하는 주얼리를 탐색할 수 있는 서비스 경험을 원하고 있었다는 사실을 알 수 있었습니다.
2. 카테고리를 통한 구매 전환 비율 증가
기존에 아몬즈의 사용자들은 홈의 위젯/기획전을 통해 상품을 탐색하고 구매하는 경우가 많았습니다. 카테고리를 통한 상품 탐색량이 많아지자, 자연스레 카테고리를 통한 구매전환 비율도 증가하였어요. 이는 사용자들이 원하는 주얼리를 간편하게 찾는 기능을 원했다는 사실과, 기존에 탐색의 불편함이 큼에도 위젯/기획전을 통해 상품을 찾고 구매할 만큼 ‘사용자의 아몬즈 주얼리에 대한 니즈’를 확인할 수 있는 뜻 깊은 데이터이기도 했습니다. : ]
3. 위젯 사용 비율의 감소
카테고리가 활성화되자, 위젯을 사용하는 비율이 줄어드는 결과로 이어졌습니다. 탐색 기능이 다양해짐에 따른 자연스러운 결과이지만, 위젯을 통한 높은 구매 전환율/객단가를 고려할 때 홈탭(위젯/기획전)의 사용성을 보완해야 할 필요성이 있었습니다. 따라서 홈탭을 고도화하는 것이 중요함을 인지할 수 있었습니다.
마치며
1. 버티컬 커머스는 카테고리에 특화된 사용자 경험이 중요하다!
최근 대표님, 팀원분들과 아몬즈의 방향성을 이야기하며 지속해서 거론된 주제입니다. 저는 버티컬 커머스는 다양한 카테고리를 다루는 서비스들과 다른 뾰족한 무엇인가가 있어야 한다고 생각해요. 뾰족하기만 하면 너무 좁아지지만, 적절한 뾰족함과 적절한 넓음(?)을 같이 가져가는 게 서비스가 성장할 수 있는 방법이지 않을까 생각합니다.
그런 면에서 이번 카테고리 탭의 출시는 아몬즈의 버티컬한 사용성을 고도화하는 작업임과 동시에, 위에서 논의한 방향성을 입증하는 작업이라는 생각이 들었습니다. 결론적으로 이를 조금이나마(?) 입증할 수 있었고, 앞으로 더 빠르고 큰 성장을 위해 노력해야겠다는 생각이 들었습니다 : )
2. 사업, 기획, 디자인, 개발, 운영 등의 이슈를 정리하는 건 정말 어렵다..
글 서문에 말씀드린 것처럼 이번 프로젝트는 굉장히 큰 규모였어요. 그렇기에 사업, MD, 마케팅, 콘텐츠 등 다양한 부서의 의견을 듣고 반영하는 것이 중요했습니다. 또한 카테고리와 상품의 데이터 구조를 변경하다 보니, 해당 작업을 정리하고 팔로우업하는 것이 매우 중요했는데요. MD님께서 직접 상품의 태그데이터를 정리해주시고, 개발리더님들께서 지속해서 백오피스/DB구조를 점검해주셔서 무사히 완수할 수 있었습니다.
이외에도 다양한 개발, 디자인, 기획 이슈가 많았는데 그때마다 제가 정말 부족한 사람임을 생각할 수 있었어요. 동시에 팀원분들께도 깊은 감사를 느꼈습니다.
저도 이제 아몬즈에 합류한 지 1년여가 다 되어 가네요. 시간이 참 빠른 거 같습니다. 앞으로도 더 좋은 PM/PO가 되기 위해, 더 좋은 amondz를 만들기 위해 노력해야겠습니다. 오늘도 부족한 글 읽어주셔서 감사합니다!
*이 프로젝트의 대부분은 디자이너님과 개발자님, MD님들께서 진행해주셨습니다.
* UX디자이너 Soyi님께서 사용성을 함께 설계하며, GUI를 리드해주셨습니다.
* 개발자님들께서 지속해서 기획/디자인을 리뷰해주시고, 유저 친화적으로 구현해주셨습니다.
* MD님들께서 상품의 메타데이터를 관리해주시고, 카테고리 구성을 기획해주셨습니다 : )
Tree님이 브런치에 게재한 글을 편집한 뒤 모비인사이드에서 한 번 더 소개합니다.
