여기어때 UI/UX 어때?

여기어때는 이번년도(2023년)에 UI/UX를 약 3개월간 카드UI를 플랫폼 통틀어 일관성을 만들어내기 위해 문제 정의부터 AS IS와 TO-BE로 A/B테스트까지 마쳤다. 이 UX 솔루션은 성공적이었고 구매전환율과 매출이 상당한 수치로 올랐다.

여기어때 UX 팀에서는 수 많은 A/B테스트를 통해 "사용자에게 불필요한 정보는 제거하고, 필요한 정보만 강조하면 사용자 구매 경험에 긍정적인 영향을 미쳐 구매전환율과 매출 상승에 도움이 된다."라는 인사이트를 얻었다고 한다. 이를 통해 두 가지 목표를 가지고 선행 프로젝트를 진행하였다.

1. 여기어때 플랫폼의 다양한 서비스를 포용할 수 있는 일관성을 만들어 낸다.
2. 여기어때 카드 UI의 근본적인 사용자 문제 해결을 한다.

이 팀은 벤치마킹을 통해 문제점을 정의하고자 하였다. Booking과 Airbnb라는 두 사이트를 비교해 보았다. Booking은 사용자들이 최대한 많은 정보를 흡수하게 하여 구매 결정을 한 후에 상세페이지로 진입을 유도하게 하는 반면, Airbnb는 주요 정보만을 파악하여 더 많은 숙소 상세페이지로 유도하는 것이 목표였다는 결론이 나왔다.

여기어때는 기존에 실행하였던 A/B테스트에서 작은 개선들은 실패한 반면, 상세페이지에서의 실험들은 비교적 성공이 많은 것을 보아 여기어때 사용자들은 리스트화면보다는 상세페이지에서 더욱 집중을 한다고 판단하였다. 그러므로 여기어때 사용자는 대부분 리스트화면에서 보다는 상세페이지에서 구매결정을 내리며 리스트화면에선 빠르게 숙소간의 비교를 한다는 결론을 내리게 되었다.

상품 리스트에서 제휴점의 주요 정보를 빠르게 인지할 수 있게 전달하여 고객이 원하는 숙소를 쉽게 판단할 수 있게 한다.

 

여기어때의 UI/UX 분석하기

위에서 간단하게 여기어때의 개선 과정과 목표, 고민들을 살펴보았다. 이를 참고하여 어떻게 개선되었는지, 어떤 특징을 지녔는지를 분석해보겠다.

1. 웹 메인페이지

메인페이지의 상단 사진은 놀러가는 사람들에게 시원하고 푸릇한 이미지를 심어주기에 충분한 이미지를 가로로 꽉 채워 넣었다. 깔끔하고 단순한 카드 UI에서 느낄 수 있는 심심함을 채워주는 역할을 하기에 충분하다.

A) GNB와 Topbar 비교 분석하기

무신사 GNB와 Topbar

서핏  GNB와 Topbar

여기어때  GNB와 Topbar

위 세 개의(여기어때, 무신사, 서핏) GNB와 Topbar를 보면 여기어때와 서핏은 비슷하고 무신사는 조금 다르다. 스토어 특성상 이벤트와 제품관련 정보가 많기 때문에 GNB에서 많은 정보를 노출시키는게 보통이다. 서핏은 반대로 사람들이 올린 글을 볼 수 있는 사이트로 많은 정보가 필요하지 않아 탑쪽은 깔끔하게 유지를 하였다. 검색창이 뒤에 커다란 이미지 위에 위치하다는 것이 이목이 집중된다. 하지만 이상하게도 여기어때는 서핏과 비슷한 형태를 띈다. 그만큼 정보를 덜어냈다는 것을 알 수 있다. GNB에는 이벤트와 고객센터, 로그인 정보를 제외한 어떠한 정보도 넣지 않았다.

검색창 위에는 4글자씩 정렬까지 맞춰 깔끔함에 한 숟가락 더 얹는 텍스트를 사용하였다.

검색 전에 큰 카테고리로 국내와 해외로 나누었고 선택된 사항을 눈에 띄게 색+굵기+밑줄까지 사용하여 크게 강조하였고 그 외는 모든 사항에 반대로 적용되었다.

카테고리와 검색창은 얇고 연한 선으로 구분되어 있다. 검색창은 날짜와 인원 선택기, 그리고 검색 버튼과 같이 나열되어 있다. 기본적으로 연한 박스에 좀 더 진한 아이콘들이 위치하여 어떤 기능의 버튼들인지를 알 수 있게 하였고 검색창 안에는 어떠한 내용을 검색하는지 알 수 있게 힌트 텍스트를 연하게 넣었다. 

검색창을 클릭해도 힌트 텍스트는 유지가 되지만 배경색이 밝아지고 스트로크가 생겨 선택하고 있음을 강조하여 알려준다. 검색순위가 밑에 리스트로 보여져 사용자가 현재 여행 인기도를 실감날 수 있게 하였고 동시에 선택하기 편하게 하였다.

날짜 선택기는 한 번에 두 달 치 값을 보여주어 여행일자가 다음달로 넘어가도 큰 불편함을 느끼지 않도록 하였고 이 점에서 사용자 입장에서 많은 고민을 한 것이 느껴진다. 금일은 숫자 밑에 점으로 표시가 되고 선택된 날짜는 파란 원으로 표시 된다. 지난 날짜는 선택할 수 없기에 연하게 처리되고 선택할 수 없다. 

선택된 날짜는 파란원으로, 기간은 연한 선으로 길게 이어져 보이게 한다. 

일자를 선택하는 것과 마찬가지로 월자를 선택하는 것도 뒤로가기는 선택이 안 되며 연하게 표시되었다. 반대로 미래로 가는 아이콘은 진하게 표시되었다.

검색창과 카테고리가 그랬듯이 날짜와 기간은 얇고 연한 선으로 구분되었다. 출발과 복귀 일자보다 갔다오는 기간을 중요시 생각하는 사용자들의 마음을 읽은 듯이 (N박)을 굵은 글씨로 표시하였다.

B) UI카드 분석하기

많은 카드를 이벤트, 국내, 해외, 인기 등등으로 나누어서 횡스크롤로 정리하였다.

카드UI의 단점은 많은 정보를 담기 힘들다는 것이다. 그 단점이라고 하기에 무색할 만큼 여기어때는 카드 UI에 필요한 정보만을 담아 깔끔하게 표현하였다. 이미지마저 중요한 부분만 잘라서 집어 넣었다.

여행지에 관해서는 여행지의 핵심 명소의 이미지를 사용하였고 바다, 하늘, 나무 등의 자연요소가 들어가 시원함과 청량감을 주었다. 텍스트는 지역 이외에 모든 것을 제외하여 카드 자체가 카테고리가 되게 하였다. 이 점이 굉장히 독특하다고 느껴졌다.

스크롤 끝에는 다음 카드를 보여주는 버튼이 있고 X축으로 Shadow를 적용하여 누를 수 있음을 강조하였다.

여기어때의 로딩화면은 dim처럼 어둡진 않지만 흐리게 처리하여 사용자에게 최소한의 정보를 보여주어 심심하지 않게 하였다.

보통 웹사이트는 12그리드를 사용하기에 카드UI의 배치가 앱에 비해서 적용하기 쉽고 보기 편하다. 이 점을 극단적으로 잘 활용한 예시로 여기어때가 될 수 있겠다. 카드가 6개일 때는 한 카드에 2개의 컬럼이, 4개일 때는 개당 3개의 컬럼이 차지된다.

2. 제품 카드UI와 상세페이지

지역 카테고리 카드를 클릭하면 위와 같은 화면이 나온다. 지역이 얼추 정해졌으니 본격적으로 숙박시설에 대한 정보가 나오게 되고 왼쪽에는 여러 필터와 태그가 나와있다.

왼쪽 라디오버튼에서 원형 버튼은 마우스 커서가 바뀌면서 클릭할 수 있음을 알려주지만 텍스트는 클릭이 됨에도 불구하고 마우스 커서가 텍스트를 클릭할 때의 커서로 바뀌는 것이 아쉽다.

기본적인 카드 UI는 깔끔하다. 호텔명, 이름, 가격을 중심으로 부가적인 내용을 다 뺐기 때문이다.

여기어때는 다른 숙박 예약 사이트와 다르게 뒤로가기 버튼이 따로 없다. 대신에 카드마다 새로운 창으로 계속 볼 수 있게 되는데 이 점이 오히려 숙박 시설을 고를 때 좋은 것 같다. 카드를 여러장 뽑고 돌려가면서 볼 수 있기 때문이다. 오히려 하나의 창에서 들어갔다 나왔다를 반복하는 것보다 여러 창을 띄우고 보는 것이 훨씬 빠를 것 같다. 

숙박시설을 선택해서 상세페이지로 들어가게 되면 커다란 이미지들이 보이게 되는데 메인 이미지 하나와 부가적인 이미지 4개가 1:1 비율로 보인다. 바로 밑에는 리뷰수와 별점으로 신뢰도를 보여주고 있다.

가격적으로 예민한 숙박 서비스지만 할인율을 최소한으로 보여줌으로써 최종가격이 돋보이고 복잡해 보이지 않는다.

 

여기어때의 컨셉은 어떠한가?

야놀자 VS 여기어때 

 

야놀자는 여러 정보가 불규칙하게 나열이 되어 있는 것에 반하여 여기어때는 지역 하나로 화면 전체를 하나의 카테고리로 보여주고 있다. 그렇기에 1차원적인 생각으로 접근할 수 있게 되고 사용자들은 고민 없이 원하는 지역이나 다른 원하는 목적지에 불편함 없이 빠르게 접근할 수 있게 된다. 카드UI로 모든 것을 표현해내는 컨셉은 양날의 검이다. 불필요한 정보를 빼내는 과정에서 필요한 정보까지 빼어버리면 불친절하게 느껴질 수도 있기 때문이다. 모든 카드들의 방향이 정해져 있고 그 방향에 따라 알맞은 필터들이 규칙적으로 들어가 사용자들이 하나를 알면 열을 수행할 수 있게 설계하였기 때문에 적은 정보로도 많은 것들을 핵심적으로 전달할 수 있게 하였다.