간결한 UXUI '카카오헤어샵'
그런데 서비스 종료?
코드스테이츠 PMB 17 W4D1
시작하며 - 선정 이유
IT 스타트업 서비스의 UXUI 디자이너로 입사했던 지난해. 회사는 서비스의 전면 리뉴얼 작업이 한창 진행 중이었다. 나는 GUI 디자이너라는 유관 경력이 있었기 때문에 신입이 아닌 경력직으로 들어갔기 때문에 별도의 교육이나 인수인계 과정 없이 바로 실무에 투입이 되었다.
GUI 디자이너에서 UXUI 디자이너로 포지션 변경을 위해 노력도 많이 했고 디자인 에이전시에서 GUI 경력이 있었다고 해도, 스타트업 환경과 UXUI 실무는 나의 예상보다 훨씬 템포도 빠르고, 난이도도 있었기 때문에 매일매일 정신없고 혼란스러울 때도 있었다.
실무 투입 후 내가 맡았었던 파트는 '결제→예약' 프로세스의 리뉴얼이었다. 이전에 작업하셨었던 동료에게 간단하게 설명을 듣고 바로 시작하였다. 당시에 결제부터 예약 시스템을 이해하고 참고하기 위해 식품, 패션 등 결제 기능이 있는 커머스 플랫폼들과 의료, 식당, 네이버 같은 포털 등 예약 기능까지 있는 플랫폼까지 수많은 서비스들을 캡처하고 분류하면서 래퍼런스를 정리하였다.
수많은 서비스들 중 그때 처음 봤던 '카카오헤어샵'. 카카오헤어샵은 카카오 특유의 깔끔한 디자인과 간결한 UX 그리고 예약 기능이 있어 제일 많은 도움을 주었던 서비스이다. '결제→예약' 시스템을 뜯어보며 이해하고 또 우리 서비스에 도움이 될만한 요소가 있는지 검토했었다.
그러다 얼마 전, 놀라운 뉴스를 보게 되었다.
그렇게 좋은 래퍼런스가 되어주었던 '카카오헤어샵'이 서비스 철수를 한다는 것이었다. 2021년 카카오의 '골목 상권 침해' 논란으로 헤어샵을 철수하겠다고 한 것이다. 카카오 측은 카카오헤어샵을 운영하고 있는 '와이어트'라는 회사의 지분을 매각하면서 서비스 종료 준비를 하고 있다고 한다.
카카오 서비스에서도 빠진 '카카오헤어샵'
카카오톡 내에서도 '카카오헤어샵'의 흔적을 지우기 위한 작업이 진행 중인데, 우선 카카오헤어샵의 이름에서 '카카오'를 삭제했다. 그리고 카카오톡 전체 서비스 목록에서도 '카카오헤어샵'은 삭제되었다.
매각 절차와 공식적인 서비스 종료 발표만 남은 '카카오헤어샵'. 나만 보기 아까운 카카오헤어샵의 UXUI를 파악하면서 잘된 점과 아쉬운 점을 알아보려 한다.
카카오헤어샵 화면 분석
화면 분석에 앞서 좋은 점과 아쉬운 점의 표기를 다음과 같이 좋은 점은 녹색으로 아쉬운 점은 붉은색으로 하려 한다.
1. 홈 화면 : 문제점 파악
먼저 카카오헤어샵은 크게 '지역 기반 헤어샵 추천'과 '스타일 추천' 두 가지 기능으로 구성한 것을 확인할 수 있다. Tab 버튼으로 '지역 기반 헤어샵 추천'과 '스타일 추천'을 이동할 수 있으며, 서비스가 제공하려는 정보가 무엇인지 파악할 수 있다.
그리고 녹색 2번을 보면 지역 변경 기능이 배민이나 쿠팡이츠와 같은 *툴팁 형태의 팝업이 아닌 고정된 영역을 차지하고 있는데, 이는 꼭 내가 지금 있는 지역이 아니라 다른 지역에 있는 헤어샵을 이용하거나 예약하는 등 헤어샵 이용의 특성을 살린 기능이라고 볼 수 있다.
음식 주문은 대부분 집이나 회사 등 내가 지금 있는 위치를 기준으로 서비스가 제공되지만, 헤어샵 같은 경우엔 꼭 내가 있는 곳이 아니더라도 다른 지역에 다니고 있는 헤어샵이 있을 수도 있고, 새로운 곳을 알아볼 수도 있기 때문이다.
하지만 붉은색 1번을 보면 '헤어샵', '네일샵' 등 카테고리별로 정리된 메뉴를 아이콘으로 표현하여 제공하고 있고 웰컴쿠폰팩, 별점 높은 샵 등 이벤트, 서비스도 같이 제공되고 있다. 하지만 메뉴와 이벤트, 서비스가 같이 혼재되어 있어 구성이 번잡스럽고, 또 아래 다른 영역과 중복되는 부분이 많아 불필요한 영역을 차지 하고 있다.
'웰컴쿠폰팩', '첫방문할인' 등 이벤트 항목은 화면 아래 배너 광고와 중복되는 내용이고, '스타일 Tip' 같은 경우에는 두 번째 화면의 '스타일 추천' Tab과 중복이다.
이벤트나 서비스에 대한 노출을 늘려서 조금 더 많은 고객이 눌러볼 수 있도록 하는 의도였는지는 모르겠지만, 구성이 혼란스럽고 중복되는 부분으로 불필요한 영역을 차지하고 있다고 본다.
그다음으로 아쉬운 점은 붉은색 2번, 검색 영역이 애매한 위치에 있어 잘 보이지 않는다는 점이다. 검색 영역의 위치를 옮기거나, 아예 홈 화면에서는 제거하고 다른 화면에서 제공하는 방법도 하나의 방법이라 생각한다.
1. 홈 화면 : 개선안
첫 번째 개선안은 '별점 높은 샵' 등 카카오헤어샵이 진행하고 있는 이벤트와 서비스의 배너광고를 상단영역으로 배치하고 카테고리별 메뉴를 버튼 타입으로 정리하는 방식이다. 그리고 '전체 보기'라는 카테고리를 새로 만들어 모든 뷰티샵을 보려는 사용자의 니즈를 반영해보려 했다. 이벤트와 서비스를 노출시키려는 의도와 정리된 카테고리 메뉴를 볼 수 있는 개선안이다.
두 번째 개선안은 애매한 위치의 검색 영역을 상단으로 끌어올리고 '첫방문할인', '웰컴쿠폰팩'과 같은 이벤트와 서비스는 태그 타입으로 제안하는 방식이다. 검색 영역을 상단으로 올리면서 기능의 활용을 더 높일 수 있고, 카카오헤어샵이 제공하려는 키워드에 맞는 헤어샵 정보를 바로 확인할 수 있으며 기능도 명확하게 구분되는 효과를 볼 수 있다.
*툴팁이란? (Tool Tip)
툴팁은 사용자의 동선을 방해하지 않으면서 특정 기능이나 업데이트된 서비스를 가볍게 소개할 때 사용된다. 사용자가 익숙하지 않은 기능을 이해할 수 있게 도와주는 역할이다.
2. 내 주변 : 화면 분석
다음으로 살펴볼 화면은 '내 주변' 화면이다. '내 주변' 화면은 내가 현재 위치하고 있는 지역이나 내가 찾고 싶은 지역의 헤어샵을 찾아볼 수 있는 화면이다.
화면의 좌측 상단을 보면 지역과 날짜/시간을 지정할 수 있는 필터가 있는데 이 부분에서 카카오헤어샵의 세심한 기능을 볼 수 있었다.
먼저 위 동영상을 보면 필터의 맨 위에 있는 지역을 누르면 검색 조건에 지역이 활성화된 상태인 화면이 등장한다.
하지만 아래 영상에서 날짜/시간 영역을 누르면, 바텀시트가 등장한 화면이 나오며 날짜/시간을 선택할 수 있는 Date/Picker가 나온다.
작은 부분이지만 사용자가 취해야 할 액션을 줄여주는 카카오헤어샵의 세심한 인터렉션을 볼 수 있는 화면이었다.
또, 단순히 헤어샵만 검색을 제공하는 게 아니라, 디자이너 탭도 구성한 점도 좋은 UXUI라 볼 수 있다. '디자이너'에 따라 예약, 방문을 하려는 고객들의 니즈를 반영한 구성이다.(녹색 1번)
그리고 녹색 2번에서는 헤어샵의 환경과 조건에 맞춘 필터 옵션을 제공하여 사용자가 쉽게 원하는 조건의 헤어샵을 찾을 수 있게 해 준다.
3. 예약하기 : 화면 분석
헤어샵과 디자이너를 골랐다면 원하는 시술을 선택하여 예약할 차례이다. 여기에서도 카카오헤어샵의 디테일이 보이는데, 여성 같은 경우 머리카락 기장에 따라 시술 가격이 변동된다.
하지만 때로는 턱선, 어깨선 등의 경계가 애매할 수 있는데 카카오헤어샵은 머리카락 기장에 대한 가이드라인을 제시하여 예약을 하는 고객도 시술을 제공하고 결제를 받는 헤어샵과 디자이너도 간편하게 서비스를 진행할 수 있다.
카카오헤어샵이 서비스를 구성하기 전, 많은 고객들의 목소리를 듣고 고민한 흔적이 보이는 세심한 UXUI이다.
4. 고객리뷰 : 문제점 파악
고객 리뷰 화면에서는 아쉬운 부분이 하나 있는데, 리뷰를 보고 해당하는 메뉴로 이동하는 기능이 없다는 점이다. 위 이미지 오른쪽에 예시로 붙여놓은 강남언니나 무신사를 보면 리뷰 아래 어떤 시술인지, 어떤 제품인지 바로 가서 볼 수 있는 정보가 제공되고 있다.
4. 고객리뷰 : 개선안
상품 후기 아래 해당 메뉴의 정보와 바로 이동할 수 있는 버튼을 추가해, 후기를 보고 마음에 들은 고객이 바로 상품 정보를 보고 예약을 할 수 있도록 재구성해보았다. 카카오헤어샵의 리뷰에서도 해당하는 메뉴 정보로 바로 이동할 수 있는 기능을 제공한다면, 사용자들의 편의성도 그리고 예약으로 이어지는 액션이 더 늘어나지 않을까 예상한다.
개선안을 이용하여 고객이 이탈하지 않도록, 흐름에 맞게 화면을 재배치 해보았다.
디자이너->후기->상품정보->예약까지의 Flow고객이 후기를 보는 것에서만 멈추는게 아니라 바로 상품으로 연결되어 예약까지 이어질 수 있도록 화면을 흐름에 맞게 구성해보았다.
고객이 예약, 결제 등 최종적인 목표에 도달하려면 화면의 흐름이 끊기지 않고 자연스럽게 연결하는 것이 매우 중요하다.
마무리하며
2016년 런칭 이후 심플한 UI, GUI와 꼭 필요한 기능들을 담아 제공하고 있는 깔끔한 UX를 제공하고 있던 카카오헤어샵은 여러 외부 이슈로 인해 서비스 종료만을 앞두고 있다. 서비스 종료 전 카카오헤어샵의 좋은 UXUI를 다시 한번 살펴보고 기록으로 남길 수 있는 포스팅이었다.
카카오헤어샵처럼 서비스를 이용하는 주요 고객이 어떤지 파악하고 그들이 원하는 기능을 제공하며 서비스를 이용하는 동안 편리한 경험을 선사할 수 있도록 고민하는 PM이 되도록 하겠다.
#PMB #PM부트캠프 #코드스테이츠 #프로덕트매니저 #PM #서비스기획자 #기획자 #IT #카카오헤어샵 #카카오 #헤어 #뷰티시장 #디자이너 #스타트업 #헤어샵 #예약 #서비스 #어플리케이션 #App #앱 #모바일 #UX #UI #시장적합성 #GUI #사용자 #고객
