0. About 캐치테이블
맛집 예약부터 웨이팅까지 한 번에, 쉽게!
캐치테이블로 즐거운 미식 생활을 시작하세요.
캐치테이블은 식당 예약 서비스를 제공하는 플랫폼이다.
위치, 음식 종류, 가격대 등을 기준으로 식당을 검색하고, 간편하게 실시간으로 예약을 할 수 있다.
이 외에도 캐치테이블은 고객 리뷰나 평가를 제공하고, 일부 식당에서는 미리 결제나 할인 혜택을 제공하는 경우도 있다.
2021 구글 올해를 빛낸 앱 선정 및 2022 앱스토어 오늘의 앱 선정 등 많은 사람들에게 사랑받고 있는 서비스다.
1. 화면 구성 분석
1) 홈 (메인화면)
① Header [검색] [북마크(마이페이지)] [알림]
[검색] Input에는 '흑백요리사를 검색해보세요!'와 같이 검색 키워드 추천 Placeholder를 보여주고 있다.
[검색] Input 터치 시 검색 페이지로 이동한다.
식당을 검색할 수 있는 화면과 함께 그 밑으로 식당 추천, 추천 해시태그, 급상승 레스토랑 등
다양한 주제로 식당을 또 추천해주고 있다.
검색 Input 아래로 검색 조합법이 작게 나타나고 있고
최근 검색어와 최근 확인한 레스토랑 등 히스토리가 2개로 분류되어 있는 것을 볼 수 있다.
② 위치 설정
상단에 현재위치로 설정 버튼, 그 밑으로 인기 지역, 최근 설정 지역이 나타나고
좌측에 전국, 수도권, 부산 등 큰 지역 카테고리, 우측에 구·동 단위의 카테고리가 나타난다.
최근 설정 지역의 경우 더보기 버튼으로 선택 삭제 또는 전체 삭제를 할 수 있다.
④ 주제별 식당 추천 아이콘
각 주제별로 나타나는 화면이 전부 다르다.
다만 기본적으로 지역 설정 및 음식 종류, 가격 등의 필터는 비슷하게 나타나고 있다.
[화제의 예능]의 경우 하단에 지도 플로팅 버튼이 보이는데, 이를 클릭하면 지도에서 위치를 설정하여 식당을 고를 수 있다.
⑤ 장소 탐색
주소 아이콘을 터치하면 해당 주소의 식당들을 볼 수 있다.
지도 배경 위로 식당 모달이 나타난다.
모달 상단에는 각종 필터를 걸 수 있는 버튼들이 있고 식당 모듈이 이어진다.
식당 모듈에는 식당 이름, 북마크 아이콘, 별점, 위치, 음식 종류, 사진, 기타 설명 및 특징, 예약 가능 시간 등
식당과 관련된 다양한 내용들을 한눈에 파악할 수 있다.
모달을 아래로 내리면 지도를 볼 수 있고, 지도를 이동하면서 원하는 지역의 식당들을 찾아볼 수 있다.
홈 화면에서의 콘텐츠는 여기까지 파악하고 다음으로 검색 탭을 파악해보겠다.
2) 검색
[검색] 화면은 [홈]에서 상단의 검색 Input 터치 시의 화면과 유사하다. (그 화면은 아래에 또 등장)
먼저 날짜·인원·시간 탭을 터치하면 달력 화면과 함께 인원 및 시간을 선택할 수 있는 화면이 나타난다.
달력 좌측에 '오늘' 버튼을 두어 오늘 날짜로 빠르게 이동할 수 있도록 했다.
상단 검색 Input 터치 시 [홈] 화면에서 검색으로 들어갈 때의 화면이 나타난다.
(왜 그렇게 구분했는지는 잘 모르겠다..)
필터 버튼 터치 시, 지역부터 음식 종류, 가격, 테이블 타입, 분위기, 편의 시설 등 다양한 조건으로 필터를 걸 수 있게 되어있다.
단순히 식당 예약 서비스라고 해서 음식과 관련된 내용 뿐만 아니라, 주차 문제나 아이, 동물 동행이 가능한지의 여부까지
세세하게 구분되어 있다.
필터 화면의 특징은 대부분의 버튼들이 텍스트 위주에 직사각형의 형태로 디자인되어 있는 것이다.
콘텐츠가 워낙 많다보니 아이콘이 오히려 시각적으로 명료함을 저하시켜서 그런 것 같다.
검색에서 식당 검색 시 이렇게 나타난다.
상단에 뒤로가기, 홈버튼, 북마크, 공유 버튼과 함께 매장 사진이 보이고
'187명이 보고 있어요!'라는 문구도 같이 보인다.
하이디라오 홍대점은 꽤 인기가 많은 식당이어서 식당 이름 위에 '전국 웨이팅 TOP 100' 뱃지가 있는 것을 알 수 있다.
그 밑으로는 식당 위치와 음식 종류가 보이고, 식당 이름 옆으로는 전화할 수 있는 버튼도 같이 보인다.
별점과 리뷰, 어떤 식당인지 간략한 소개, 위치와 인당 가격, 영업여부가 텍스트 위주로 보여지고
기타 사항 (주차, 단체, 인터넷 등) 또한 작게 보인다.
이렇게 식당의 간략한 기본 정보 소개 밑으로는 [홈] [메뉴] [사진] [리뷰] [매장정보] 5개의 탭으로 구분되어 나타난다.
홈 화면에선 요일별 평균 웨이팅 시간이 꺾은선 그래프로 보여지고, 예약 오픈 알림을 받을 수 있는 버튼도 있다.
편의시설은 4개의 레이아웃으로 나타나고 편의시설 설명은 텍스트로 작성되어있다.
메뉴 또한 텍스트 위주로 작성되어있고 그 밑으로 사진을 볼 수 있는 공간이 있다.
리뷰 영역은 카드 형태로 디자인되어 있고 사진이 크게 나타나고 그 밑으로 작성자와 날짜, 별점, 리뷰 내용이 작게 노출되고 있다.
위치 또한 지도가 크게 보이고 세부 주소는 작게 텍스트로 작성되어 있다.
주소 우측에 복사 버튼이 있어서 빠르게 복사한 뒤 다른 곳에 붙여넣을 수 있도록 되어 있다.
주변 지하철 역 정보도 아이콘으로 표시되어 있고 길찾기 버튼을 누르면 네이버지도, 티맵, 카카오맵 3개중 하나를 선택해서
찾아볼 수 있도록 되어 있다.
가장 하단에는 비슷한 레스토랑 및 주변 레스토랑, 내일 예약 가능한 레스토랑 모듈이 있다.
홈 외의 각 탭을 눌렀을 때의 화면들이다.
검색 탭 터치 시 메뉴판 사진이 추가로 보이고, 홈에서 봤을 때와 마찬가지로 텍스트 위주로 작성되어 있다.
사진 탭에서는 각종 음식, 식당 사진과 함께 동영상도 함께 볼 수 있다.
리뷰 탭에서는 리뷰를 더 자세히 살펴볼 수 있다.
홈에서는 별점이 별 5개로 디자인되어 있었지만 리뷰 탭에서는 크게 하나로 디자인 되어 있고 그 밑으로 몇점인지 나와있다.
그 오른쪽으로 각 점수마다의 분포도가 그래프로 나타나고 있다.
리뷰 탭에서는 필터를 걸어서 원하는 리뷰를 찾아볼 수 있도록 되어있는데
왼쪽에는 '전체' '점심' '저녁' 과 같이 시간대로 구분되어있고,
오른쪽에는 '베스트 순' '최근 등록 순' '별점 높은 순' '별점 낮은 순'으로 구분되어 있다,
또한 다른 사용자들이 작성한 리뷰에 하트를 누르거나 댓글을 남길 수도 있다.
마지막으로 매장 정보 탭에서는 홈에서 살펴보았던 매장에 대한 상세 정보들이 더 자세히 텍스트 위주로 적혀있다.
이렇게 식당 정보 페이지를 살펴보았는데, 공통적으로 보이는 하단 GNB영역에는
'북마크' '전화' '웨이팅하기' 버튼이 있다.
편의성을 고려하여 식당을 둘러보다가 언제든지 해당 기능들을 이용할 수 있도록 이 버튼들을 고정으로 보이도록 한 것 같다.
3) 타임라인
다음은 타임라인 화면이다.
사실 이 화면으로 들어오기 전에 푸터만 봤을 때 어떤 화면인지 짐작이 안 갔다.
각설하고, 이 화면은 커뮤니티 공간으로, 캐치테이블을 사용하고 리뷰를 남기는 사람들을 팔로우하여
어떤 리뷰를 작성했는지 살펴볼 수 있는 화면이다.
팔로잉 탭에서는 현재 내가 팔로우하고 있는 사람들의 목록이 나타나고 (나는 팔로우한 사람이 없어서 아무 것도 안뜬다)
추천 탭에서는 각 요리마다의 추천 리뷰가 보여지고 있다.
인스타그램에서의 피드 탭이라고 생각하면 쉬울 것 같다.
4) 마이다이닝
푸터의 달력처럼 생긴 아이콘을 누르면 [마이다이닝] 페이지로 이동한다.
'나의 예약' '나의 알림' 두 탭으로 구분된다.
'나의 예약'에서는 방문예정, 방문완료, 취소/노쇼로 또 3개로 구분되고
'나의 알림'에서는 빈자리 알림, 예약 오픈 알림, 입점 알림 3개로 구분되고 있다.
5) 마이페이지
마지막으로 마이페이지 화면이다.
상단에 프로필 영역과 팔로워, 팔로잉 현황이 함께 보이고 그 밑으로는 '나의 저장 '리뷰' 두 탭으로 구분되어있다.
나의 저장에선 컬렉션과 저장된 레스토랑 두 개로 구분되어 나타나고, 컬렉션을 터치할 시
지도와 함께 식당 목록이 함께 노출된다.
전체보기를 터치하면 내가 만든 컬렉션과 저장한 컬렉션 등 전체 컬렉션이 보인다.
2. 사용자 분석
30대 여성 및 남성이 가장 많이 이용하고 있다.
싱글가구가 56.9%로 과반수를 차지하였고, 소득 수준은 1억 초과가 가장 많았지만 그 밑으로는 비슷하게 분포되어 있다.
이로 미뤄보았을 때 20대보다 경제력이 있는 30대가 주 타겟층임을 알 수 있다.
3. 개선 사항
1) 상세 주소 설정 불가
내가 실제로 이 앱을 사용하면서 느꼈던 불편한 점은, 위의 화면처럼 지역을 설정할 수는 있지만 그 범위가 상당히 넓은 편이다.
예를 들어 홍대 입구역의 맛집을 찾고 싶을 때 '홍대/합정/마포'를 선택해서 둘러봐야 하는데
문제는 이 범위가 너무 넓어서 결국 지도를 통해 위치를 조정해가며 식당을 찾아봐야 한다.
⇒ (예시) 검색창에 '홍대입구역' 검색 후 지도 화면으로 넘어간 뒤 당근마켓처럼 범위 지정을 할 수 있도록 한다.
당근마켓은 '가까운 동네'와 '먼 동네'로 지정되어 있는데
캐치테이블은 이용자 특성상 자가용을 이용하는 사용자들도 많을 것이라고 예상되기 때문에
'도보 5분'과 '자가용 30분'정도로 범위를 넓혀갈 수 있도록 하면
도보 및 대중교통으로 식당을 찾는 사람과 자가용으로 식당을 찾는 사용자 모두를 만족시킬 수 있을 것이다.
2) 컬렉션 UX 개선
식당에서 컬렉션 추가 시 별도의 컬렉션 지정 없이 바로 저장되고 있다.
컬렉션에 해당 '네시사분'이라는 카페를 포함시키고 싶을 때,
[마이페이지의 컬렉션 → 레스토랑 추가하기 → 카페 선택]의 순서로 추가해야 하는데
이 과정이 굉장히 번거롭다.
⇒ 1. 식당 화면에서 저장할 때 컬렉션을 선택할 수 있도록 한다.
⇒ 2. [마이페이지]에서 식당 영역을 꾹 누르거나 메뉴 더보기와 같은 별도의 버튼으로 '컬렉션에 추가하기'를 만든다.
'UI·UX 디자인 공부 > 제로베이스 스쿨 - 레퍼런스 분석' 카테고리의 다른 글
| 레퍼런스 분석 7주차 [스포티파이] (4) | 2024.10.21 |
|---|---|
| 레퍼런스 분석 6주차 [네이버] (19) | 2024.10.11 |
| 레퍼런스 분석 5주차 [뱅크샐러드] (23) | 2024.10.05 |
| 레퍼런스 분석 4주차 [스카이스캐너] (2) | 2024.09.24 |
| 레퍼런스 분석 3주차 [우리동네GS] (6) | 2024.09.17 |