01 Mobile Projection
모바일 인수증 시스템 구축
우리금융캐피탈에서 UI/UX 디자이너이자 퍼블리셔로서, 디자인과 퍼블리싱 전반을 책임지며 다양한 프로젝트와 유지보수를 수행해왔습니다.
2024년에는 모바일 기능성 강화를 목표로 여러 모바일 프로젝트를 주도적으로 기획하고 디자인했습니다.
특히 고객과 딜러의 편의성을 극대화하기 위해 오토 금융상품의
모바일 경험을 우선적으로 개선했습니다. 그 결과, 중고차 승계, 렌터카 모바일 인수증, 신차 재구매 프로세스 등 다양한 서비스가 사용자 친화적으로 설계 및 구현되었습니다.
이를 통해 고객들은 더욱 간편하게 서비스를 이용할 수 있었고,
즉각적인 대응이 가능해져 만족도가 크게 향상되었습니다.
또한, 업무 프로세스가 효율화되면서 불필요한 반복 업무가 줄어들어 전반적인 업무량이 감소하는 긍정적인 효과도 나타났습니다.
디자인을 만드는 건 물론, 사용자 중심의 기획부터 퍼블리싱까지 모든 과정을 주도적으로 설계하고 실행해왔습니다.
사용자의 요구와 비즈니스 목표를 깊이 이해하고, 이를 명확하고
실질적인 결과물로 연결하는 데 강점을 가지고 있습니다.
ux strategy
디지털 인수증 도입 프로젝트를 위한 UX 전략을 세웠습니다.
As-is
사용자의 관점
서면 작성으로 시간 소요
작성 과정시 오류발생 가능성 높음
이용을 위해 지점을 방문해야 하는 번거로움
to-be
사용자의 관점
모바일로 간편하고 빠르게 작성 가능
실시간 확인으로 오류 최소화
지점 방문 없이 어디서든 서비스 이용 가능
As-is
지점/업무 관점
수작업 처리로 업무 비효율
데이터 관리와 추적이 어려움
업무 속도가 느려 고객 대기 시간 증가
to-be
지점/업무 관점
디지털화로 업무 간소화 및 효율 증가
자동 기록으로 데이터 관리 용이
처리 속도 향상으로 고객 만족도 상승
ux concept
UX 전략과 사용자들의 연령대를 고려하여 누구나 사용하기 쉽고 편리하게 구성했습니다.
① 신속하고 직관적인
디지털 인터페이스
종이 인수증을 디지털화하여 빠르고 간편하게 작성 및 처리 가능.
② 단계별 진행 상태 표시
사용자가 작성 과정을 명확히 인지할 수 있도록 직관적인 단계 표시
③ 모바일 최적화
디지털화된 인수증을 어디서나 작성 및 제출 가능하도록 반응형 UI 제공
Design System
기존 디자인 가이드 시스템을 활용하여 UI를 제작함으로써 디자인의 일관성을 유지하고, 사용자가 익숙한 경험을 제공할 수 있도록 하였으며, 개발과의 협업을 원활하게 진행할 수 있도록 하였습니다
TYPOGRAPHY
우리금융캐피탈
디자인 가이드
확인해보기
Light
Regular
Blod
KR
Noto Sans KR
가독성과 전달력이 뛰어난 노토산스는 우리금융캐피탈의 기본 한글 서체입니다.
EN
Roboto
로보토는 구글 공식 서체로 다양한 환경에서 최적화된
우리금융캐피탈의 영문 기본 서체입니다.
color System
#1056C3
#D0E9FC
Primary
Gray scales
#1490EF
#1056C3
#D0E9FC
Gray scales
color System
Primary
#1490EF
#1056C3
#D0E9FC
#1056C3
Gray scales
#D0E9FC
Gray scales
ux concept
UX 전략과 사용자들의 연령대를 고려하여 누구나 사용하기 쉽고 편리하게 구성했습니다.
① 신속하고 직관적인
디지털 인터페이스
종이 인수증을 디지털화하여 빠르고 간편하게 작성 및 처리 가능.
② 단계별 진행 상태 표시
사용자가 작성 과정을 명확히 인지할 수 있도록 직관적인 단계 표시
③ 모바일 최적화
디지털화된 인수증을 어디서나 작성 및 제출 가능하도록 반응형 UI 제공
ux strategy
디지털 인수증 도입 프로젝트를 위한 UX 전략을 세웠습니다.
As-is
TO-BE
사용자의 관점
사용자의 관점
서면 작성으로 시간 소요
모바일로 간편하고 빠르게 작성 가능
작성 과정시 오류발생 가능성 높음
실시간 확인으로 오류 최소화
서비스 이용을 위해 지점을 방문해야 하는 번거로움
지점 방문 없이 어디서든 서비스 이용 가능
지점/업무 관점
지점/업무 관점
수작업 처리로 업무 비효율
디지털화로 업무 간소화 및 효율 증가
데이터 관리와 추적이 어려움
자동 기록으로 데이터 관리 용이
업무 속도가 느려 고객 대기 시간 증가
처리 속도 향상으로 고객 만족도 상승
ux concept
UX 전략과 사용자들의 연령대를 고려하여 누구나 사용하기 쉽고 편리하게 구성했습니다.
1
신속하고 직관적인
디지털 인터페이스
종이 인수증을 디지털화하여 빠르고 간편하게 작성 및 처리 가능.
2
단계별 진행 상태 표시
사용자가 작성 과정을 명확히 인지할 수 있도록 직관적인 단계 표시
3
모바일 최적화
디지털화된 인수증을 어디서나 작성 및 제출 가능하도록 반응형 UI 제공
Design System
기존 디자인 가이드 시스템을 활용하여 UI를 제작함으로써 디자인의 일관성을 유지하고, 사용자가 익숙한 경험을 제공할 수 있도록 하였으며, 개발과의 협업을 원활하게 진행할 수 있도록 하였습니다
TYPOGRAPHY
우리금융캐피탈
디자인 가이드
확인해보기
Light
Regular
Blod
KR
Noto Sans KR
가독성과 전달력이 뛰어난 노토산스는 우리금융캐피탈의 기본 한글 서체입니다.
EN
Roboto
로보토는 구글 공식 서체로 다양한 환경에서 최적화된
우리금융캐피탈의 영문 기본 서체입니다
color System
Primary
#1490EF
#1056C3
#D0E9FC
Gray scales
ui Design
기존 디자인 가이드 시스템을 활용하여 UI를 제작해 디자인의 일관성을 유지하고, 고객과 딜러의 편의성을 극대화하기 위해 인수증을
모바일 환경에서 처음으로 제공하였습니다.
모바일 인수증 프로세스
기여도 : 기획,디자인,퍼블리싱 100%
프로그램: xd, Illustrator , visual studio code
STEP 01
본인 확인
STEP 02
차량 정보 확인
STEP 03
차량 상태 확인
STEP 04
차량 인수 확인
STEP 05
인수증 작성 완료
STEP 06
완료
UI DESIGN 01
한눈에 확인 가능한 차량 및 인수 정보
기존 종이 인수증을 모바일 환경으로 전환하여, 사용자가 한눈에 차량 정보와 인수 정보를 확인할 수 있도록 구성하였습니다. 차량 모델, 등록 번호, 주요 계약 사항 등을 직관적인 UI로 제공하여 빠르게 정보를 확인할 수 있습니다.
UI DESIGN 02
체크박스를 통한 더블체크 기능 제공
사용자가 직접 체크박스를 선택하여 필수 확인 항목을 점검할 수 있도록 설계하였습니다. 이를 통해 인수 과정에서 중요한
정보를 다시 한번 검토할 수 있으며, 체크한 항목은 시스템에 자동 저장되어 인수 과정의 신뢰도를 높였습니다.
UI DESIGN 03
스텝 인디케이터 적용
단계별 진행 상황을 시각적으로 안내하기 위해 스텝 인디케이터를 적용하였습니다. 이를 통해 사용자는 현재 진행 단계와
남은 절차를 쉽게 파악할 수 있으며, 단계별 안내를 따라 자연스럽게 다음 단계로 이동할 수 있도록 구성하였습니다.
UI DESIGN 04
마지막 안내사항 제공
인수 완료 후, 최종적으로 확인해야 할 안내 사항을 사용자에게 명확하게 전달합니다. 이를 통해 인수 과정에서 놓칠 수 있는 중요한 정보를 제공하고, 사용자가 원활하게 차량을 인수할 수 있도록 설계하였습니다
모바일 인수증 프로젝트 결과
모바일 인수증 도입 이후 달라진 점과 주요 성과를 정리했습니다.
지점 지원 업무 간소화 및 효율성 향상
수작업을 줄이고 자동화 시스템을 도입하여 운영 효율과 직원 생산성을 높였습니다.
렌트 선급 확정 기간 단축 및 수익 조기 실현
인수 절차를 간소화하여 렌트 선급 확정 기간을 단축하고, 계약 진행 속도를 높여
수익 실현 시점을 앞당겼습니다.
디지털 전환 및 사용자 편의성 강화
모바일 환경에서 인수 절차를 처음 도입하여 언제 어디서나 진행할 수 있도록 했으며, 직관적인 UI/UX 설계를 통해 사용자의 부담을 최소화하였습니다.
데이터 오류 감소 및 신뢰도 높은 인수 절차 구축
자동 검증 시스템을 도입해 데이터 오류를 줄이고, 계약 및 인수 과정의 신뢰도를 높여 사용자와 기업 간 원활한 업무 처리가 이루어지도록 개선하였습니다.
ui Design
UX 전략과 사용자들의 연령대를 고려하여 누구나 사용하기 쉽고 편리하게 구성했습니다.
모바일 인수증 프로세스
기여도
기획,디자인,퍼블리싱 100%
프로그램
xd, Illustrator , visual studio code
STEP 01
본인 확인
STEP 02
차량 정보 확인
STEP 03
차량 상태 확인
STEP 04
차량 인수 확인
STEP 05
인수증 작성 완료
STEP 06
완료
UI DESIGN 01
한눈에 확인 가능한 차량 및 인수 정보
기존 종이 인수증을 모바일 환경으로 전환하여, 사용자가 한눈에 차량 정보와 인수 정보를 확인할 수 있도록 구성하였습니다. 차량 모델, 등록 번호, 주요 계약 사항 등을 직관적인 UI로 제공하여 빠르게 정보를 확인할 수 있습니다.
UI DESIGN 02
체크박스를 통한 더블체크 기능 제공
사용자가 직접 체크박스를 선택하여 필수 확인 항목을 점검할 수 있도록 설계하였습니다. 이를 통해 인수 과정에서 중요한
정보를 다시 한번 검토할 수 있으며, 체크한 항목은 시스템에 자동 저장되어 인수 과정의 신뢰도를 높였습니다.
UI DESIGN 03
스텝 인디케이터 적용
단계별 진행 상황을 시각적으로 안내하기 위해 스텝 인디케이터를 적용하였습니다. 이를 통해 사용자는 현재 진행 단계와 남은 절차를 쉽게 파악할 수 있으며, 단계별 안내를 따라 자연스럽게 다음 단계로 이동할 수 있도록 구성하였습니다.
UI DESIGN 04
마지막 안내사항 제공
인수 완료 후, 최종적으로 확인해야 할 안내 사항을 사용자에게 명확하게 전달합니다. 이를 통해 인수 과정에서 놓칠 수 있는 중요한 정보를 제공하고, 사용자가 원활하게 차량을 인수할 수 있도록 설계하였습니다
