사용자 참여율을 한달만에 19.6% 끌어올린 UI/UX 개선 비결
WORK
BY | 허초이
DATE | 2022. 10. 21.
의뢰인에게는 법률 상담 장벽을 낮춰주고, 변호사에게는 전문성과 경험을 알리는 로톡의 ‘상담사례'! 상담글 작성률은 어떻게 한달 만에 19.6%나 증가했을까요?
안녕하세요! 법률서비스 플랫폼 ‘로톡’의 디자인을 맡고 있는 프로덕트 디자이너 허초이입니다.
올해 4월에 로톡의 ‘상담사례’ 글쓰기 개선 프로젝트를 진행했는데요, 프로젝트를 진행하는 동안의 고민들과 개선포인트들에 대한 이야기를 담아보았습니다.
‘상담사례’ 글쓰기 기능 개선, 왜 한 걸까요?
“배우자의 외도가 의심되는데, 정황만으로 이혼 소송이 가능할까요?”
“시간이 지난 데이트 폭력 신고 가능할까요?”
위와 같은 법률상담 사례를 다양한 온라인 매체를 통해 한번쯤은 접해보셨죠?
로톡에서는 ‘상담사례’ 페이지에서 온라인 상담 기능을 제공하고 있습니다. 온라인 상담은 온라인상에서 상담글과 답변으로 이루어지는 무료 상담으로, 누구나 부담없이 쉽게 익명으로 작성하고 변호사의 답변을 받을 수 있는 로톡의 주요 기능입니다.
로톡의 ‘상담사례’ 기능을 통해 온라인 상담을 원하는 의뢰인은 누구나 무료로 상담글을 작성할 수 있는데요, 상담 게시글로 진행되는 온라인 법률 상담은 변호사와 실제 상담(전화/화상/대면)으로 이어집니다.
의뢰인이 본인의 상담글에 답변을 남긴 변호사에게 유료상담을 받는 비율은 약 61.5%로, 상당히 많은 의뢰인들이 자신의 상담글에 답변을 남긴 변호사에게 유료상담을 신청한다는 것을 알 수 있습니다.
그리고 검색최적화(SEO; Search Engine Optimization) 측면에서 사용자를 유입시킬 수 있다는 점에서도 중요한 역할을 하고 있습니다. 즉, 온라인 상담은 의뢰인의 법률상담 장벽을 낮춰주고, 변호사에게는 전문성과 경험을 알릴 수 있다는 점에서 의뢰인과 변호사 모두에게 중요한 기능입니다.
그래서 디자인팀에서는 양질의 상담글 콘텐츠가 만들어질 수 있는 기반을 마련하고, 의뢰인들이 작성가이드를 정확하게 인지하면서도 쉽게 상담글을 작성할 수 있도록 온라인 상담글쓰기 작성 프로세스 및 화면을 개선했습니다.
문제정의 1, 온라인 상담글 작성까지 허들이 많고, 너무 멀다..
로톡에서 ‘상담글 쓰기’ 화면에 진입하면, 타이틀 및 서브 문구가 보여지는 화면으로 시작해서 4가지의 주요 안내 사항들이 화면을 스크롤함에 따라 차례로 나옵니다. 의뢰인이 상담글을 작성하기 전에 안내사항을 숙지하게 하여, 가이드에 맞는 상담글 작성을 유도할 목적이었어요. 하지만, 안내사항을 마주하면 이런 생각이 듭니다.
“상담글을 빨리 쓰고 싶은데, 쓰기도 전에 읽어야 할게 너무 많아요.”
텍스트가 너무 많으면 사용자의 집중도과 가독성이 떨어지죠. 그래서 상담글 작성 전에 보여진 긴 안내 사항들은 잊혀지기가 쉬웠어요. 사용자는 ‘상담글 쓰기’ 를 누르면 바로 상담글 작성이 가능할 것이라는 기대를 가지고 진입하는데, 글을 작성하기도 전에 매우 긴 안내사항들이 우선적으로 보여지니 답답하고 불편하게 느끼고 있었습니다.
특히, 모바일에서는 이렇게 안내 사항이 책장이 천천히 넘겨지는 듯한 인터렉션으로 구현되어 있습니다. 4장의 안내 사항 모두를 반드시 보고 넘겨야만 글을 작성할 수 있었어요
문제정의 2,
”다 있는데 묘하게 불편해…” 정리되지 않은 UI
데스크탑 화면의 긴 스크롤이나 모바일의 책장 UI 을 모두 넘기면, 드디어 ‘상담글 작성 영역’ 에 도달하게 됩니다. 긴 여정을 지나 상담글을 작성할 수 있게 되었지만, 여기서 한번 더 어려움을 겪게 됩니다.
상담글 작성 영역에서는 제목과 내용 입력 영역의 하단에 각각의 가이드 말풍선이 생성되는데, 말 풍선 내 텍스트가 너무 많아서 눈에 잘 들어오지 않습니다. 작성시에도 텍스트 필드에 타이틀 컬러가 입혀지고, 가이드 말풍선과 에러메세지도 계속 노출되고 있어 산만한 느낌을 주고 있었어요. 의뢰인이 양질의 온라인 상담을 받을 수 있도록 구현한 부분들이 오히려 상담글 작성을 불편하게 하는 것이었죠.
상담글 작성을 완료했을 때의 화면에선 [내가 쓴 글 보기] 버튼이 [메인으로 가기] 버튼에 비해서 강조되어 있습니다. 상담글 작성을 완료한 다음 액션으로 의뢰인에게 [내가 쓴 글 보기] 를 유도하는 것이 적합한지에 대한 고민이 필요해보였습니다.
솔루션, 작성 먼저, 가이드는 간결하게! (w 사용자 동의)
앞서 도출한 문제점들을 바탕으로, 로톡 ‘상담사례’ 글쓰기 개선 포인트를 아래와 같이 잡았습니다.
“안내 사항은 적재적소에, 내용은 간결하게! 글쓰기까지의 과정을 최소화”
STEP 1. 쉬운 진입을 위한 FAB
기존에는 [상담글 쓰기] 버튼이 고정되어 있지 않아서 스크롤을 내리면 사라지고 눈에 잘 띄지 않았어요. 그래서 온라인 상담 메인 페이지에 FAB(Floating Action Button)를 추가하여, 상담글 쓰기 화면에 쉽게 진입할 수 있도록 했습니다.
STEP 2. 상담글 쓰기 진입 화면 - 바로 글작성 가능
상담 글쓰기 화면에서 상단 타이틀에 ‘상담글을 작성하면 무료로 변호사의 답변을 받을 수 있다’ 는 혜택을 우선적으로 명시해 온라인 상담글 작성률을 높이고자 했습니다. 그리고 그 아래 ‘제목’과 ‘내용’ 을 입력하는 영역을 위치시켜 바로 글작성이 가능하게 했습니다.
STEP 3. 상담글 작성중 - 작성 가이드 최소화
‘제목’과 ‘내용’ 입력에 필요한 작성 가이드가 각각 다르기 때문에 기존처럼 각 항목을 입력시에 가이드가 아래에 생성되도록 했습니다. 가이드의 내용이 기존 버전처럼 너무 길면 사용자 집중도와 가독성이 떨어지게되므로, 반드시 필요하고 핵심적인 내용으로만 최대한 간결하게 넣었어요.
그리고 에러메세지와 가이드는 동시에 노출하지 않고, 입력 완료 시에만 에러메세지를 노출하는 것으로 변경해 복잡함을 걷어냈습니다.
STEP 4. 안내 사항과 사용자 동의
상담글 작성 영역 아래에는 ‘상담글 등록 전 반드시 확인해주세요!’ 라는 타이틀과 함께 상담글 등록 전에 안내 사항을 보여주었습니다. 그리고 안내 사항을 제대로 숙지하지 못한 의뢰인의 CS 문의로 인한 혼란을 방지하기 위해 명확하게 동의를 받는 영역을 추가했는데요. 이미 상담글 작성까지 완료된 상태이기 때문에 해당 사항에 대한 동의는 좀 더 수월하게 이뤄질 것으로 판단했습니다.
STEP 5. 더 많은 콘텐츠 탐색을 위해 상담글 등록 완료 화면 개선
상담글 작성을 완료 했을 시에는 [내가 쓴 글 보기] 버튼 보다는 [메인으로 가기] 버튼이 더 많은 ‘상담 사례’ 콘텐츠 탐색을 유도하기에 적합한 액션 이었기 때문에, [메인으로 가기] 버튼을 우측에 더 강조되는 버튼으로 표현했습니다.
로톡 ‘상담사례' 글쓰기 기능 개선 결과는 어땠을까요?
‘상담사례’ 글쓰기 작성률 약 19.6% 증가
업데이트 이전 30일과 업데이트 이후 30일을 비교해 보았을 때, 상담글 작성률은 약 19.6% 증가했습니다.
‘상담사례' 메인 화면에서 FAB를 추가하여 진입률을 늘리고, 상담 글쓰기 화면의 UX/UI를 개선한 것이 상담글의 작성률 상승에 크게 기여했다고 판단됩니다. 작성률 상승이라는 결과와 더불어, 개인적으로는 많은 레거시 중 하나를 없앴다는 점에서도 뿌듯했던 작업이었습니다.
기존 글쓰기 화면의 문제 분석을 통해 우리가 보여주고 싶은 것을 사용자에게 우선적으로 장황하게 보여준다고 해서 반드시 그 의도대로 워킹하지는 않는다는 것을 확인했습니다.
안내 사항은 사용자가 꼭 인지해야 하는 것으로 반드시 글 작성 전에 노출이 되어야합니다. 하지만 사용자가 원하는 ‘빠르고 간편한 글 작성’ 을 방해하지 않는 선에서, 보다 효율적인 방법으로 안내사항을 보여주는 것이 필요하다고 판단했습니다.
로앤컴퍼니의 프로덕트 디자이너들은 사용자가 원하는 것을 보여주는 방법들을 끊임없이 고민하고 있습니다. 이러한 고민들은 더 나은 프로덕트를 만들어내고, 궁극적으로는 법률시장에서 사용자들이 겪는 문제를 해결하는데 기여할 수 있다고 믿습니다.
Edit 신다솜 Graphic 허주경
-이 아티클은 2022년 10월 기준으로 작성되었습니다.
