drawyourmind
Back to Works
Company Project
2015.07 - 2016.01

메리츠화재 다이렉트 자동차보험

메리츠화재 다이렉트 자동차보험의 PC 리뉴얼과 모바일 신규 구축 프로젝트입니다. 이트라이브가 기획·디자인·프론트엔드를 맡은 메인 개발사로 참여해 AngularJS로 스텝형 가입 UI를 개발했습니다.

AngularJS
Grunt
JavaScript
메리츠화재 다이렉트 자동차보험

프로젝트 개요

메리츠화재 자동차보험의 모바일 다이렉트 서비스 신규 런칭과 시장 점유율·포지션 강화를 목표로, PC 버전 리뉴얼과 모바일 버전 신규 구축을 함께 진행한 대규모 프로젝트입니다. 이트라이브(eTRIBE)는 기획, 디자인, 프론트엔드 개발을 맡은 메인 개발사로 참여했고 백엔드 서버는 외주사가 담당했습니다. 당시 가장 유행하던 AngularJS 프레임워크와 Grunt 빌드 툴을 선택했는데, AngularJS가 낯설어 익히는 데 애를 먹었던 기억이 있습니다. 한창 자바스크립트 프레임워크가 발전하던 시절이었습니다.

메리츠화재 다이렉트

모바일 중심의 UX

당시 보험사 다이렉트 서비스 이용자는 PC보다 모바일 비중이 월등히 높았고, 다이렉트 보험의 후발주자였던 메리츠화재는 모바일 서비스와 UX/UI에 특히 힘을 실었습니다. 현업 담당자분이 매우 꼼꼼하고 디테일을 중시해 완성도에 많은 공을 들였습니다. 이와 함께 메리츠화재의 모바일 다이렉트 보험 캐릭터 몬디를 개발했고, 이후로도 꾸준히 활용되고 있습니다.

몬디

스텝형 가입 UI

다이렉트 보험은 가입 과정이 단계별로 진행되기 때문에, 하나의 스텝을 한 장의 패널로 보고 패널이 슬라이드로 넘어가는 UI를 채택해 스텝 간 이동을 자연스럽게 만들었습니다. 그 밖에도 작은 디테일까지 신경을 많이 쓴 프로젝트입니다. 오픈 후에는 기존 보험료 대비 높은 할인율의 가격 경쟁력이 더해져 자동차 다이렉트 가입률이 급격히 올랐습니다. 힘들었지만 기억에 많이 남는 프로젝트입니다.

가입 화면