해외여행의 시작과 함께한 여기어때 해외 숙소 UX

글. 한혜진(Pixie) / UX Designer

<UX팀의 새로운 문화 속에서 만들어지다>

안녕하세요. 여기어때 Product UX 팀 UX Designer한혜진(Pixie)입니다.

올해는 디자이너로서 여러모로 특별한 시기였습니다. 2022년도 상반기 여기어때는 해외여행 사업을 시작했는데요. 해외여행의 주요 사업 중 하나인 ‘해외 숙소’ 프로젝트를 담당하게 되었습니다. 그리고 제가 속한 UX 팀엔 새로운 리드 분이 합류하시면서 팀에 큰 변화들이 생기고, 팀의 규모가 빠른 속도로 커지는 것을 겪었어요.

해외 숙소 예약 과정의 End-to-End를 디자인하는 큰 도메인을 맡게 된 것도 도전이었지만, 폭풍처럼 변화하는 팀 문화에 적응하며 작업 과정을 맞춰가는 것도 배움의 연속이었어요. 슬랙을 통한 디자인 리뷰, 스페셜리스트와의 협업 등 새로운 업무 방식들을 해외 숙소 UX 디자인을 하며 녹일 수 있었는데요.

이 글의 1부에서는 해외 숙소가 국내 숙소와는 무엇이 다르게 디자인되었는지, 2부에서는 폭풍처럼 변화하는 팀 속에서 8개월간 서비스를 디자인하고 런칭하며 느낀 점을 적어보려 합니다.

(1) 해외 숙소, 국내와 어떻게 다른가요?

지난 해 12월 해외 숙소 프로젝트가 킥오프했습니다. 아직 코로나가 끝나지 않았음에도 2022년도 상반기에는 여행 규제가 풀릴 거란 전망과 함께 해외여행 수요에 대한 기대감이 커지던 시기였고, 여기어때도 해외여행 비즈니스에 박차를 가하기 시작했어요.

해외 숙소 프로젝트는 여름 성수기라는 정해진 타깃 목표가 있었기에 일정에 맞춰 서비스를 무사히 론칭하는 게 중요했습니다. 또, 해외 숙소는 기존 국내 숙소 디자인의 선행 개선을 할 수 있는 좋은 기회였어요. 국내와 해외 모두 숙소를 예약한다는 큰 맥락의 User Flow는 같기 때문에 해외를 디자인하며 좋은 UX는 국내까지 공용으로 사용할 수 있도록 진행하기로 했습니다.

해외 숙소는 디자인 과정에서 캐주얼 UT(Usability Testing, 사용성 테스트)와 IDI(In-depth interview, 심층 인터뷰)를 통해 많은 인사이트를 얻었는데요. 이를 기반으로 한 해외 숙소와 국내 숙소의 차이점을 소개할게요.

해외 숙소 예약의 시작은 일정 선택

사용자가 숙소 탐색을 시작하는 국내와 해외 각각의 홈 화면입니다. 국내 숙소를 예약할 때는 서울, 부산 등 여행지를 선택하는 것으로 플로우를 시작합니다. 해외 숙소도 여행지를 선택하는 것은 같지만, 날짜를 처음부터 선택해야 한다는 게 큰 차이입니다.

디자인을 시작하기 전 지인들에게 “해외여행 갈 때 가장 먼저 무엇을 하나요?”라는 질문을 많이 했는데, 대부분 “***항공권을 예약하고 그 일정에 맞춰 숙소 예약과 일정을 계획한다”***고 대답했습니다. UT 사전 질문의 결과도 동일했는데요. 인터뷰 참여자 모두 해외여행을 계획할 때 항공권을 예약한 상태에서 해외 숙소 탐색을 시작하는 User Flow를 갖고 있었습니다.

즉, 일정은 이미 확정된 상태에서 숙소 탐색을 시작하는 것이죠. 정식 UT를 하기 전에도 해외 숙소는 ‘지역, 날짜 선택이 시작인 홈’이 좋겠다는 심증은 있었지만, 스무 개가 넘는 타사 리서치와 캐주얼 UT(UT 전 가벼운 파일럿 테스트)를 통해 확신을 갖고 정식 UT를 진행할 수 있었습니다.

캐주얼 UT로 1차 검증된 ‘여행지, 일정 선택으로 구성된 홈’으로 공식 UT를 진행했습니다. UT 진행 시 참가자들은 불편함 없이 숙소를 탐색하고, 여행지를 먼저 선택하는 것에 긍정적인 반응이었습니다. 그래서 해외숙소 홈은 여행지와 일정을 먼저 선택하는 플로우로 디자인 되었습니다.

관광지 중심으로 숙소를 탐색할 수 있게

해외 숙소 관광지 주변 필터

관광지와 가까운 숙소를 필터링해서 보여주는 ‘관광지 주변’ 필터 화면입니다. UT 사전 질문지를 통해 해외 숙소를 예약할 때 확인하는 주요 정보는 ‘위치’라는 인사이트를 확인했는데요 관광지와의 거리, 교통, 치안, 편의시설이 잘 되어있는 곳이 좋은 위치의 기준이라고 대답했습니다. 추가로, 공식 UT 때도 해외여행 시엔 숙소의 위치에 대해 국내 여행 보다 훨씬 꼼꼼하게 확인하는 경향까지 확인할 수 있었어요.

PO 분과 저는 ‘어떻게 좋은 위치의 숙소를 빠르게 제공해줄 수 있을까?’를 고민했습니다. 대부분 주요 관광지는 대중교통의 접근성이 좋고 근처에 식당 등 편의시설도 잘 되어 있습니다.

그래서 ‘인기 있는 관광지 주변의 숙소를 제공한다면 원하는 위치의 숙소를 빨리 찾을 것이다.’라는 가설을 수립했습니다.

‘관광지 주변’ 필터는 UT에선 원래 ‘인기 지역’이라는 이름으로 디자인되었는데요. 인터뷰 참가자들이 필터를 누르기 전 ‘인기 지역’이 어떤 기능인지 추측하지 못했습니다. 하지만 필터를 선택하고 나선 관광지 근처의 숙소를 찾을 수 있다는 기능을 파악하고 나니 매우 긍정적인 반응을 보였습니다.

결국 기능의 이름을 개선하기로 하고, UX Writer 분과 함께 불꽃 튀는 회의를 거쳐 ‘주요 지역’, ‘관광지 근처’ 등 쟁쟁한 이름 후보 중, ‘관광지 주변’이라는 이름을 선정했습니다. 이미 지역 검색을 마친 유저에게 기존 ‘인기 지역’처럼 지역이라는 워딩을 반복 노출하지 않고, ‘관광지’라는 기능의 특성이 직접적으로 녹아든 워딩으로 개선되었습니다.

이렇게 관광지 주변 필터는 ‘가설 → UT를 통한 검증 → 디벨롭’을 거쳐 해외숙소에 데뷔했습니다. 아직 MLP(Minimum Lovable Product)의 기능이기 때문에 관광지 주변 필터 고도화에 대한 백로그가 많은데요. 필터 기능 외에도 좋은 위치의 숙소를 빠르게 제공해주기 위한 해외 숙소 팀의 고민은 계속되고 있습니다.

결제까지 도달하는 한 단계를 더 줄였어요

국내, 해외 숙소의 객실 상세 페이지입니다. 여기어때는 객실 상세 페이지를 Room detail page(이하 RDP)로 부르고 있는데요. 국내 숙소는 전체 페이지, 해외 숙소는 바텀 시트로 제공됩니다.

현재 국내 숙소는 결제를 위해 RDP에 진입해야 합니다. 예를 들어 국내 모텔의 경우 대실과 숙박으로 결제 옵션이 두 개로 나뉘어있어, 이 옵션을 RDP에서 선택 후 예약이 가능합니다. 즉 결제를 하기위한 플로우는 지역 선택 → 지역별 숙소 리스트→ 숙소 상세 페이지 → RDP(숙박, 대실 선택) → 결제

로 구성되어있어요.하지만 해외 숙소는 대실 옵션이 존재하지 않아 RDP를 제거해 결제까지 뎁스를 줄일 수 있겠다고 생각했어요.

이를 통해 1) 다른 객실과 비교를 더 쉽게 만들어줄 수 있고, 2) 결제도 빠르게 할 수 있는 이점이 있다고 생각했죠. 그래서 해외숙소는 숙소 상세 페이지에서 결제로 바로 넘어갈 수 있는 ‘객실 예약’ 버튼을 만들었습니다.

숙소 상세 페이지에서 바로 결제 버튼으로 접근 가능하니, RDP를 간단한 형태로 바꿀 수 있을 것 같았어요. 페이지로 제공되었던 RDP를 그보다 낮은 위계인 바텀 시트 UI로 바꾸었습니다. 그리고 객실 정보와 편의시설의 정보를 바텀 시트의 상단으로 올림으로써, 객실 상세 정보를 선택했을 때 편의시설의 정보가 바로 보이도록 조정했습니다.

기존 여기어때의 국내 숙소와 다른 UX 플로우라 UT 진행 시 인터뷰 참여자가 어색하게 느끼지 않을까 했으나, 참여자 모두 자연스럽게 예약 과정을 수행했습니다. 따라서 해외 숙소의 ‘숙소 상세 페이지에서 결제까지 바로 가는 플로우도 론칭 멤버에 포함될 수 있었습니다.

(2) 새로운 비즈니스와 함께 온 새로운 팀 문화

해외 숙소 프로젝트가 기억에 남는 또 다른 이유는 새로운 UX팀 문화를 기반으로 만들어낸 결과물이기 때문입니다. 그동안 여기어때 UX 디자인팀에 정말 많은 변화가 일어났습니다. 이전엔 기획부서에 디자이너가 속해 있었지만 ‘Product UX팀’이라는 이름의 별도의 UX 디자인팀이 생겼어요.

또 디자인 시스템이 완료되고, 처음으로 UX Writer 분들이 오시고, 새로운 디자인 리뷰 프로세스가 생겼습니다. 또, 프로덕트 팀 차원에선 1 Pager를 기반으로 한 A/B 테스트 문화가 도입되어 디자이너도 실험 설계에 참여하는 일이 생겼습니다. 상반기는 바쁨을 잊을 정도로 많은 일들이 있었는데요. 그중 가장 크게 체감한 변화는 디자인 리뷰 프로세스의 구체화, 다양한 분야의 UX 스페셜리스트와의 협업이었습니다.

디자인 리뷰 시스템 = 디자인 부스터

회사가 성장하고 팀이 커지니 협업을 위한 시스템이 중요해졌습니다. 하루가 다르게 디자인 팀 내 시스템들을 보며 ‘아니 이렇게까지’라고 속으로 몰래 생각했지만, 지금은 누구보다 시스템을 잘 활용하는 사람입니다. 해외숙소 디자인에 큰 도움이 되었던 시스템은 ‘디자인 퀵 리뷰 시스템’입니다.

빠른 의사 결정이 필요할 때 퀵 리뷰 템플릿을 이용해 슬랙 채널에 업로드하면 됩니다.

퀵 리뷰 템플릿 예시

Target customer : 마음에 드는 해외숙소를 한 곳에서 쉽게 파악하고 싶은 유저

Jobs to be done

Situation : 여러 해외숙소를 비교하고 싶은 유저가

Motivation : 마음에 들었던 숙소를 한 곳에서 쉽게 파악하여

Expected outcome : 숙소의 탐색과 구매 결정을 빠르게 할 수 있다.

Hypothesis

구매 고려중인 숙소를 한곳에서 확인할 수 있으면 구매 결정에 도움을 줄 것이다.

국내 숙소와 해외 숙소 탭이 분리되어있으면 나라별 숙소 탐색이 편리하다.

제 디자인 어때요 ?😎

여기어때 UX 팀엔 일주일에 세 번 진행되는 디자인 리뷰 세션이 있는데요. 디자이너라면 누구나 신청해 디자인을 설명하고 팀원들의 피드백을 받을 수 있어요. 하지만 리뷰 세션은 시간이 정해져 있기 때문에 일정이 급한 시안은 리뷰를 받기 어려웠습니다.

해외 숙소 UX 고민을 하다 보니 생각보다 페이지가 늘어나 디자인할 거리가 많았습니다. 그래서 일주일에 세 번의 디자인 리뷰로는 시간이 부족했는데요. 디자인 맥락에 대해 공유가 되었거나, 복잡한 설명이 필요하지 않은 UI의 경우 퀵 리뷰를 통해 빠르게 의사 결정받아 개발팀에 전달할 수 있었습니다. 이는 저에게 일의 능률을 높여주는 ‘디자인 부스터’가 돼주었어요.

그런데 처음의 퀵 리뷰는 슬랙 스레드로 리뷰를 받다 보니 코멘트를 언제쯤 받을지 예상하기 어려웠습니다. 피드백 마감 시간이 없어 ‘퀵’하게 느껴지지 않았어요. 그래서 프로세스에 피드백 마감 시간을 추가하는 것을 직접 제안해 개선했습니다. 여기어때는 UX 팀은 누구나 규칙, 시스템을 만들고 개선할 수 있습니다.

디자인 외 업무 시스템을 만든다는 게 당장은 어려울 수 있어도, 갖추어 놓기만 하면 내 ‘일’에 집중할 수 있는 시간이 복리로 돌아옴을 느꼈습니다. 여기어때의 UX 팀원들은 1초라도 좋은 UX를 더 고민하기 위해 의견을 모아 업무 시스템을 고도화하고 있습니다.

다양한 UX 스페셜리스트와의 협업

해외숙소는 다양한 분야의 UX 스페셜리스트와 협업해 나온 결과물입니다. 특히 UX Writer 분들과 일하며 좋은 경험이 많았는데요. UX에 있어 글의 중요성은 진작 알았지만, 디자인 컴포넌트나 위계에 밀려 고민할 시간이 많이 주어지진 않았습니다. 라이터 분들의 합류 후 디자이너는 ‘디자인’을 라이터는 ‘라이팅’에 포커스해 UX를 고민할 수 있는 환경이 세팅되었습니다.

여기어때의 UX 디자이너와 UX 라이터는 한 몸처럼 일합니다. 해외숙소도 라이터 한 분과 찰떡처럼 끈끈하게 프로젝트를 진행했는데요. 지속적으로 디자인 시안에 대한 싱크를 맞추기 때문에 누구보다 서로의 컨텍스트를 잘 이해 하고 있으며 전문 UX분야가 달라 깊이 있으며 신선한 시각의 피드백을 주고 받을 수 있었습니다.

UX Writer 디디와 즐거운 한 때

해외 숙소를 디자인하며 기억에 남는 일은 ‘날짜 표기’ 이슈입니다. 고백하자면 여기어때 날짜 표기는 제각각이었습니다. 마감 시간은 다가오는데 가져오는 디자인마다 표기가 달라 (ex. 2022.03.01 / 22.3.1 / 22–03–05 등등) 어떤 것을 따라야 할지 혼란스러웠습니다.

때맞춰 입사하신 라이터분들이 UX 라이팅 시스템을 정리하고 계셨는데, 날짜 표기에 대해 문의를 드리니 “픽시 날짜 표기 가이드 여기 있어요!” 하며 라이팅 가이드를 스-윽 넘겨주셨습니다.

UX라이팅 가이드 넘 멋지지 않나요?

시간이 없었던 저는 즉시 시스템을 따랐습니다(이쯤 되니 나는 시스템 매니아가 아닐까?). 라이터분들이 작업해주신 가이드 덕분에 빠르게 디자인을 마무리할 수 있었습니다.

해외 숙소를 진행하는 8개월 동안의 UX 스페셜리스트분들과 협업은 UX의 완성도는 물론, 각 분야의 전문성까지 배울 수 있다는 게 큰 장점이었어요. 라이터분들은 디자이너들을 위해 정기적으로 라이팅 교육 세션을 열어주시는데요. 디자이너뿐만 아니라 프로덕트 센터 구성원들의 라이팅 실력을 높이기 위해 밤낮으로 노력하고 계십니다. 서당 개도 삼 년이면 풍월을 읊는다고, 이제 UX 라이팅의 ‘라ㅇ…’까지는 읊는다고 자신합니다.

새로운 비즈니스, 새로운 문화.

해외 숙소 출시 후 돌아보니 파도처럼 밀려온 새로운 팀 문화들 때문에 정신없기도 했지만, 결국은 디자인 작업 시 긍정적인 영향을 크게 받았어요. 필요에 의해 만들어진 시스템에 큰 효용성을 느꼈고, 디자인 외 업무적인 프로세스에 대해 크게 생각할 필요가 없었기 때문에 업무 시간을 ‘디자인’하는 것에 포커스 할 수 있었습니다.

또 리서처, 라이터 분들과 프로젝트를 진행하며 고민의 결이 깊어졌는데요. 리서처, 라이터의 관점에서 디자인을 생각하는 힘이 생겼고, 그 논리로 디자인을 설득할 수 있다는 자신감도 얻었습니다. 이전에는 혼자 고민하고 결정했다면, 다양한 UX 스페셜리스트분들과 토론하고 협의하는 것에 재미를 느끼기도 했어요.

8개월간 해외숙소를 디자인하며 겪었던 일련의 과정들을 통해 여기어때 UX 디자인 퀄리티의 기준치가 많이 높아졌는데요. 지금까지 해 온 것처럼 앞으로도 여기어때 UX 디자인의 기준을 계속해서 스스로 높여가는 팀이 되었으면 좋겠습니다.

그래픽: 김제린(Riny) Visual Interaction Designer

편집: 유다정(Didi) UX Writer

*해당 글과 이미지를 인용 또는 재가공 시 출처를 꼭 밝혀주세요.