PMB12 W5D3 & 4 호텔스닷컴 A/B 테스트

---

 

 호텔스닷컴

 

 예전 여행사에서 일할때 여러 호텔 중개 서비스 중에 가장 많이 사용했던 서비스이다. 호텔스닷컴외에 트리바고, 호텔스컴바인 등 여러 다른 서비스들이 훨씬 UX,UI 부분이 뛰어나서 사용하기 편하지만 호텔스닷컴에서 제공하는 단 한가지 장점 때문에 불편함을 감소하더라도 지금까지 쓰고 있는 프로덕트이다. 예전이나 지금이나 왜 UI를 개선하지 않는지는 모르겠지만 오늘은 호텔스닷컴의 웹 랜딩페이지를 하나하나 분석하면서 개선 할 점을 나열해보고자 한다.

---

W5D3

 

1. 호텔스닷컴 랜딩페이지 분석

 

랜딩페이지: https://kr.hotels.com/

 

2. 랜딩페이지 분석단계

 

1단계  CTA - 검색

2단계  CTA - 앱 다운로드

3단계  CTA  - 호텔스닷컴 둘러보기

4단계  설명 - 안심하고 즐기는 여행

5단계  CTA - 지금 가입/ 로그인

6단계  CTA - 지금 예약

7단계  설명 - 정보고지

 

 

랜딩페이지는 신규 유저의 첫 이미지인 만큼 중요하다.

호텔스닷컴은 앱에 비해 웹 페이지는 깔끔하지 못하고 부자연스러운 점이 여러군데 보인다. 전체적으로 특색이 없고 분명 이미지가 있지만 글 같이 단조로운 느낌이 강하다.

특히 호텔스닷컴의 시그니처컬러인 레드를 잘 사용하지 못하고 중요한 CTA 버튼들은 파란색으로 되어 있어 심미적인 부분에서 상당히 거슬린다.

호텔스닷컴은 전체적으로 통일감있게 개선하고 강조되어야 할 부분은 확실하게 강조하여 신규 유저가 유입 될 수 있도록 개선되어야 한다.

 

1단계 (CTA : 검색 )

메인 카피: 숙소 검색
CTA 카피: 검색

1단계는 호텔스닷컴의 주요 기능인 숙소 검색할 수 있는 단계로 간단하고 간결하게 되어있다.

 

개선점

•  체크인 날짜, 체크아웃 날짜를 좌우 클릭 통해서만 설정할 수 있는데. 여행을 미리 계획하는 얼리어답터 성향의 유저 같은 경우 한참을 클릭해야 하는 번거로움이 있을 수 있다. 기입하는 형태로 개선되어야 한다.
•  인원수도 - 와 + 클릭으로만 설정할 수 있는데 숫자를 직접 기입하는 기능도 개선되어야 한다.

 

2단계 (CTA : 앱 다운로드 )

메인 카피: Hotels.com 앱 이용시 장점
서브 카피: 쉽고 간편한 다운로드를 위해 앱 다운 링크 보내기
서서브 카피: 추가 10% 할인된 가격을 바로 확인하실 수 있어요.
                     10박을 숙박할 때마다 리워드 1박*을 적립해 드려요.
                     언제 어디서나 검색 및 예약하고 할인 받으실 수 있어요.
CTA 카피: 앱 다운 받기

호텔스닷컴 첫 랜딩페이지에서 좋은점은 들어가자마자 앱 다운로드 액션을 위한 QR 코드 스캔 기능과, 핸드폰으로 앱 스토어에 들어가지 않고도 랜딩페이지에서 링크를 보낼 수 있다는 점이다.

 

개선점

• 호텔스닷컴 앱 이용시 장점은 유저가 이 서비스를 이용하는 이유이고, 새로운 신규 유저에게 어필을 해야되는 부분이기 때문에 심플하게 임팩트있게 개선한다.

 

3단계 (CTA : 호텔스닷컴 둘러보기 )

메인 카피: 내가 찾던 여행, 그곳에
서브 카피: 마음에 딱 맞는 옵션을 찾으실 수 있도록 호텔스닷컴에서 도와드릴게요.
                 완벽한 곳에서 최고의 휴가를 즐겨보세요.
CTA 카피: 호텔스닷컴 둘러보기

 

개선점

• 글자 자간 개선: 호텔스닷컴은 전세계에서 쓰는 서비스이여서 언어 변환하는 과정에서 글자 자간이 안 맞게 되어 메인 카피인 '내가 찾던, 그곳에' 도 서브 카피 문구도 어색하다. 이 부분 디자인적으로 개선해야 한다.

 

4단계 설명 

 

개선점

• 코로나이후 중요하게 고려되는 부분임에도 강조되지 않고 눈에 띄지 않기 때문에 정확하게 유저에게 전달 될 수 있도록 개선해야 한다. (사진이나 이미지 첨부)

 

5단계 (CTA : 지금 가입/ 로그인) 

메인 카피: Hotels.com Rewards
서브 카피: 비밀 가격 이용! 10% 할인 혜택
                 10박을 숙박할 때마다 리워드*1박
                 전 세계 100만 개 이상 숙박 시설에 리워드 적립
CTA 카피: 지금 가입, 로그인

개선점

• 랜딩페이지 하단에 위치: 호텔스닷컴에서 숙소예약만큼 중요한 CTA인데 하단에 위치하고 UI를 개선하여 강조 되게 개선이 필요하다.
• 호텔스닷컴 리워드 설명 옆에 이미지가 상당히 촌스럽다 이 부분도 개선하면 좋을 것 같다.

 

6단계 ( CTA: 지금 예약)

메인 카피:다음 여행을 계획해 보세요!
서브 카피: 회원님께만 드리는 비밀 가격 혜택을 바로 누리세요!
                 엄선된 숙박 시설을 더욱 저렴하게 이용하실 수 있어요
CTA 카피: 지금 예약

개선점

• 비밀 가격 혜택으로 누릴수 있다고 추천 기능인데, 화면 옆이 너무 비어있어서 안정되지 못한 느낌이든다.. 더 많은 이미지와 구성으로 다 채워줘서 랜딩페이지를 봤을때 심미적으로 안정감을 주게 개선하면 좋을것 같다

 

7단계 정보 고지

 

---

W5D4

 

호텔스닷컴의 랜딩페이지 A/B 테스트를 설계하기전에 경쟁사 플랫폼의 랜딩페이지를 분석해보자.

첫번째 화면은 스카이스캐너, 두번째는 호텔스컴바인, 세번째는 부킹닷컴이다.

이 3개의 플랫폼도 호텔스닷컴과 마찬가지로 전세계 유저를 대상으로하는 글로벌 플랫폼이며, 플랫폼의 고유의 메인 컬러를 잘 이용하여 깔끔하게 랜딩페이지가 설계되어있는것을 볼 수 있다. 

그렇다면 호텔스닷컴의 랜딩페이지와 비교를 해보자.

호텔스닷컴 랜딩페이지는 많이 단조롭다라고 해야할까? 개인적으로 호텔스닷컴 랜딩페이지를 보면 다른 서비스를 이용하고 싶어 이탈하고 싶을만큼 랜딩페이지가 매력적이지 않다.

랜딩페이지를 어디서 부터 고쳐야 할까...프로덕트 매니저의 중요한 역량 중에 하나가 우선순위 정하기이다.

근거에 의해서 우선순위를 정해야하는데 어떤 부분을 A-B 테스트를 해야 랜딩페이지 내에서 핵심 CTA 률이 증가할까?

호텔스닷컴의 가장 중요한 핵심은 무엇일까? 1단계인 CTA 검색과 호텔스닷컴의 타 서비스와 다른 장점 호텔스닷컴리워드 서비스 부분일 것이다.

따라서 이번 과제에서 1단계 CTA 검색 AB 테스트와 5단계인 CTA 가입하기 호텔스닷컴리워드 AB 테스트 이렇게 2 가지를 설계하려고 한다.

 

A-B 테스트는 한번에 한 가지 씩만 테스트 하는것을 원칙으로 하기 떄문에 첫번째 우선순위로 정한  5단계인 CTA 가입하기 호텔스닷컴리워드 AB테스트를 먼저 진행한 뒤 1단계 CTA 검색 AB 테스트 진행하는걸로 하려고 한다.

 

랜딩페이지- 호텔스닷컴 리워드 AB테스트

기존 호텔스닷컴 리워드

A-B테스트를 위한 호텔스닷컴 리워드

 

As is	To be
호텔스닷컴 리워드 내용과 이미지가 맞지 않음	이미지와 내용을 적합하게 변경하여 유저에게 호텔스닷컴 리워드 혜택을 어필한다.

 

A-B 테스트 설계 (랜딩페이지- 호텔스닷컴 리워드)

설계단계	내용
가설	호텔스닷컴 리워드 혜택이 강조되면 신규 고객이 더 늘어날 것이다.
목표	호텔스닷컴 리워드 혜택의 장점을 분명하게 나타내 이 혜택으로 인해 더 많은 신규 유저를 확보한다.
기간	7일 (6월1일~6월7일)
대상	기간 내 랜딩페이지를 방문한 이용자 2000명 이상
A그룹_대조군	신규 디자인에 노출되지 않는 이용자 (=기존 화면)
B그룹_대조군	신규 디자인에 노출되는 이용자
측정지표	회원가입률, 적립현황보기 클릭률
스케줄	1일차: 관계자 내용 공유, 태스트 대상자 분류, A/B 테스트 셋팅
스케줄	2일차~6일차: 테스트 릴리즈, 핵심지표 트래킹
스케줄	7일차: 최종 데이터 분석 및 결과 공유, P-Value 값 확인, A/B 테스트 리뷰 및 회고, 실전 반영

 

랜딩페이지- 호텔스닷컴 랜딩페이지 처음 브랜드 광고

기존 랜딩페이지 첫 상단

A-B테스트를 위한 호텔스닷컴 첫 상단

 

As is	To be
홈페이지 딱딱하고 낮설어서 브랜드 이미지가 떨어진다.	광고모델을 넣어 브랜드 친근한 이미지로 다가간다.

 

A-B 테스트 설계 (랜딩페이지- 첫 상단)

설계단계	내용
가설	익숙한 브랜드 이미지를 추가해서 고객에게 더 친근한 느낌을 줘서 체류 시간이 증가할 것이다.
목표	광고 배너를 추가한다 (TV 광고 동영상 또는 광고모델)
기간	7일 (6월10일~6월17일)
대상	기간 내 랜딩페이지를 방문한 이용자 2000명 이상
A그룹_대조군	신규 디자인에 노출되지 않는 이용자 (=기존 화면)
B그룹_대조군	신규 디자인에 노출되는 이용자
측정지표	체류 시간 / MAU / DAU
스케줄	1일차: 관계자 내용 공유, 태스트 대상자 분류, A/B 테스트 셋팅
스케줄	2일차~6일차: 테스트 릴리즈, 핵심지표 트래킹
스케줄	7일차: 최종 데이터 분석 및 결과 공유, P-Value 값 확인, A/B 테스트 리뷰 및 회고, 실전 반영

---

W5D4 그룹토론을 호텔스닷컴을 주제로 하게되었는데, 팀원들이 공통적으로 랜딩페이지를 보자마자 여행 갈 의욕이 떨어진다고 왜 이렇게 성의 없게 만들었지? 말해주었다.

랜딩페이지를 분석하면서 너무 다 뜯어고치고 싶어서 어디서부터 건들여야할지 모르겠다는 모두가 다 알아줬다.

팀원들과 토론하면서 AB 테스트를 하고 싶은 개선포인트들은 총 5가지였다. 

• 랜딩페이지 폰트, 글씨 자간
• CTA의 컬러 변경 (호텔스닷컴의 메인 컬러로)
• 숙소 검색 → 마이크로카피로 변경
• 보건 및 안전조치 사항 수정 - 글과 사진 첨부
• 숙박 예약 서비스 디자인 변경

이렇게 많이 개선될 부분이 있음에도, 호텔스닷컴이 오래전부터 지금까지 개선을 안한 이유가 무엇일까...?

안해도 유저의 이탈률 걱정은 없는 그 단 한가지 장점 리워드 때문일거란 생각이 든다.

단 하나의 훅킹 포인트가 있으면 불편을 감수하고 이탈할 수 없는...나 처럼 몇년째 이 서비스를 이용하겠지..?