모바일 상품 목록 UX/UI 리뉴얼
데일리호텔(DAILYHOTEL) 상품 목록 UX/UI 리뉴얼 과정기
데일리호텔 앱의 구매율을 이전 보다 더 높이기 위해 구매 전환 높이기 프로젝트를 프로덕트 팀에서 진행하고 있습니다. 그중 최근에 구매 전환과 엮여 있는 업장 목록 디자인 개편을 진행하게 되었습니다.
업장 목록 화면은 데일리의 ‘파트너사’와 ‘구매자’를 동시에 고려해야 하는 만큼 매우 중요한 화면입니다. ‘파트너사’가 제공하는 업장 정보와 사진을 최대한 구매자가 사고 싶게끔 노출해야 하며, ‘구매자’ 또한 상품을 선택하는데 있어 주요 정보를 쉽고 빠르게 물 흐르듯 탐색할 수 있어야 합니다.
Research & Discovery
리뉴얼 하기 전에 앞서, 기존 목록 데이터 분석을 통해 현 문제점을 파악하는 동시에 구매 전환율에 영향을 미치는 정보 등 필요한 데이터 수집을 토대로 어떻게 목록 개편을 할 것인지에 대한 방향을 PM과 디자이너가 함께 잡아갔습니다.
리서치를 통한 목록 개편 방향 결정1. (Usability 증대) 상품 가독성을 높혀 목록 탐색을 더 유도한다.
기존 디자인은 서비스 초창기 때부터 있던 목록 이미지 위 정보가 제공되던 형태였습니다. 서비스 초기 때는 보여줄 호텔 정보들이 많지 않아 정보가 별로 없었지만, 서비스가 고도화되면서 상황에 따라 하나둘씩 정보가 급하게 추가됨으로 인해 구성 요소 그룹핑 또한 어긋나기 시작하였습니다. 디자인 리뉴얼을 하기 전 기존 + 신규 요소의 정보 우선순위를 재정의 하는 시간을 가졌습니다. 구성 정보 재나열 후 중요도에 따른 우선순위를 두며 강약 조절을 이번 목록 개선때 디자인적으로 하기로 하였습니다.
(Left: 데일리 초창기 목록 화면 (photo credit: emily) / Right: 이번 목록 업데이트 전 기존 목록 화면)디자인 개선을 하려다 보니 목록 UX는 프로덕트 팀 혼자만이 해결할 수 있는 문제는 아니었습니다. 회사 내 영업팀인 파트너팀에서 신규 업장이나 혜택이 있을 경우 호텔명 앞에 상품 셀링을 위해 추가로 정보를 강조하여 표시해주다 보니 업장명이 명확하게 인지가 되지 않고 전광판처럼 흐르는 현상이 생겨 가독성이 좋지 않은 상태였습니다.
또한 혜택 영역에 과한 특수문자 입력으로 인해 서비스의 퀄리티가 낮아 보일 수 있어 이번 기회를 통해 가이드라인을 만들어 목록 개선 때 포함시키게 되었습니다. (이 부분은 담당 PM이 파트너팀과 열심히 커뮤니케이션 해주었습니다.)
기존 목록 문제점 (전광판처럼 흐르는 업장명, 혜택란에 과한 특수문자 표시)이렇게 의사소통하는 과정에서 파트너팀의 니즈들을 다시 한번 파악하게 되어 (신규 업장임을 알리고 싶은 부분과 혜택을 강조하여 표시해주고 싶은 부분 등) 목록 리뉴얼 때 더 좋은 방향으로 니즈를 디자인적으로 반영하여 풀기로 하였습니다.
2. (CVR 상승) 리뷰 개수, 쿠폰 및 할인율을 노출하여 상품을 선택하는데 있어 도움을 준다.
구매 전환에 도움이 될 수 있는 정보들이 있음에도 불구하고 목록에 제대로 노출을 해주고 있지 못하고 있어 이번 기회에 CVR 상승 요소들을 추가하기로 하였습니다. 기존 목록을 보면서 보이는 문제점들을 먼저 파악을 하였고 전환율에 영향을 미치는 데이터를 담당 PM이 리서치하여 공유를 해주었고 얻게 된 인사이트를 바탕으로 리뉴얼을 진행하기로 하였습니다.
즉시할인쿠폰 — 업장에 따라 즉시 할인쿠폰을 노출하고 있는데 혜택 영역과 함께 섞여 나오다 보니 묻히는 현상이 있었습니다. 쿠폰을 실제로 사용자들이 많이 사용을 하고 있는지 그리고 쿠폰 사용자의 재구매 패턴들을 분석하였고 쿠폰을 사용한 고객의 평균 구매주기는 쿠폰 미사용자보다 짧고 구매 횟수는 더 많다는 인사이트를 얻게 되어 목록에 명확한 쿠폰 형태로 쿠폰 금액을 노출해주기로 하여 CVR 상승 및 재구매 주기 단축을 기대해보기로 하였습니다.
기존 목록 문제점 (혜택란과 섞여 나오는 즉시할인쿠폰)할인율 — 정가와 최종 금액만 목록에 노출을 해주고 있어 할인율이 얼마인지 확인하기가 어려워서 데일리호텔의 가격이 합리적인지 판단하기가 어려웠습니다. 앞으로도 합리적인 가격으로 고객들에게 더 좋은 경험을 선사해야 하기 때문에 가격에 대한 강조를 위해 할인율을 표시하기로 하였고 CVR 상승이 일어나는지 확인해보기로 하였습니다.
기존 목록 문제점 (정상가와 최종금액만 노출. 얼마나 할인됬는지 감이 안옴.)리뷰개수 — 목록에 만족도는 노출이 되는데 서비스의 주요 기능인 트루리뷰 정보가 노출이 되고 있지 않아 업장 상세화면 들어가기 전까지 확인이 불가능했습니다. 만족도도 중요하지만 고객들이 트루리뷰에 의지를 많이 하는 편이고 리뷰개수와 판매의 상관관계를 데이터를 통해 확인하여 만족도와 함께 트루리뷰 개수를 목록에 노출해주어 CVR 상승을 기대해보기로 하였습니다.
기존 목록 문제점 (만족도만 노출)Design & Outcome
2017년 초 데일리 홈 화면 개편을 시작으로 어둡고 무거워 보이던 디자인에서 벗어나DAILY Brand Design Principle에 맞춰 가벼우면서 심플한 디자인으로 다양한 화면들을 개선하며 이렇게 목록 화면까지 개선하였습니다.
2017년 초반에 개선된 홈 화면
2017년 중/후반에 개선된 예약내역 화면
2017년 후반에 개선된 목록화면 (예시 화면: 홈 추천 화면)1. 가독성 이슈 해결
한눈에 주요 정보를 소비할 수 있도록 이미지와 텍스트를 분리하여 시각적 자극을 최소화하여 목록 탐색을 유도하였고 구성 정보 요소들 간 Visual Hierachy에 신경을 쓰며 업장명과 가격 및 특가 정보에 강조를 두었습니다. 업장들마다 좋은 혜택들이 많지만 기존에는 혜택 영역이 사진 위에 노출이 되다 보니 가독성이 떨어져 그냥 지나치기 쉬웠다면 혜택 영역을 따로 마련하여 가독성을 높였습니다.
기존 목록 화면 (국내 스테이, OB 스테이, 고메)
새로운 목록 화면 (국내 스테이, OB 스테이, 고메)2. CVR 상승 요소 추가
신규 스티커 — 파트너팀에서 기존에 신규 업장을 알려야 할 경우 업장명 앞에 [신규]라고 직접 수기로 입력해야 했기에 운영 이슈를 최소화하기 위하여 신규 오픈 일 이후 특정 기간까지만 ‘신규’ 딱지를 자동으로 노출해주도록 스티커 형태로 디자인 개선을 하였습니다.
신규업장 스티커할인쿠폰 표시 — 혜택 영역에 혼재되어 나오던 쿠폰 정보는 따로 빼서 가격 정보 옆에 즉시 할인 가능한 금액이 적힌 쿠폰 형태로 디자인하여 노출하였습니다.
이에 맞춰 업장 상세 화면에서도 명확한 쿠폰 금액을 노출하여 쿠폰 다운로드를 유도하도록 개선을 하였습니다. 배포 이후 전반적으로 쿠폰 다운로드 비율이 증가하였고, 특히 쿠폰이 노출된 업장을 통해 쿠폰 다운로드 후 결제 완료로 전환되는 비율이 높은 폭으로 증가하였습니다.
업장상세 화면 (쿠폰 금액 강조) + 트루리뷰만의 영역 생성할인율 표시— 할인율이 실제 CVR 전환에 도움이 되는지 확인하기 위해 이번 목록 개선 때 금액 영역 앞에 노출하였습니다.
할인율 표시리뷰개수 표시— 새로 추가되는 리뷰 개수는 만족도와 함께 이미지 위 부가정보로 나열하였습니다. 국내와 달리 OB 스테이 상품 같은 경우 아직 트루리뷰가 없는 상황이라 해외여행 시 여행자들이 많이 참고하는 트립어드바이저 평점을 대신 노출해주었습니다.
배포 후 전체 트루리뷰 상세 확인 트렌드 대비 목록에 트루리뷰가 노출된 업장에서 트루 리뷰를 보는 비율이 더 높았고 트루리뷰가 있다는 인지와 리뷰 확인에는 효과가 좋은 것으로 판단되었습니다.
위시리스트 표시 — 데일리호텔 앱을 통해 상품을 위시리스트에 추가를 하려면 업장 상세화면 그리고 목록 화면을 길게 눌렀을 경우 뜨는 픽앤팝 이렇게 2가지 방법이 있습니다.
실제로 위시리스트를 사용하는 비율이 높은 편이므로 이번 목록 개선 때 사용 편의성을 위하여 업장 상세 들어가기 전에도 목록에서 위시리스트를 설정할 수 있는 UI를 추가하였습니다. 배포 후, 위시리스트를 설정할 수 있는 통로가 하나 더 늘어 수치가 약간은 분산은 되었으나 종합적으로 봤을 때는 위시리스트 설정 수가 증가하였습니다. (OB 스테이는 아직 위시리스트 기능이 없습니다.)
위시리스트 추가하는 통로 (기존: 픽앤팝, 업장상세 + 신규: 업장 목록)마치며
이번 상품 목록 개선은 단순 GUI 개선뿐만 아니라 사용성 개선과 구매 전환율 상승에 많은 포커스를 두었던 프로젝트였습니다. 데일리 앱의 80%가 목록 화면으로 구성되어 있다 보니 디자인 개선을 하면서 정말 많은 고민을 하며 작업하게 된 결과물입니다.
안드로이드, iOS 둘 다 배포한지 얼마 되지 않아 배포 전후 모수가 달라서 정확하게 비교할 수는 없지만 트렌드로 보았을 때 배포 이후 우상향으로 상승하는 추세이고 계속 지켜보고 있습니다. 배포 후 데이터를 바탕으로 지속적으로 보완하여 사용자들에게 더 좋은 상품 목록 디자인으로 계속 찾아뵙겠습니다.
데일리 Product/Tech Blog : https://dailyhotel.io/
작성자 : Product팀 Rachel Kim
