[레퍼런스 분석] "카카오헤어샵" App UIUX 분석 및 개선

 

1. 서비스 정의

 

 

 

"Beauty O2O Platform"

헤어, 뷰티 등 자신을 가꾸고 싶은 고객과 해당 서비스를 운영 중인 사업자를 연결시켜주는 Multi-sided Platform

 

 

 

 

2. 고객분석

 

01. Customer

 

- 자신을 가꾸고 싶어하는 모든 사람

- 새로운 뷰티샵 (미용실 / 네일샵/ 바버샵 등)을 예약하려는 사람

- 뷰티샵을 예약하려는 사람

 

02. Shop

 

- 미용실, 바버샵, 네일샵의 운영자

- 새로운 뷰티샵 (미용실 / 네일샵/ 바버샵 등)을 예약하려는 사람

- 뷰티샵을 예약하려는 사람

 

 

 

3. 고객들은 왜 그리고 언제 이 서비스를 사용하는가 ?

 

01. Customer

 

미용실을 예약하려는데 새로 이사온 곳의 괜찮은 미용실이 없을까?

음.. 요즘 무슨 머리가 유행하지?

내가 원하는 스타일은 있는데 이걸 무슨 스타일이라고 말해야되지?

기다리지 않고 바로 머리하러 가고 싶은데

내가 원하는 선생님한테 직접 잘라 달라고 하고 싶은데

디자이너 선생님들의 경력이나 포트폴리오를 보고 맡기고 싶은데..

>

 

 

02. Shop

 

미용실을 홍보하고 싶은데 어디서 어떻게 해야하지?

예약 관리도 하고 머리도 자르고 사람을 고용하지니 부담스러워

재 방문 고객님인데.. 기억이 잘 안나네..

 

>

예약 활성화를 위한 컨설팅 지원

미용실 관리 프로그램 제공 고객 들의 데이터들을 보다 효율적으로 가공할 수 있는

 

4. 앱 전반의 정보 구조 : UI UX

 

- 홈 화면

kakao hairshop _home

 

a. Grobal Navigation Bar 영역 [ 좌측 부터 내주변 / 알림 ]
b. 서비스 항목 버튼 
c. 지역 추천 / 스타일 추천 선택 
d. 지역 변경 
e. 디자이너 추천 ( 재 예약 )
f.  검색 탭
g. 시술별 헤어샵 추천 ( 재 예약 ) 

h. 세일 헤어샵

i. 헤어샵 추천 (새로 오픈한)

j. Bottom Navigation Bar 영역 [ 홈 / 내주변 / 스타일북 / 예약 / 마이 ]

 

 

- 내 주변 화면

01

내 주변 / 업체 선택 화면

- 내 주변 

 

a. 지역 설정 / 예약 시간 설정
b. 필터 영역
c. 업체 노출 영역
d. 지도 보기
e. 헤어샵 / 디자이너 필터링 버튼
f.  목록 보기 버튼

 

- 업체 선택 화면

 

c-1. 하위 탭 메뉴 [ 홈 / 메뉴 / 디자이너 / 스타일 / 리뷰 ]
c-2. 업체 기본 정보
c-3. 메뉴 (가격 고지) 영역
c-4. 디자이너
c-5. 메장의 스타일 업로드 
c-6.  예약하기 버튼

 

- 스타일 북 / 예약 화면

01

스타일 북 / 예약

- 스타일 북

 

a. 스타일 선택 영역
b. 스타일 메거진 슬라이딩 베너 영역
c. 스타일 메거진 필터 영역
d. 스타일 메거진 나열 영역 무한 스크롤

 

- 예약

 

a. 예약 내용 노출 영역

 

- UI 개선점

 

a. 업체 선택 후 예약 과정

 

a-1.

네이버 플레이스의 예약 화면과 비교하였을 때

네이버 / 카카오 메뉴바 비교 이미지

카카오가 간소화되어 보여지는 점은 좋지만

네이버와 비교하였을 때 [ 네이버 : 가격,  카카오 : 메뉴 ] [ 네이버 : 스타일리스트, 카카오 : 디자이너 ] [ 네이버 : 시술,  카카오 : 스타일 ] 

조금씩 상이 했으나 개인적으로 나에겐 네이버가 UX Writing. 더 잘 되어있다고 생각 되어 졌다.

 

a-2.

개인적으로 나는 미용실 예약을 예약하고 머리 스타일을 찾아보는 등의 일을 휴식시간에 쇼파나 침대에 누워 혹은 양치질을 하며 찾아보고는 하는데 보통 왼손을 사용하여 보고는 하는데, 카카오 헤어샵의 경의 예약 날짜와 시간을 선택 시 한 손의 엄지손으로는 닿기 매우 힘든 자리에 위치해 있다.  한 화면의 하나씩 보여줘 비교적 하단 쪽에 UI가 있는  네이버 플레이스 예약과 대조적 이였다.

 

b. 업체 리뷰 그룹화

 

주로 네이버 플레이스 예약을 통해 예약을 하는 편이 였는데 예약시 가장 많이 보는 요소들 중 하나가 리뷰인데 네이버에 비하여 카카오는 리뷰가 다소 눈에 잘 안들어 왔다.

1. 네이버는 리뷰 작성 시 짧은 코멘트들을 객관식으로 선택할 수 있어 해당 내용이 요약 및 시각화하여 전달 되는데 반면, 카카오는 텍스트로만 적어 놓으며 텍스트간 대비가 ( 폰트 크기 / 칼라 ) 적어 가독성이 떨어졌다. 

( 네이버는 디자인별 리뷰를 리뷰 가장 상단에 큰 버튼으로 직관적으로 노출 시킨 반면 카카오에서는 스타일 선택 후 아래 작게 디자이너 선택을 할 수 있게 되어 있다.)

 

네이버 : 방문자 리뷰(인증) /  블로그 리뷰 선택> 스타일리스트 선택 > 이런 점이 좋았어요 >  총 별점 > 사진 리뷰 > 스타일 및 서비스 키워드 선택 (필터링) > 추천순 / 최신순 필터링 > 리뷰

 

카카오 :  총 별점 > 스타일 별 별점 > 포토리뷰 > 스타일 필터링 > 디자이너 필터링

 

c. 남성과 여성 버튼

내 주변 업체 선택 시 현재 서비스별 메뉴(필터링) 버튼의 크기와 위치의 중요도로 보면 

[ 지도 보기 > 헤어샵 / 디자이너 버튼 > 전체 / 타임세일/ 1인샵 / [ 바버샵 > 여성 추천순 / 매장 정보 / 가격대 / 위치순 ]

로 눈에 들어온다고 생각한다. 

하지만 남성 사용자 혹은 여성 사용자의 분류가 헤어샵 디자이너 버튼보다 우선순위가 높다고 생각 되어 진다.

해당 설정은 한번 설정으로 홈 / 내 주변 / 스타일 북에서 모두 필요한 버튼으로 카카오 프로필에 맞는 성별로 우선 세팅이 되거나 혹은 무신사와 같이 성별 선택 버튼이 가장 우선순위의 버튼이 아닐까 생각 한다.

 

d.  스타일북

 

d-1. 스타일북의 가장 상단에 스타일 별로 버튼이 나열되어 있으며 해당 스타일 버튼을 선택하면 스타일에 맞는 샘플 이미지들이 나열 되어 있다. ( 예시 이미지 첨부)

하지만 스타일 버튼들이 좌우로 슬라이딩 되고 하단에도 스타일 메거진 슬라이드 베너가 있어 해당 스타일 버튼들이 무엇을 의미하는지 잘 알기 어렵다. 상단 그룹에서는 메거진에 관련된 슬라이드 배너 보다는 스타일 버튼들이 바둑판식으로 나열되거나 스타일 버튼을 누르면 어떠한 정보를 알 수 있는지에 대한 내용이 들어가면 좋을 것 같다.

 

d-2. 스타일 북에서는 다양한 스타일을 메거진 형태의 컨텐츠로 볼 수 있는데, 다른 플랫폼들과 비교 하였을 때 좋아요 버튼이 컨텐츠 최 하단에 있다. 결국 좋아요 버튼을 누르려면 가장 하단 까지 내려가야하는데, 때로는 좋아요 버튼을 북마크 형태로 쓰기도 하며 다 읽지 않아도 필요한 부분을 읽은 후 좋아요 버튼을 누르는 경우도 있다.

 

좋아요 버튼의 경우에는 최 상단 썸네일과 함께 혹은 사이드에 위치하면 좋을 것 같고, 스타일 진입 화면에 썸네일에 우측 하단에도 노출되면 더 좋은 사용성을 줄 수 있을 것 같다.