디자인시스템이 정말 사용자 경험을 개선할까?
디자인 시스템 개선을 통한 보험청약 프로세스 개선 사례
일관된 사용자 경험을 위하여
캐롯손해보험은 전통적인 보험사의 패러다임을 깬 국내 최초 디지털보험사로, 오프라인 설계사 없이 오직 디지털로만 보험가입이 이루어지고 있어요. 이러한 디지털 전환 속에 캐롯의 웹사이트나 모바일 애플리케이션은 사용자와의 중요한 접점 역할을 하고 있는데요. 사용자들이 캐롯 서비스를 이용하고 보험에 가입하는 과정에서 우리는 몇 가지 불편함을 발견하게 되었어요. 사용자가 겪고 있던 불편함을 어떻게 개선했는지 이야기해 볼게요.
사용자 경험을 위한 고민, 이렇게 시작되었어요
캐롯손해보험의 다양한 보험 상품들의 개선 전 가입 화면들이에요.
2022년 당시, 가입자 정보입력 화면여러분은 위 화면들이 같은 정보를 묻고 있는 것으로 인지가 되시나요?
위 화면들은 이름, 주민등록번호, 휴대폰 번호 등 보험가입에 필요한 가입자 정보를 묻는 화면인데요. 각 정보를 입력하는 필드의 디자인이 통일되지 않고, 입력 필드에 필요한 사용자 지침이 부재함을 발견했어요. 이러한 디자인 형태는 사용자들이 청약을 시작할 때마다 입력 필드에 대한 다른 경험을 하게 만들고 있었죠.
2022년 당시, 보험료계산 화면위 화면들은 사용자가 보험 상품을 선택하는데 결정적인 역할을 하는 ‘보험료 산출'화면이에요. 이 화면에서 사용자는 자신이 얼마의 보험료를 지불해야 하는지와 이 상품의 보장 내용을 확인할 수 있는 중요한 화면이죠.
그런데 가장 중요한 정보인 ‘보험료’가 각 상품마다 다른 위치에 노출되고 있었고 보험기간, 납입 방법, 보장내용 등 화면에서 보여주는 정보 구조도 다르게 구성되어 있어서 사용자가 상품을 탐색할 때 일관된 정보를 확인하기 어려워 보였어요.
2022년 당시, 청약 과정 중 하단 버튼또한, 각 상품마다 하단 버튼의 디자인이 다르게 적용되어 있었죠. 청약 진행 중 일부 상품은 ‘이전' 버튼이 있고 다른 상품은 ‘이전’ 버튼이 없는 경우가 있어, 뒤로 돌아가는 경험이 일관되지 않았고, 각 버튼의 명칭은 동일하지만 버튼의 형태와 컬러가 달라 사용자가 활성화, 비활성화 등의 버튼 상태 차이를 이해하는데 어려움이 있었어요.
일부 VOC에서는 ‘앱에서 보험 가입하려고 했는데, 버튼이 화면마다 달라서 헷갈립니다.'라는 불편사항 글이 올라오기도 했답니다.
청약 과정 중 사용자가 겪은 불편함을 정리해 봤어요.
① 혼란스러운 경험
청약 과정을 시작할 때마다 다른 화면을 마주함으로, 사용자가 정보를 이해하고 손쉽게 가입을 완료하는 것을 어렵게 만들고 있었어요.
② 실수와 오류
다양한 형태의 화면을 제공함으로 사용자가 화면 안에서 원하는 정보를 빠르게 찾는데 어려움을 겪고 행동에 실수를 높이고 있었어요.
예를 들어 이전 화면에서는 상단에 선택 버튼이 있었지만, 다음 화면에서는 하단에 선택 버튼이 존재하는 경우가 있어 사용자에게 실수와 오류를 유발하고 있었죠.
③ 신뢰 감소
일관성 없는 디자인으로 사용자는 보험사의 신뢰성에 대한 의문을 품을 수 있고, 보험 가입을 망설이게 만들 수 있었어요.
사용자 경험, 이렇게 변화했어요
이러한 문제점을 개선하기 위해, 우리는 사용자를 위해 길잡이 역할을 하는 ‘캐롯 디자인 시스템'을 개발하여 적용했어요. 아래에서 ‘캐롯 디자인 시스템'을 통해 개선된 화면을 설명드릴게요.
① 혼란스러운 경험
우리는 사용자들이 보다 편리하고 간편한 방식으로 보험 가입을 할 수 있어야 한다고 판단했어요.
개선 후, 가입자 정보입력 화면이전에는 같은 정보라도 입력 필드의 디자인이 달랐다면, 각 상품마다 같은 형식의 규칙을 적용하여 사용자의 경험을 일관될 수 있도록 디자인 규칙을 만들어 수정했어요. 또한 스텝별 타이틀을 통일하여 사용자가 진행 상황에 대해 직관적으로 알 수 있게 했어요. 이 과정에서 기존의 프로세스에서 불필요하게 분리되었던 정보나 버튼들을 재정비하여 전체 청약 프로세스 과정을 줄이기도 했답니다.
개선 후, 보험료 확인 화면② 일관성 있는 디자인
기본적인 디자인 요소들에 일관성을 부여하여 사용자들이 가입 과정에서 편안함을 느끼고 정보 탐색이 편리하게끔 개선했어요. 기존의 ‘보험료 확인' 화면에서는 상품마다 다른 정보 구성이었다면, 개선 화면에서는 사용자가 한 화면에 봐야 하는 정보의 우선순위를 정의하여 훑어보기 쉽도록 규칙을 만들었어요.
1) 상단에는 상품의 특징을 나타내는 일러스트와 납입방법 및 보험기간을 노출해 상품에 대한 인지를 높이고
2) 가운데 콘텐츠 부분에는 보험에서 보장하는 보장항목을 중점적으로 확인할 수 있도록 배치했어요.
3) 하단에는 ‘다음 버튼’과 ‘보험료'를 같이 배치하여 핵심 정보인 가격 확인 후 매끄럽게 다음 스텝으로 진입할 수 있게 수정했어요.
캐롯은 앞으로, 이렇게 노력해요
③ 신뢰와 안정감 높이기
캐롯 디자인시스템 1.1.0 ver을 통해 사용자들이 청약 단계마다 무엇을 해야 하는지 더 쉽게 이해할 수 있도록 디자인을 개선했어요. 예를 들어, 이전에는 다양한 화면을 보고 무엇을 해야 할지 헷갈렸다면, 이제는 각 단계마다 같은 방법으로 정보를 입력하고 확인할 수 있게 되었죠. 현재도 꾸준히 캐롯의 웹사이트와 모바일 애플리케이션의 사용성을 점검하고 고민하며 사용자들이 캐롯을 더 신뢰할 수 있도록 경험을 매끄럽게 다듬는 작업을 지속하고 있어요.
앞으로는 사용자 경험의 일관성을 넘어서 캐롯의 서비스와 보험 가입에 신뢰와 안정감이 들 수 있도록 디자인 시스템을 확장할 예정이에요. 캐롯손해보험이 사용자 경험을 위해 어떤 개선을 진행하는지 기대해 주세요!
©️Carrot General Insurance
Projected by Carrot Brand & Design Center
/ Carrot UX Design Team
Written by Wendy
/ Product Designer
-
캐롯손해보험
브랜드&디자인본부 발행
