🛍 홈쇼핑모아가 홈 화면을 개편한 이유는?

👀 오늘 소개할 서비스와 기능

1. 맘맘 숙소예약

맘맘은 월령 별 대세 육아템을 확인은 물론 트렌드 커뮤니티와 육아 꿀팁을 확인할 수 있는 서비스입니다. 최근에는 아이와 함께 갈만한 장소와 예약 기능이 추가되기도 했는데요. 얼마 전, 숙소 예약 기능이 업데이트되어 오늘 그 과정을 자세히 살펴보고자 합니다. 

숙소 예약은 보통 ‘일정’을 선택하는 것으로 시작됩니다. 기간에 따라 예약이 가능한 숙소 등을 확인할 수 있기 때문인데요. (1) 맘맘의 기존 숙박 날짜 선택은 ‘오늘’이 표기된 캘린더에서 체크인 날짜와 체크아웃 날짜를 선택하는데 초점이 맞춰져 있었어요. 숙박 기간 선택이라는 행동에 집중한 결과이기도 한데요. (2) 이번 업데이트를 통해 날짜를 선택하기전 예약 가격을 캘린더에서 확인할 수 있게 되었어요.

물론 숙소를 선택하기 전 단계는 아니고, 특정 숙소를 예약하기 위한 날짜를 입력하는 과정에 적용된 모습입니다. 이는 기획전이나 테마에 따른 리스트에서 마음에 드는 숙소를 먼저 발견한 경우 유용하게 사용할 수 있어요. 최저가를 기준으로 캘린더에서 가격을 확인할 수 있다면 일정을 정하는데 도움을 받을 수 있고, 대략적인 예산이 어느 정도 필요한지 확인할 수 있다는 점에서 도움이 되는 정보라는 생각이 드네요.

또 하나 눈에 띄는 건, 공휴일 정보를 표기해 준다는 점이에요. 캘린더에서 빨간 날이라는 걸 알 수는 있지만, 10월 2일 임시공휴일, 10월 3일 개천절 등의 정보를 캘린더 아래에 표기해 가격이 다른 이유 등을 빠르게 알 수 있도록 도와줍니다.

검색결과에도 변화가 있어요. (1) 기존에는 지역이나 숙소 등을 검색해 리스트를 확인할 수 있었는데 (2) 업데이트 후에는 날짜를 지정해 예약 가능한 숙소만 확인할 수 있게 되었습니다. 기존의 방법이라면 지역 등을 검색한 뒤 숙소를 선택해 상세화면으로 이동 후 원하는 날짜를 입력해야 했는데요. 이 경우, 여러 단계를 거쳐야 원하는 숙소가 실제 예약이 가능한지 확인할 수 있는 불편이 있어요. 업데이트 후에는 원하는 날짜에 예약 가능한 숙소 전체 수를 안내하는 것과 동시에 리스트로 확인할 수 있어 예약 가능 여부를 먼저 확인 후 상세 화면으로 이동할 수 있어요.

1-1. 데일리호텔, 트립스토어, 미스터멘션 : 날짜 선택 

(1) 데일리호텔은 맘맘에서 확인한 불편을 어떻게 해결할 수 있는지 잘 보여주고 있어요. 날짜에 따른 최저가 정보를 보여주는 것은 같지만, 예약이 불가능한 날짜는 다르게 표기에 선택이 불가능하다는 사실을 안내합니다. (2) 트립스토어 역시 선택이 불가능한 날짜를 다르게 표기하고 있어요. 패키지여행의 출발일을 선택하는 화면이고, 해외여행에 초점이 맞춰져 있다 보니 월별 평균 날씨정보를 제공하는 점이 눈에 띄네요. (3) 마지막으로 한 달 살기에 최적화된 숙박 예약이 가능한 미스터멘션은 가격 정보를 제공하진 않지만, 선택한 일정에 따라 예약이 가능한 숙소 타입을 확인할 수 있도록 캘린더 상단에 정보를 제공하고 있어요. (*제주지니가 검색 화면 내 날씨 정보를 제공하는 이유)

1-2. 숙소 예약 시, 날짜 선택 사례를 추가로 확인할 수 있는 글

2. 홈쇼핑모아 : 홈 화면

홈쇼핑모아는 TV 홈쇼핑 생방송과 할인 정보를 모아서 비교할 수 있는 플랫폼인데요. 최근 홈 화면이 개편되어 함께 살펴보고자 합니다.

업데이트 전 메인화면은 편성표, 베스트, 쇼핑라이브 등 3개의 탭으로 구성되어 있었는데요. 편성표 탭의 (1) 상단 바 영역은 CI와 검색바, 알림 센터로 구성되어 있습니다. 업데이트 전 화면에서 눈에 띄는 부분은 바로 알림센터 기능인데요. 홈쇼핑 이용자 절반 정도가 구매하려는 상품의 방송 시간에 맞춰 시청하기 어려워 ‘미리 주문’을 경험한 적이 있다고 하는데, 이런 사용자가 미리 관심 상품 키워드를 등록하고 방송 전 알림을 보내 사용자가 앱에 진입할 수 있도록 알림센터 기능을 제공하고 있습니다. 아쉬웠던 부분은 알림센터에서 등록한 키워드 알림 외 알림은 별도로 확인할 수 있는 곳이 없었던 점이에요. 키워드 알림 외 이벤트/혜택이나 시스템 등의 알림도 사용자 리텐션에 중요한 요소로 작용하는 만큼 알림 확인 후에도 사용자가 알림 리스트에서 다시 확인할 수 있도록 제공되는 것이 좋아요.

(2) 편성표 탭은 사용자가 앱 진입 시 가장 먼저 확인하게 되는 화면입니다. 그만큼 앱에서 가장 중요한 화면이라고 생각할 수 있는데요. 홈쇼핑모아는 여러 홈쇼핑 채널을 한 군데로 모아 통합 확인 및 상품을 비교할 수 있는 플랫폼이기 때문에 편성표 영역을 두어 사용자가 날짜 및 시간에 따라 방송을 확인할 수 있도록 제공하고 있어요. 업데이트 전 편성표 탭 퀵 메뉴를 카테고리로 활용해 사용자가 원하는 상품군에 좀 더 빠르게 진입할 수 있도록 한 점은 좋았는데요.카테고리는 이미 정렬 기능으로 제공되고 있기 때문에 퀵 메뉴를 통해 좀 더 사용자에게 다양한 탐색 경험을 제공하면 어땠을까 하는 생각도 들었습니다.

(3) 상품 노출 방식도 살펴보겠습니다. 기본적으로 사용자가 앱에 진입한 시점을 기준으로 실시간 방송 리스트가 노출되는데요. 이전 방송을 확인하려면 화면 상단 스크롤을 통해 바로 이동할 수 있었어요. 이런 방식의 경우 사용자가 스크롤을 통해 여러 시간대의 방송을 한눈에 확인하기 편하다는 장점이 있지만 실시간 생방송 리스트로 다시 이동하는 하단 플로팅이 눈에 띄지 않아 사용자가 길을 잃기 쉬울 수 있어요. 때문에 시간대별로 선택할 수 있는 선택지가 제공되어도 좋을 것 같아요.

업데이트 후 홈 화면도 함께 살펴볼게요. (1) 상단 바 영역은 전체 메뉴와 알림이 추가되고, 검색바는 아래로 이동했어요. 최근 플랫폼에 따라 앱 내 기능이 다양해지면서 앱이 점점 무거워지는 경우가 발생하는데요. 이런 문제를 해결하기 위해 앱 내 기능을 한눈에 확인할 수 있는 전체 메뉴를 적용한 서비스가 많아지고 있어요. 홈쇼핑모아 역시 전체 메뉴로 앱 내 여러 기능들을 사용자가 둘러볼 수 있도록 별도로 제공하고 있습니다.

새롭게 추가된 알림은 기존 방송 알림 역할을 하던 알림 센터가 방송 상품 알람으로 변경되었어요. 그리고 알림 센터가 추가되었는데요. 업데이트 전 알림을 리스트 형태로 다시 확인할 수 있는 기능이 없었는데, 탭 형태로 알림 유형별 확인이 가능하도록 개선되었습니다.

(2) 홈 화면 내 탭의 경우 쇼핑라이브가 빠지고 홈과 편성표 2개의 탭으로만 구성되어 있는데요. 상단 바에 있던 검색 바를 탭과 함께 노출시킨 점도 눈에 띕니다. 메인화면에서 가장 많이 달라진 부분이 바로 이 부분인데요. 최근 커머스 플랫폼 내 리텐션을 늘리기 위해 게임을 활용하는 경우가 많아지고 있는데 홈쇼핑모아에서도 농장에서 사과를 키우고 사용자에게 사과가 배송되는 앱테크적 요소도 찾아볼 수 있었어요.

이 밖에도 사용자의 자유로운 탐색 경험을 위해 퀵 메뉴를 베스트 상품, 바로결제 상품 등으로 활용한 모습도 눈에 띄었는데요. 모아전용 혜택 영역을 통해서 할인 정보도 함께 보여주는데, 업데이트 전에는 메인화면에서 여러 상품을 보여주는 데에 더 큰 가중치를 두었다면 업데이트 후에는 방송 중인 상품보다 홈쇼핑모아 내부 컨텐츠에 집중할 수 있도록 개선된 것 같아요.

(3,4) 업데이트 전 스크롤 시 자동으로 변경되던 방송 시간 부분도 개선되었는데요. 이전에는 스크롤 후 다시 실시간 방송 영역으로 이동하려면 이동한 만큼 다시 스크롤 하거나 플로팅 버튼으로 이동해야 하는 불편함이 있었는데, 실시간 방송 기준으로 노출하고 지난 방송이나 예정 방송은 정렬 기준을 통해 사용자가 확인하기 편리해졌습니다.

* 알림의 성격에 따라 탭을 적용한 리디 (2023.09.28)

2-1. 서비스 방문 목적에 따른 고객 세그먼트를 나눌 때 참고하면 좋은 글

3. 티맵 : 공항버스 예약

최근 티맵 내 공항버스 예약 서비스가 추가되었는데요. 공항버스 시간표 확인부터 예약, 결제까지 할 수 있고 추후 쿠폰 및 포인트 할인 기능도 업데이트될 예정이라고 해요. 관련해 화면을 보며 함께 살펴보겠습니다.

공항버스 예약은 티맵 메인 화면 내에서 바로 찾아볼 수 있는데요. 출발지 선택 화면이 바로 노출됩니다. (1) 출발지 선택 하단에선 사용자의 현재 위치를 기반으로 가까운 정류장을 추천하는데요. 위치 기반으로 정류장을 추천하는 경우 서비스 진입 메인화면보다 출발지 선택 후에 추천하는 경우가 많은데, 티맵은 뎁스를 줄여 메인에서 사용자가 바로 정류장을 선택할 수 있도록 제공하는 점이 눈에 띄었어요.

(2) 다음은 출발지 선택 영역 터치 후 노출되는 화면인데요. 출발지 선택은 버스 노선과 지역 2가지로 검색할 수 있도록 구성되어 있습니다. 버스 노선은 지도로 출발지를 확인하며 찾아볼 수 있다는 점에선 편리하지만 지도 내에서 출발지 별 확인이 어려운건 아쉽게 느껴졌어요. 도착지 변경은 불가하기 때문에 결국 모든 공항버스 도착지는 인천공항일 테고, 그럼 버스별 차이점은 출발지일 텐데 출발지 별로 확인하기 어려운 점은 개선이 필요해 보였습니다.

(3) 다음은 버스별 노선 정보 영역인데요. 개별 버스 번호에 따른 노선을 쉽게 조회할 수 있다는 점은 좋았지만 노선 선택 시 바로 출발지로 선택되는 플로우는 다소 아쉽게 느껴졌어요. 이미 화면 중앙에 지도를 함께 보여주고 있기 때문에 정류장 선택 시, 지도 내 위치를 노출해 사용자가 한 번 더 확인할 수 있도록 하고, 이후 선택한 장소를 출발지로 추가할 수 있도록 하는 구성으로 되어 있다면 사용자가 지도를 활용해 좀 더 편리하게 출발지를 선택할 수 있을 것 같습니다.

(4) 마지막은 예약 후 화면입니다. 예약 내역은 공항버스 예약 서비스 메인 진입 시 바텀 시트 형태로 제공해 사용자가 결제 내역까지 진입하지 않아도 되는 불편함을 최소화한 점이 눈에 띄는데요. 그뿐만 아니라 사용 가이드와 결제 내역으로 바로 이동할 수 있는 버튼을 제공해 사용자가 승차권 사용 시 경험하게 되는 불편함을 줄였습니다.

3-1. 티머니GO : 공항버스 예약

티머니에서도 티머니GO 앱을 통해 공항버스 예약 서비스를 운영하고 있는데요. 진입 경로는 티맵과 동일하게 앱 메인에서 공항버스 예약을 선택하는 방법입니다.

(1) 진입 후 노출되는 서비스 메인 화면인데요. 즐겨찾는 경로 보기를 통해 공항버스 이용이 잦은 사용자를 고려한 기능을 제공하고 있습니다. 또한 티머니에선 고속, 시외버스 여부를 선택할 수 있는데요. 사용자에게 선택지를 주는 건 좋았지만 별도로 선택 가능한 토글 버튼임을 사용자가 인지하기 어려운 점이 다소 아쉽게 느껴졌습니다.

(2) 다음은 출발 및 도착지 선택 화면입니다. 공항버스 예약 메인 화면처럼 고속, 시외 여부를 선택할 수 있었는데, 토글이 아닌 라디오 버튼 형식으로 노출한 부분은 좀 더 직관적이어서 좋았어요. 티머니GO의 경우 서비스 이용 가능 지역이 다양했는데요. 지역별로 사용자들이 많이 선택하는 지역을 상단에 배치해 사용자가 원하는 지역을 빠르게 선택할 수 있도록 한 부분도 눈에 띄었습니다.

(3) 마지막으로 예약 후 화면인데요. 티맵과 다른 부분은 티맵의 경우 예약 후 노출되는 바코드를 바로 태그 해 승차할 수 있는 방식인 반면 티머니GO의 경우 예약 후 별도 종이 승차권을 발권해야 했던 점이에요. 또한 티머니GO를 사용하는 경우 여러 부가 기능도 지원하고 있었는데요. 승차권 저장이나 도착 알림 등의 기능을 제공하는 점도 인상적이었어요.

3-2. 고속버스 승차권 확인 UX/UI 사례를 추가로 확인할 수 있는 글

4. 캐치패션의 업데이트에 대한 실무자 코멘트

지난 뉴스레터를 통해 캐치패션의 홈 화면 개편에 대한 내용을 공유했는데요. 이번 뉴스레터에서는 구독자분들이 등록해 주신 질문을 바탕으로, 캐치패션의 담당자들이 어떤 부분에 초점을 맞춰 업데이트를 진행했는지 조금 더 자세한 내용을 정리해 봤어요. 

[캐치패션 홈 화면 개편] - 안드로이드 2.0.17, iOS 2.0.14

캐치패션 서비스가 대대적으로 개편되었어요. 대표적으로 홈 화면이 업데이트 전에는 Catch - Catch직구 두개의 다른 화면으로 나뉘어있었는데요. 이번 업데이트 (9월 21일)를 통해 한 화면으로 통합되었어요. 아울러 패션 카테고리 외 다른 판매 카테고리가 확장, 적용되었습니다. 

Q1. 이번 업데이트를 진행하며 어려웠던 부분은 어떤건가요?

분리되어있던 서비스를 하나로 합치다보니, 기존 사용자들이 불편하지 않으며, 신규 유저들이 혼란스럽지 않게 하는 것에 초점을 맞췄어요. 자세하게는,

Q2. 이번 업데이트에서 기존의 불편을 해결하기 위해 가장 많이 공들인 ‘화면'이나 ‘기능'은 무엇인가요?

(상품 상세페이지) 상품 정보를 보여주는 상품 상세페이지에 공을 많이 들였어요. 유저들은 상세페이지에서 직구를 할 지, 바로 구매를 할 지 결정하기 때문에 직구/바로구매 두 서비스를 잘 안내하는 것이 중요했습니다.

(캐시백 안내) 상품 상세페이지 이외엔, 이번 업데이트를 통해 패션 분야 이외의 카테고리와 파트너사가 늘어날 예정이었는데요. 직구 쪽에는 필연적으로 다양한 캐시백 정책들이 생기기 마련이라 캐시백 안내를 일관성있고 직관적으로 표현하려고 노력했어요. (파트너사 상세 페이지)

Q3. 이번 업데이트를 포함, 서비스에 어떤 기능을 더할지 어떤 식으로 결정하시나요?

Q4. 서비스를 개선하는 과정에서 가장 중요하게 생각하는 지표는 무엇인가요?

전하고 싶은 업데이트 소식이 있으신가요? 아래 링크를 통해 알려주세요!

🗞 서비스 소식 큐레이션 

💬 이번 업데이트 소식은 어떠셨나요?

이번 업데이트 소식은 어땠나요? 뉴스레터에 대한 의견을 더해주세요!

의견 등록하기

📮 광고 및 제휴 문의 : https://tally.so/r/wa5WKE

팁스터 뉴스레터의 공식 오픈채팅방에 참여해보세요!

팁스터 뉴스레터에서는 프로덕트와 관련된 다양한 주제의 콘텐츠를 발행하고 있어요!

멤버십 콘텐츠 중 '캠핑'편은 무료로 체험하실 수 있어요!