여기어때 홈 카드 개선기 (1)
Summary
클릭률이 고민이라면? 카드의 '디자인' 이전에 '역할'부터 정의하라
디자인 시스템과 비즈니스 니즈를 모두 잡은 여기어때 홈 카드 개편 비하인드
홈 화면 하단 영역의 성과 저하를 극복하기 위해 여기어때 플랫폼 디자인 팀이 고민한 리디자인 여정입니다. 기존 자산인 디자인 시스템을 효율적으로 계승하면서도, 고객 여정(JTBD)과 운영 요구사항을 유연하게 조율하여 성공적인 개선의 기틀을 다진 과정을 소개합니다.
- 01클릭률 하락을 겪던 천편일률적인 홈 캐러셀 모듈의 문제 분석
- 02사용자 여정에 입각한 3대 핵심 디자인 원칙(Seamless, Discovery, Scalable) 확립
- 03기존 디자인 시스템의 '셀러카드'를 레버리지하여 효율적인 설계 구조 구축
- 04JTBD 프레임워크를 기반으로 각 홈 화면 모듈의 기능적 역할 재배치
- 05A/B 테스트를 통한 거래액 성과 측정 기반의 의사결정 프로세스 확보
RECOMMENDATION
신규 디자인 요소를 추가하면서도 기존 디자인 시스템과의 정합성과 운영 리소스를 동시에 고려해야 하는 디자이너와 프로덕트 오너에게 훌륭한 템플릿을 제공합니다.
The Problem
여기어때 홈 화면의 ATF 하단 상품 및 혜택 탐색 영역에서 캐러셀 카드들이 일률적인 형태로 반복되어 클릭률이 하락하고 있었습니다. 숙소와 항공 등 상품마다 정보 탐색 기준이 다름에도 동일한 형태로 노출되어 특색을 살리지 못하는 한계가 있었습니다.
The Solution
모듈의 외관 디자인에 앞서 각 영역의 역할을 JTBD 관점에서 재정의하고 Seamless, Discovery, Scalable이라는 세 가지 목표를 수립했습니다. 효율성과 일관성을 위해 기존 디자인 시스템의 '셀러카드'를 기반으로 확장 가능하도록 개발 및 운영 요구사항을 절충하여 설계 방향을 마련했습니다.
The Result
개선의 실질적인 가치를 증명하기 위해 신규 모듈 도입 시 상품 거래액(GMV) 등의 지표가 향상되는지를 측정하는 A/B 테스트 검증 체계를 수립했습니다.
Trade-off
기존 디자인 시스템 자산인 '셀러카드' 구조를 최대한 유지하고 활용하면서 새로운 유연성을 찾아야 했기 때문에 완전히 파격적인 레이아웃이나 단독 컴포넌트를 자유롭게 시도하는 데에는 제약이 따랐습니다.
