[온스탕탕 ep.3]상품 조회 25% 향상시킨 온스타일 상세페이지 개편 비하인드
온스탕탕💜 온스타일 IT 담당자들의 우당탕탕 비하인드 스토리
CJ온스타일 상세페이지를 새롭게 단장했어요!
뿐만 아니라 앞으로 변화에 더욱 유연하게 적용할 수 있도록, 기술을 최신화하고 구조를 개선하는 프로젝트를 진행했는데요.
상품 상세페이지는 간단한 화면으로 보일 수 있지만 주문, 배송, 방송 정보, 프로모션 등 다양한 영역이 결합되어 있기 때문에 보다 세밀한 분석이 필요했습니다.
그 과정 속 기획, 디자인, 개발자들의 우당탕탕 비하인드 스토리를 담았습니다
상품의 핵심 구매요소를 효과적으로 전달하자
🎤상품 상세 product 기획자 송수림님, 영띠니님 Says
송수림) 이번 프로젝트의 가장 큰 목적은 상품 상세 페이지에 상품의 핵심 구매요소를 효과적으로 전달하여 고객의 구매 의사결정을 지원하는 것이었는데요.
단, 상품의 핵심 구매요소를 보편적인 상품 정보가 아닌 온스타일만 제공할 수 있는 차별화된 정보로 정의했습니다! 타사 플랫폼 대비 우리만의 강점인
- 영상 정보
- 방송 혜택
- 온스타일 회원만을 위한 쿠폰 등 가격 혜택
- CJ의 특화 배송 서비스
- 담당 MD가 직접 전해주는 상품 소개 정보
- 구매수/조회수/좋아요수/장바구니 담은 수 등 상품의 인기도를 반영하는 데이터
- 직접 구매하고 사용해본 고객이 제공하는 리뷰 데이터까지
상품 상세페이지에서 정보의 중요도와 특성에 따라 최적화된 UI, 편리한 기능과 함께 차별화 정보들을 제공하고자 했어요.
그럼에도 불구하고 구매로 연결되지 못했다면?
상품 상세페이지를 기점으로 온스타일 플랫폼 내의 다양한 추가 탐색 동선으로 연결시키는 것에 집중했어요. 고객이 보고 있는 상품과 연관도가 높은, 카테고리 특성을 반영한 추천 상품을 제공하고 기획 방송 게이트, 브랜드관/전문관 게이트, 진행 중 프로모션/기획전, 추천 카테고리와 추천 검색어를 노출해서 이탈률을 낮추는 방향으로 고객 동선을 설계했어요.
기존 상품 상세 페이지의 작업 속도를 저하했던 비효율 요소를 제거하는 것도 중요한 개선 포인트였어요!
기존에는 일부 패션 카테고리 상품만 별도 템플릿을 채택하여 운영하고 있었는데요, 데이터분석 결과, 구매전환율이나 고객 편의 측면에서 이원화 구조가 유의미하지 않다는 결론을 내렸어요.
그래서 패션 등 상품군의 차별화 포인트는 상품 페이지의 모습이 아닌 상품 정보나 특화 모듈을 통해 반영해 나가기로 하였고, 상품 페이지 구조는 단일화하되 컴포넌트 구조를 채택하여, 앞으로 추가할 신규 스펙들을 신속하고 유연하게 받아들일 수 있는 기반을 마련했어요.
어떻게 하면 고객이 받을 수 있는 혜택들을 모아 보여줄 수 있을까?
영띠니) “혜택을 모두 모아”
기존에는 고객이 받는 가격 혜택 외 리뷰 작성, CJ ONE 포인트, 무이자 혜택 등 별도 영역들로 구성되어 있었어요. 그러다 보니 고객이 혜택을 받기 위해 직접 찾아서 발견해야 했습니다.
그렇기 때문에 저희는 이러한 혜택들을 한번에 묶어 온스타일 고객이 받을 수 있는 최대 혜택들을 한 영역에 묶어 보여주도록 개선 포인트로 잡았어요
‘원래 다 있던 정보 아니야?’ 라고 할 수 있지만 전과 비교해본다면 고객이 받는 혜택을 고객이 여기 저기 찾아서 받았어야 했다면 가격 영역에 모두 구성된 것을 발견하실 수 있을 거예요!
“혜택은 확실하게! 눈에 보이게”
다운로드 쿠폰과 프로모션의 경우 온스타일 고객을 위한 혜택임에도 불구하고 배너 스와이프가 빨리 지나가서 놓친다든지, 어떤 쿠폰을 추가로 받을 수 있는 지에 대한 인지가 낮아 고객의 프로모션 참여와 쿠폰 다운 등의 액션을 유도할 수 있게 개선 포인트를 잡았습니다.
또한 헤더 영역에도 우선순위에 따라 혜택이 더 잘 보이도록 구성하여 고객이 가장 중요하게 생각하는 혜택을 상품 상세의 이곳 저곳에 넣어 인지를 강화했습니다.
아차! 배송 서비스도 무료나 유료에 따라 고객의 구매 패턴이 달라지는데요! 배송 서비스도 기존 혜택 탭에서 상품 상세 상단으로 올려 고객이 바로 인지할 수 있게 변경했어요!
MD공지의 탄생
영띠니) 현업 분들이 기존 상품 상세에서 아쉬웠던 부분들을 담기 위해 여러 차례 미팅을 진행했어요. 특히 기존에 깐깐메모로 사이즈를 안내하거나 기술서에 텍스트로 프로모션을 안내한다 등 고객들과의 소통 창구가 불편하다는 것을 알 수 있었는데요!
그렇게 탄생한 기능이 MD공지 랍니다~! 사실 프론트 서비스만 기획하는 게 아니에요. 어떻게 보면 프론트 서비스의 고객은 온스타일 고객이고 상품을 관리하기 위한 백엔드 플랫폼의 고객은 저희 내부 직원이다 보니 직원들의 사용성을 고려하지 않을 수 없었어요!
이미 시스템에 적응 되어 있는 직원들을 위해 최대한 알아보고 적용하기 쉽게 만들기 위해 기존 기능들의 액션과 동일한 형식으로 구현했어요.
프론트 화면부터 백엔드 플랫폼까지, 기획의 어려움 보다는 새로운 서비스를 만들기 위해 현업 니즈를 파악하여 열심히 만든 만큼 ! 많이~ 잘 써주셨으면 기획자로서 너무 기분이 좋을 것 같아요~! (꾸벅)
다양한 정보와 기능이 결합된 복잡한 페이지를 디자인한다는 것
🎤상품 상세페이지 UX 디자이너 Bora Shin님 Says
상품 상세페이지는 다양한 정보와 기능이 결합된 복잡한 페이지로서, 디자인에 앞서 많은 고민이 있었어요.
기존 상품 상세페이지에서는 정보의 과부하와 동선 연결 부재로 인해 이탈률이 높은 문제가 있었고, 이를 해결하기 위해 간결하고 직관적인 레이아웃을 적용하여 흐름있는 상품 탐색과 흥미를 유발하는 것을 주요 목표로 설정했어요.
페이지를 크게 상/하단으로 나누어, 상단에서는 주요 구매 요소를 강조하고, 하단에서는 관련성 높은 추천 상품과 추가 정보에 접근할 수 있도록 구조를 최적화했습니다.
시각적 요소도 이에 맞게 재정비 되었는데요.
핵심 정보는 직관적인 아이콘과 한정된 컬러를 활용하여 빠르게 인식할 수 있도록 하면서도, 최소한의 사용으로 상품 이미지와 기술서의 주목도를 높이고, 장바구니 담기, 구매하기와 같이 고객의 행동을 유도하는 CTA* 버튼을 보다 강조하고자 했어요.
*CTA : Call to Action, 사용자에게 특정한 행동을 취하도록 유도하는 역할
또한, KBF*와 세일즈 메시지 등 구매 결정에 도움이 될 수 있는 요소에는 마이크로 인터랙션을 도입하여 페이지에 생동감을 부여했어요.
*KBF, Key Buying Factor : 구매 결정에 영향을 미치는 주요 요소
추천 상품 영역에서는 유사 상품 추천에 2단 스와이프를 도입하여 더 많은 상품을 탐색할 수 있도록 하였고, 스타일링 추천에서는 룩북과 같이 이미지를 중점으로 강조하는 등 추천 기준에 따른 UI를 적용했어요.
브랜드관과 연계된 방송 프로그램 게이트를 노출하여 확장된 탐색을 제공함으로써 사용자의 활동성을 높였어요.
이번 프로젝트를 통해 고객이 원하는 정보를 빠르게 찾을 수 있도록 하는 동시에, 쇼핑 경험을 더욱 흥미롭게 만들기 위한 노력을 기울였어요. 앞으로도 데이터 검증과 피드백을 반영하여 지속적인 개선을 통해 더 나은 서비스를 제공하겠습니다.
상품 상세페이지 개발, 기술 부채까지 해결해 나가며
🎤상품 상세 Front-end 개발자 상상상님 Says
프론트 개발 영역에서 상품 상세페이지 개선의 메인 포인트는 크게 3가지로 정리할 수 있을 것 같아요.
“개발 프레임워크의 최신화”
상품상세 프론트 영역은 레거시 중에 레거시였어요. 구 버전의 backbone.js 로 작업이 되어있기 때문에 소스 파악도 쉽지 않고, 최신 라이브러리를 적용하는데 제약도 많았어요. 그리고 그냥 돌아만 가게 하자! 느낌의 확장성이 고려되지 않은 개발 소스들.. (물론, 당시 개발자들에게는 그게 최선의 작업이었을 것입니다.. ㅜㅜ)
로컬에서 빌드 돌리면 또 왜 이렇게 오래 걸리는지… 참으로 쉽지 않은 개발환경이었답니다. 하지만 개편 작업을 통해 다수의 개발자들에게 익숙한 vue.js 개발 환경으로 전환하면서, 위 같은 이슈들을 많이 보완할 수 있었습니다. 최신 라이브러리도 적극 활용하였고, 로컬 빌드 시간도 10초 대로 개선하는 등. 개발 생산성이 매우 향상되었답니다^.^
“소스 통합 및 불필요한 로직 제거”
이번 과제를 진행하면서, AS-WAS 소스를 탈탈 분석하였는데요. 상품 상세 영역이 타 영역과의 연관도가 높은 영역이기에, 변경했을 때 어디서 어떻게 이슈가 발생될 지 모르기 때문이었죠.
기획-FE/BE 개발팀의 피땀눈물이 담긴 분석 자료를 바탕으로, 출처가 알 수 없는 불필요한 로직들은 과감하게 제거하였고, 온스타일의 일반상세와 셀렙샵의 상세를 통합하여 소스를 간소화 하였습니다.
간소화 된 소스 덕분에 내부 로직 파악이 더 용이해지고, 소스 통합으로 이중 개발을 하지 않아도 되니 개발 리소스도 더 세이브 할 수 있게 되었습니다!
“컴포넌트 구성을 통한 UI 모듈화”
이번에 저희가 프론트 영역을 설계할 때, 영역 별로 컴포넌트화하여 UI를 모듈화하는 방향으로 진행을 해보았는데요. 이는 향후에 유입 경로별 또는 고객 세그먼트별로 다른 컴포넌트 구성의 UI를 제공할 수 있는 기반을 마련했다는 점에서 의의가 있었던 것 같습니다!
더불어 안정적인 서비스를 위해 Back-end 개발자 JEFF Ahn 님의 구조 설계에 대한 고민도 아래에서 자세히 보실 수 있어요!
상품 상세페이지 개편 후, 고객 한 명당 상품 조회 페이지 수가 25% 증가했어요
송수림) 상품의 구매 결정을 지원하는 핵심 정보 노출을 강화한 결과,
- 온스타일 플랫폼 방문 고객 중 주문 고객 비중 5% 증가
- 고객 한 명당 조회하는 상품 페이지 수 오픈 전 대비 25% 증가
- 상품 페이지 내의 추천 클릭 18% 증가
- 전체 클릭이 35% 증가
결과적으로 이전보다 고객이 더 많은 상품 페이지를 조회하고, 상품 페이지로 유입된 고객의 활동성도 증가한 것을 확인 할 수 있었어요.
하지만 무엇보다 가장 체감하고 있는 포인트는 온스타일의 내부 직원 분들께서 상품의 고객 리뷰나 진행 중인 프로모션, 편성 정보, 배송 정보 등 상품정보가 이전보다 훨씬 눈에 잘 들어온다고 해주시는 부분이에요^^
그리고 노후 된 기술을 최신화 하고 구조를 개선함으로써 앞으로 보다 안정적으로 서비스를 제공하고, 변화에 신속/유연하게 대응할 수 있을 것으로 기대합니다.
