11번가 카드뷰 개선
UX/UI 개선 프로젝트
11번가는 홈 화면에서 다양한 상품 리스팅을 제공하고 있는데요.
그중 딜(Deal) 상품의 게이트 역할을 하는 딜카드의 UX 개선에 대해 이야기 하려고 합니다.
위에서 아래로
좌에서 우로
11번가 홈 구조는 특정 상품의 검색을 위한 목적형 탐색이 아닌, 흥미 있는 상품의 발견을 위한 비목적형 탐색 구조를 지향하고 있습니다. 상품의 단순 노출뿐 아니라 11번가의 버티컬 서비스나 기획전으로 연결하는 게이트도 노출되어 있는 구조입니다. 위에서 아래로 홈 화면을 빠르게 훑어 보면서 관심 있는 주제는 좌에서 우로 넘기며 상품을 탐색할 수 있는 UX가 설계되어 있습니다.
그 중에 딜카드는 11번가에서 할인율이 높거나 고객의 개인화 데이터를 통해 선별된 추천 상품을 1열의 큰 화면으로 적극 노출하는 11번가의 대표 딜 상품 블록입니다. 11번가 홈에서 가장 많이 노출되는 블록인 만큼 UX/UI 개선을 통해 11번가 홈탭의 구매 전환율을 높이는 데 중점을 두고 있습니다.
많은 이야기를 담고 있는
딜카드 컴포넌트
AS IS 딜카드는 고객 넛징(Nudging)을 위해 다양한 컴포넌트들을 노출하고 있습니다.
각 컴포넌트들이 상품 구매에 도움을 주는 유의미한 데이터임은 분명하지만, 이것이 전시 영역에 노출될 만큼 주요한 역할과 UI의 형태로 구성되어 있는지에 대한 검토가 필요했습니다.
또한 딜카드가 홈 화면에 전체적으로 길게 노출되는 만큼, 사용자의 모바일 화면 높이에서 1열로 크게 제공되는 딜카드의 높이가 홈화면의 전체 구매 전환율의 상승에 도움을 주는지 확인이 필요했습니다.
최적화된
상품 이미지 비율
전반적인 개선에 앞서, 딜카드의 상품 이미지 비율이 적절한지 우선 확인할 필요가 있었습니다. 여러 이미지 비율로 AB 테스트를 진행하였습니다. 가로로 긴 형태의 상품 이미지는 비율에 따라 클릭률의 차이가 있었으나, 그 차이가 미미하여 결과적으로, 이미지의 비율만으로는 구매 전환율에 큰 영향을 미치지 않는다는 결론을 내렸습니다. 개선된 딜카드 이미지는 2:1의 비율을 유지하되, 동영상이 재생되는 경우에만 16:9로 비율의 변화를 주는 등 환경에 최적화된 조건으로 설계하였습니다.
필요한 정보만
컴팩트하게
개선된 딜카드는 고객의 상품 탐색에 도움을 주는 정보만을 가장 간결하게 노출하고, 흩어진 넛징(Nudging) 정보들을 그룹화하여, 한눈에 쉽게 파악할 수 있도록 정보를 재구성하였습니다.
'AS IS' 와 'TO BE'를 비교해 보면, 정보의 노출량 차이는 크게 없지만, 컴포넌트를 그룹핑하고 UI의 형태를 변경하여 딜카드의 전체 높이값이 줄어든 형태를 확인 할 수 있습니다.
또한, 슈팅배송과 같은 11번가의 전문 배송 서비스를 플래그 영역에 노출하여, 할인 상품을 빠르게 받아 볼 수 있는 딜상품의 특징을 잘 보이도록 구성하였고 신규 등록 상품이 많은 딜카드의 특성상 리뷰 데이터가 적어 이를 제외하는 등 정보를 재구성하였습니다.
11번가 최저가와
최대할인가
11번가는 상품 가격과 관련된 유의미한 정보를 고객에게 제공하고 있습니다. 11번가 마켓 내 동일 상품 기준 가장 최저가일 경우 표기하는 ‘11번가 최저가’, 30일 동안 최저가일 경우 표기하는 ‘30일내 최저가', 다양한 할인 옵션을 적용해 실제 결제 금액을 제공하는 ‘최대할인가'가 그것입니다.
‘11번가 최저가'와 ‘30일내 최저가'는 상품의 정보를 노출하는 성격인 정보성 메시지로 플래그 형태로 제공하며, ‘최대할인가'는 실제 나의 정보를 바탕으로 결제하는 결제 가격과 관련된 것이므로 가격 영역에 포함시켰습니다.
홈탭 지면 효율화 상승
다양한 변화를 적용한 11번가 딜카드는 개선 이후, 방문 대비 상품 노출수와 상품 클릭수가 증가한 데이터를 확인하였습니다. 세션 대비 상품 클릭률은 17.2%가 상승하였고, 이를 통해 경유 거래 전환율은 8.4%가 상승하였습니다. 또한 UV당 상품 클릭수도 증가하였습니다. 이를 통해 카드뷰의 컴포넌트 개선이 11번가 고객의 상품 탐색 과정을 개선 했음을 확인하였습니다.
앞으로도 11번가는 UI/UX 개선을 통한 원활한 상품 구매 경험을 제공할 수 있도록 노력하겠습니다.
11번가 | 모바일 홈 바로가기 >
