마인드케어 경험자의 마인드카페 분석기
4주차 레퍼런스 분석
들어가는 말.
지난 주에 이어 이번에도 '헬스케어' 도메인, 그중에서도 '마인드케어' 앱이다. 이름부터 '마인드카페'인 이 앱은 IT와 헬스케어를 결합해 온라인에서도 마인드케어를 받을 수 있는 앱이지만, 굳이 분류하자면 '마인드케어'쪽에 방점을 둔 곳이다. 이전 블루시그넘이 IT에 강세를 두고 있다면 이쪽은 심리상담 전문가 집단에 가깝다. (블루시그넘에 대한 자세한 이야기는 이 글에서 확인 가능하다. - 마인드케어 러버의 하루콩 분석기)
실제로 블루시그넘은 '앱' 자체를 통해 '사용자'의 심리를 자가치료하는 쪽이라면, 마인드카페는 앱은 상담가와 내담자를 연결해주는 플랫폼의 역할로, 심리상담의 문턱을 낮추는 일을 한다. 마인드카페는 플랫폼의 역할을 충실히 수행한다. 후기를 찾기 어려운 심리상담, 코칭 전문가들을 한군데에서 모아볼 수 있고 비교/평가가 가능하다. 또한 심리상담/코칭의 경우 공인되지 않은(전문가라 하기 어려운) 자격증 소지자와 공인된 자격증 소지자를 상담자가 방문 전 파악하기 어려운데, 마인드카페에서 활동하고 있는 전문가는 그야말로 전문가다. 공인된 학회의 자격증과 관련 분야 석사 학위를 소지한 상담/임상 심리사와 코치를 대상으로 하며 인성/실무 면접을 진행해 자질 평가를 거쳐야지만 플랫폼에 얼굴을 올릴 수 있다.
출처: 혁신의 숲실제로 마인드카페는 지난 3년간 매출이 매년 3배씩 성장했다. 정신과의 문턱이 낮아졌다고는 하지만 여전히 사람들에게 병원을 다닌다고 말하기 어렵고, 직장인이라면 시간을 따로 빼기엔 더더욱 어렵다. 정신과 상담으로 병가를 낼 수 있는 분위기도 아니니 사실상 여전히 문턱은 높은 셈이다. 사람들이 온라인 플랫폼을 찾는 이유다. 이러한 성장세에 아토머스는 누적 투자액 약 350억 원 규모를 달성하며 스타트업 투자시장 혹한기에도 살아남고 있다.
빠른 성장세를 보이고 있는 마인드카페지만, IT보다는 심리상담에 포커스를 맞추고 있다보니 UIUX에서 아쉬운 부분이 존재했다.
마인드카페의 UIUX 파트 Pain point 및 Solution
첫 번째 Pain point. '익숙하지 않은 인터랙션'
마인드카페는 커뮤니티도 운영하다보니 회원가입시 닉네임 설정이 필수인데 이 과정에서 어색한 점 세 가지를 발견했다.
첫 번째, 요구하는 닉네임 글자수가 너무 길다.
이 부분에는 서비스 기획의 의도가 있을 것으로 예상되지만 타 플랫폼에서는 볼 수 없는 '기본 4글자 이상'인 요구사항이 나에겐 꽤 부담스럽게 느껴졌다. 대부분 2~3글자로 닉네임을 짓는 편인데 4글자가 아니면 안 된다는 말이 굉장히 당황스러웠다. 설명을 적어주고 있지만, 사용자는 텍스트를 스캔하기 때문에 4글자라는 조건이 잘 눈에 띄지 않는다.
두 번째, 자동으로 중복확인이 되지 않는다.
텍스트 필드 옆에 있는 [중복확인]은 안내 메시지가 아닌 텍스트 버튼이었다. 이미 중복확인이 완료되었다는 뜻인 줄 알고 [완료]를 눌렀는데, [중복확인] 검사를 하라는 메시지가 떴다. 개발 이슈로 인해 '중복확인이 실시간으로 이뤄질 수 있게 해달라!'고는 하기 어렵지만 텍스트 버튼인지, 피드백 텍스트인지 알기 어려운 건 문제점이라고 판단했다.
세 번째, 유효성 검사 피드백이 토스트로 띄워진다.
유효성 검사 후 피드백은 일반적으로 빨간색으로 텍스트 필드 아래에 고정된다. 그런데 이 경우, 토스트로 띄워져서 사용자가 토스트의 위치를 빠르게 파악한 다음, 어떤 점이 틀렸는지 빠르게 인지해야 한다. 나는 뭐가 뜨긴 했는데 내용을 바로 확인하지 못해 다시 한 번 동일한 콘텐츠로 유효성 검사를 진행해야 했다.
첫 번째 Solution. '익숙한 멘탈 모델을 기반으로한 인터랙션'
위 문제들은 모두 마인드카페에서만 보이는 독특한 인터랙션 때문에 발생한 문제다. 익숙한 멘탈 모델을 사용하지 않고, 마인드카페에서만 볼 수 있는 인터랙션을 사용했기 때문에 사용자가 추가 학습을 해야 하는 번거로움이 있다.
첫 번째 문제를 해결하기 위해서는 UXW 변경과 유효성 검사를 동시에 진행해야 한다. 닉네임 제작의 조건은 2가지다.
1) 한글/숫자/영문 중 하나 이상을 포함할 것.
2) 4글자 이상 15글자 이하일 것.
이 조건을 입력과 동시에 확인되는 유효성 검사 포맷으로 바꿔 사용자가 '조건에 맞는' 닉네임을 우선 만들게 한다. 이 경우, 데이터를 뒤져야하는 중복검사와는 다르기 때문에 큰 개발 이슈도 없을 것으로 예상된다.
두 번째 문제를 해결하기 위해서는 [중복확인] 버튼과 [완료] 버튼의 기능을 합쳐야 한다. [중복확인] 버튼이 별도로 있는 이유가 있을 수 있지만, 사용자 입장에서는 [완료]와 [중복확인]의 차이가 없다. 따라서 [완료]와 [중복확인] 버튼의 기능을 합쳐, [완료] 버튼을 제작한다. [중복확인]은 유효성 검사를 위해 제작한 버튼인데 [완료]는 유효성 검사도 하지 않고 오로지 '닉네임 제작'만을 위한 버튼이다. 따라서 두 가지 기능을 합쳐 사용자가 해야 하는 액션 단계를 줄여준다.
세 번째 문제를 해결하기 위해서는 error message를 사용하면 된다. 사실 유효성 검사에 대한 피드백이 토스트 형태로 나오는 게 더 보기 힘든 것 같다. 이 경우, 타 앱을 참고해 익숙한 멘탈 모델을 기반으로 피드백 인터랙션을 만든다.
두 번째 Pain point. '가독성이 떨어지는 텍스트'
타이포그래피는 UI 디자인의 기본이자, 주춧돌이다. 타이포그래피가 잡혀있지 않다면 아무리 화려한 그래픽으로 덮어씌워도 앱이 엉성해보인다. 마인드카페의 타이포그래피는 현재 일관성이 없다.
상세페이지, 홈화면, 온보딩 페이지 모두 행간이 다른 상태다. 특히 가독성이 떨어졌던 부분은 온보딩 페이지에서 연결되는 심리 테스트 [나를 찾아서] 페이지인데, 사진에서도 확인할 수 있듯, 텍스트의 행간이 너무 좁고 줄바꿈이 일정하지 않아 가독성과 심미성 모두 해치고 있는 상황이다.
강조하고 싶은 내용은 프라이머리 컬러로 넣었으나 맨 하단에 있고, 텍스트 섹션 안에 있어 스캔했을 때 잘 눈에 띄지 않는다.
두 번째 Solution. '타이포그래피의 안정화'
가장 중요한 건, 타이포그래피 시스템을 안정화하는 작업이다. 모든 페이지에서 일관되게 나오는 타이포그래피 시스템이 필요한데, 현재 마인드카페에는 타이포그래피 시스템이 없어 페이지마다 전부 다르게 타이포그래피가 사용되고 있는 듯하다.
하지만 이미 사용자가 150만인 서비스이기 때문에 타이포그래피 시스템을 새로 만들고 페이지를 전부 바꾸는 것은 현실적으로 리소스 투입이 너무 많이 든다. 따라서 가독성이 매우 떨어지는 페이지만이라도 자간과 행간, 줄바꿈을 조절하는 방향으로 진행해야 한다.
안내 문구는 시작하기 전에 팝업 문구를 띄워 사용자에게 확실히 인지시키는 방향으로 진행한다. [시작하기] 버튼을 누르면 팝업을 띄워 "다시 풀기는 불가능하기 때문에 충분한 시간을 확보해 달라 / 예상 소요 시간 15분" 이런 식으로 사용자가 자신의 행동을 예측할 수 있는 방향으로 UX와 UI를 변경한다.
세 번째 Pain point. '페이지에 대한 안내 부족'
이 페이지가 가장 난감했다. 해당 페이지는 [찜한 전문가]를 모아볼 수 있는 페이지인데 아무도 찜을 하지 않으면 갑자기 '감성문구'가 등장한다. 그래서 처음엔 '이 페이지가 뭐하는 페이지지?'라는 당황스러운 생각이 들었다. '여기서 나는 뭘 해야 하지?'라는 의문이 드는 UX였다.
하단에 추천 전문가가 뜨지만, 추천 전문가의 기준도 애매하고 '이들을 선택해야 하는 이유' 역시 없었기 때문에 넛징을 만들어내진 못했다.
세 번째 Solution. '페이지 정체성 확립'
이를 해결하기 위해선 '찜을 유도할 수 있는 문구'가 필요했다. 현재 당신은 아무도 찜을 하지 않았으며, 이제부터 나만의 전문가와 함께 나아갈 수 있음을 알려야 했다.
배달의 민족의 '텅' 화면은 직관적으로 "내가 지금 찜한 음식점이 없어서 아무도 안 뜨는구나"라는 생각이 든다. 이는 곧 "여기에서 모아볼 수 있으니까 편하겠다"라는 생각으로 연결되어 찜 기능을 활용하고 싶은 욕구가 생긴다. "이는 곧~"부터는 사실 비약적인 생각일 수 있지만, 배달의 민족 '텅' 페이지가 본연의 역할을 제대로 잘 수행하고 있음은 부정할 수 없는 사실이다.
따라서 마인드카페 역시 해당 페이지는 '찜 화면'이며, 지금 당신은 아무도 찜을 하지 않아 텅 비어있음을 고지해야 한다. 페이지의 정체성을 명확히하는 UX를 만들어야 한다는 것.
네 번째 Pain point. '필터 기능 부재'
개인적으로 가장 불편했던 지점이다. 이는 기능/정책 파트이기 때문에 넣을지 말지 고민했으나 UI에서 개선할 수 있는 부분이 있을 것 같아 일단 넣는다. 마인드카페의 핵심 서비스는 '전문가 찾기'다. 나에게 잘 맞을 것 같은 전문가를 찾고 예약을 진행하는 서비스다.
그런데 여기서 중요한 점은 '나에게 잘 맞는 전문가'를 찾기 어렵다는 점이다. 상담사가 작성한 애매모호한 문장과 별점만 보고 판단한 다음, 일일이 상세페이지를 읽어봐야 한다. 사실 상세페이지도 거의 텍스트로 구성되어 있어 해당 상담사의 강점을 명확하게 알 수 없다. 논문처럼 길게 써놓은 분도 계실 정도.
네 번째 Solution. '한눈에 보기 쉽게 정보를 전달하는 리스트 UI'
리스트 UI에서 가장 중요한 건 '정보 전달'이다. '사용자가 원하는 정보'를, '한눈에 볼 수 있게' 구성해야 한다. 현재는 이러한 기능이 제대로 수행되고 있지 않다. 마인드케어라는 특수한 상황이기 때문에 사람들의 감성을 터치하는 문구가 필요할 수 있지만, 사실 마인드케어가 필요한 이들에게는 '선택지를 줄여주는' UI가 훨씬 중요하다. 인지과부하가 일반인보다 쉽게 오기 때문에 오히려 정보 전달을 쉽게 하는 게 훨씬 효과적일 수 있다.
따라서 리스트 UI에서는 #태그를 통해 상담년수, 강점, 전문분야(전공) 등 내담자가 상담사에게 궁금해할만한 점을 공개하는 게 가장 중요하다. 태그에서 공개해야 할 내용은 사용자 리서치를 통해 추릴 수 있다.
