접근성캠프3차 금융서비스의 멀티채널 디자인 박천수(0612)
TRANSCRIPT
![Page 1: 접근성캠프3차 금융서비스의 멀티채널 디자인 박천수(0612)](https://reader038.vdocuments.net/reader038/viewer/2022102722/55859225d8b42aca7b8b4912/html5/thumbnails/1.jpg)
금융서비스의 멀티채널 디자인
스마트미디어그룹 박천수 그룹장
![Page 2: 접근성캠프3차 금융서비스의 멀티채널 디자인 박천수(0612)](https://reader038.vdocuments.net/reader038/viewer/2022102722/55859225d8b42aca7b8b4912/html5/thumbnails/2.jpg)
http://niti-nat.com/2012/07/24/addiction-to-technology/
![Page 3: 접근성캠프3차 금융서비스의 멀티채널 디자인 박천수(0612)](https://reader038.vdocuments.net/reader038/viewer/2022102722/55859225d8b42aca7b8b4912/html5/thumbnails/3.jpg)
http://russadcox.wordpress.com/2013/01/07/screen-addiction/
![Page 4: 접근성캠프3차 금융서비스의 멀티채널 디자인 박천수(0612)](https://reader038.vdocuments.net/reader038/viewer/2022102722/55859225d8b42aca7b8b4912/html5/thumbnails/4.jpg)
http://en.wikipedia.org/wiki/File:Cuddling_with_multiple_devices.jpg
Always ON !
![Page 5: 접근성캠프3차 금융서비스의 멀티채널 디자인 박천수(0612)](https://reader038.vdocuments.net/reader038/viewer/2022102722/55859225d8b42aca7b8b4912/html5/thumbnails/5.jpg)
C 세대 _Connected Customer
커뮤니케이션
정보검색
커머스
엔터테인먼트
항상 연결되어 있으며 (Connection),
능동적으로 컨텐츠를 만들어 냅니다 (Creation).
수집된 정보를 선별하여 가치를 부여하고 전파합니다 (Curation).
MO
BILE
![Page 6: 접근성캠프3차 금융서비스의 멀티채널 디자인 박천수(0612)](https://reader038.vdocuments.net/reader038/viewer/2022102722/55859225d8b42aca7b8b4912/html5/thumbnails/6.jpg)
UI 일관성 (coherence) 동기화 (synchronization) 스크린공유 (screen sharing)
단말이동 (device shifting) 상호보완 (complementarity) 동시성 (simultane-ity)
http://www.slideshare.net/preciousforever/patterns-for-multiscreen-strategies
![Page 7: 접근성캠프3차 금융서비스의 멀티채널 디자인 박천수(0612)](https://reader038.vdocuments.net/reader038/viewer/2022102722/55859225d8b42aca7b8b4912/html5/thumbnails/7.jpg)
The New Multi-Screen World Study – Google
다중 스크린 이용 모드
순차적 사용
동시 사용
![Page 8: 접근성캠프3차 금융서비스의 멀티채널 디자인 박천수(0612)](https://reader038.vdocuments.net/reader038/viewer/2022102722/55859225d8b42aca7b8b4912/html5/thumbnails/8.jpg)
The New Multi-Screen World Study – Google
순차적 사용
![Page 9: 접근성캠프3차 금융서비스의 멀티채널 디자인 박천수(0612)](https://reader038.vdocuments.net/reader038/viewer/2022102722/55859225d8b42aca7b8b4912/html5/thumbnails/9.jpg)
Source : adobe
채널이용 사용자 시나리오
고객 관심사 파악 고려 사항 의사 결정 구매
![Page 10: 접근성캠프3차 금융서비스의 멀티채널 디자인 박천수(0612)](https://reader038.vdocuments.net/reader038/viewer/2022102722/55859225d8b42aca7b8b4912/html5/thumbnails/10.jpg)
Journey map
![Page 11: 접근성캠프3차 금융서비스의 멀티채널 디자인 박천수(0612)](https://reader038.vdocuments.net/reader038/viewer/2022102722/55859225d8b42aca7b8b4912/html5/thumbnails/11.jpg)
모바일영업지원 – KPS( 주요경로시나리오 )
![Page 12: 접근성캠프3차 금융서비스의 멀티채널 디자인 박천수(0612)](https://reader038.vdocuments.net/reader038/viewer/2022102722/55859225d8b42aca7b8b4912/html5/thumbnails/12.jpg)
모바일영업지원 – journey map
![Page 13: 접근성캠프3차 금융서비스의 멀티채널 디자인 박천수(0612)](https://reader038.vdocuments.net/reader038/viewer/2022102722/55859225d8b42aca7b8b4912/html5/thumbnails/13.jpg)
서비스디자인 기반 구축
* UX 컨설팅을 기반으로 한 고객지향적 영업지원시스템 구축- 프로젝트 초기 2 개월 UX 컨설팅 진행- FC 설문을 통한 핵심기능 요소 식별- FGI(Focus Group Interview) 를 통한 고객 컨설팅 Process 모델링
ING 생명 모바일 SFA
![Page 14: 접근성캠프3차 금융서비스의 멀티채널 디자인 박천수(0612)](https://reader038.vdocuments.net/reader038/viewer/2022102722/55859225d8b42aca7b8b4912/html5/thumbnails/14.jpg)
고객신뢰
참고 : ACCENTURE, BACKBASE
TIME
CHANNEL
CONTENT
RIGHT(relevant)
ME
KNOWSHOWENABLEVALUE
mission. 고객접점 ( 채널 ) 확대
![Page 15: 접근성캠프3차 금융서비스의 멀티채널 디자인 박천수(0612)](https://reader038.vdocuments.net/reader038/viewer/2022102722/55859225d8b42aca7b8b4912/html5/thumbnails/15.jpg)
디지에코 보고서 : ICT 와 리테일의 만남 : 옴니 채널 (Omni-Channel)
모든 채널이 유기적으로 통합되어야
![Page 16: 접근성캠프3차 금융서비스의 멀티채널 디자인 박천수(0612)](https://reader038.vdocuments.net/reader038/viewer/2022102722/55859225d8b42aca7b8b4912/html5/thumbnails/16.jpg)
더 이상 깔대기로는 ... 스며드는 서비스
SNS
M.APPs
M.WEB
PC.WEB 지점 / 고객센터
![Page 17: 접근성캠프3차 금융서비스의 멀티채널 디자인 박천수(0612)](https://reader038.vdocuments.net/reader038/viewer/2022102722/55859225d8b42aca7b8b4912/html5/thumbnails/17.jpg)
모바일 우선 전략
상시성
위치성
집단지성
즉시성
이동성
개인성
때와 장소에 무관한 서비스
위치기반 연동 정보 제공
기존 PC 서비스의 모바일 전이
개인화 Offering / 추천 / 소통
실시간 소통 및 혜택 제공
Social 커뮤니티
SNS, Game,Commerce
My page, Events, Consulting
Push, Alarm, Chatting, Coupon
PC Contents & Service, Multimedia
Ordering, Reservation, Ticketing
Coupon, Advertising, Events
모바일 서비스의 핵심 Value 를 어떤 방향으로 활용하는지가 관건 입니다 . “ 모바일 시대에서는 각종 개인화된 경험을 제공하는 서비스가 곧 인터넷의 미래” _ yahoo 의 Marissa Mayer CEO
![Page 18: 접근성캠프3차 금융서비스의 멀티채널 디자인 박천수(0612)](https://reader038.vdocuments.net/reader038/viewer/2022102722/55859225d8b42aca7b8b4912/html5/thumbnails/18.jpg)
온라인 채널도 고객 친절 서비스가 필요하지 않을까 ?
고객의 동선을 고려한 지점 설계 신속한 업무 처리 ( 대기 시간 최소화 )
고객이 많이 찾는 업무 창구 입구쪽 배치인적 상담을 통한 명확한 정보 제공 친절한 안내 및 피드백 등등등…
고객은 온라인 서비스에서 불편함을 느낄 때 오프라인 보다 더 빨리 서비스를 이탈
UX 는 사람이 아닌 “온라인 서비스 자체에 친절의 정신을 심어 두는 것”
고객의 온라인 동선을 고려한 서비스 제공 원하는 메뉴에 빨리 접근할 수 있는 네비게이션 고객이 많이 찾는 메뉴를 가장 먼저 노출 안내 , 알람 , 강조 등의 기능을 통한 사용자 인지 이용 도중에 길을 잃지 않도록 서비스 가이드 등등등…
OFF LINE SERVICE ON LINE SERVICE
![Page 19: 접근성캠프3차 금융서비스의 멀티채널 디자인 박천수(0612)](https://reader038.vdocuments.net/reader038/viewer/2022102722/55859225d8b42aca7b8b4912/html5/thumbnails/19.jpg)
사용자의 Wants 에 기반한 디자인 전략 수립
기업의 Brand Identity
Style GuideDevice/OSUI Guide
인터렉션디자인 1) 원칙
디자인 전략
+ +
사용자 경험사용자 감성
• 기업 브랜드 이미지에 기반하면서도 트렌드한 감성을 전달 할 수 있는 스타일
• 사용자의 스마트단말 사용경험에 반하지 않는 가이드 준수
• 인터렉션디자인 기본 원칙에 충실한 UI 가이드라인
![Page 20: 접근성캠프3차 금융서비스의 멀티채널 디자인 박천수(0612)](https://reader038.vdocuments.net/reader038/viewer/2022102722/55859225d8b42aca7b8b4912/html5/thumbnails/20.jpg)
디자인 요소
색상
배치
서체
이미지요소
_ 주조색 , 보조색 , 강조색 _
_ 레이아웃 , 그리드 _
_ 폰트 , 사이즈 , 폰트컬러 _
_ 일러스트 , 아이콘 , 블릿… _
디바이스 사용성
네비게이션
탑재 / 배포
시스템 UI
_ 크기 , 터치영역 , 제조사별 PUI (물리버튼 )_
_ 이전 / 위로 , 뷰전환 , 앱간전환 _
_앱아이콘 , 브랜딩요소 , 스토어 게시가이드 _
_ 시스템통지 , 위젯 , 설정 , 접근성 _
제스쳐 & 트랜지션
디자인 패턴
사용성 체크리스트
UI 요소
_ 터치외 제스처 가이드 , 트랜지션 가이드 _
_ 네비게이션 , 폼 , 테이블 & 리스트 , 검색 / 정렬 , 툴바 , 인비테이션 / 도움말 , 피드백… _
_ 사용자 대상 사용성 평가 가이드 _
_ 타이틀 , 메뉴 , 탭 , 버튼 , 레이블 , 스크롤 , 페이지표현 , 팝업 , 안내문구 , progress, 픽커… _
멀티미디어 사용 _ 이미지 , 사운드 , 비디오 , 애니메이션 _
스타일 공통 정의 _ 네이밍룰 , UI 요소와 페이지의 기본 스타일 정의 _
다 해상도 대응 _ 반응형 그리드 , 미디어쿼리 사용 _
접근성 _ 접근성 고려사항 , 모바일웹 / 하이브리드앱 _
스타일가이드
디바이스 /OS UI 가이드
인터렉션디자인가이드
퍼블리싱가이드
![Page 21: 접근성캠프3차 금융서비스의 멀티채널 디자인 박천수(0612)](https://reader038.vdocuments.net/reader038/viewer/2022102722/55859225d8b42aca7b8b4912/html5/thumbnails/21.jpg)
mobile app & mobile web
Value-added
‘10 ‘11 ‘12 ‘13
Account
‘14
Brand /Catalog 2010.11
LIG손해보험 MW
2012.08 삼성화재 MW/A
2011.06 IBK MW ( 반응형 , 소셜로그인 )
2009.11 iPhone 출시
2011년말MW 공인인증
2009.12 하나 N Bank
APP
WEB
‘15
![Page 22: 접근성캠프3차 금융서비스의 멀티채널 디자인 박천수(0612)](https://reader038.vdocuments.net/reader038/viewer/2022102722/55859225d8b42aca7b8b4912/html5/thumbnails/22.jpg)
Value added 모바일 서비스 사례
* 동부화재 길라잡이 APP / 컨텐츠 - Adobe AIR 기술을 기반으로 동적 니즈유발 컨텐츠 제작 - 상품정보 , 동영상 , 이미지 등의 태블릿 컨텐츠 최적화
* IBK 기업은행 스마트상담창구 구축 - 예금 , 보험 , 펀드 등 각종 상품정보를 동적으로 제작 - 창구 비치용과 고객 배포용 어플리케이션 (iPAD)
![Page 23: 접근성캠프3차 금융서비스의 멀티채널 디자인 박천수(0612)](https://reader038.vdocuments.net/reader038/viewer/2022102722/55859225d8b42aca7b8b4912/html5/thumbnails/23.jpg)
금융서비스 오픈웹 사례
국내 최초 다이렉트 생명보험사 교보라이프플래닛 구축
미래에셋생명 다이렉트
접근성 준수
멀티 브라우저 지원
모바일 지원
![Page 24: 접근성캠프3차 금융서비스의 멀티채널 디자인 박천수(0612)](https://reader038.vdocuments.net/reader038/viewer/2022102722/55859225d8b42aca7b8b4912/html5/thumbnails/24.jpg)
시니어 뱅킹 사례
![Page 25: 접근성캠프3차 금융서비스의 멀티채널 디자인 박천수(0612)](https://reader038.vdocuments.net/reader038/viewer/2022102722/55859225d8b42aca7b8b4912/html5/thumbnails/25.jpg)
HOT. digital stamp, iBeacon(ble)
지불/ 결제
쿠폰/ 혜택
맴버쉽/ 로열티
![Page 26: 접근성캠프3차 금융서비스의 멀티채널 디자인 박천수(0612)](https://reader038.vdocuments.net/reader038/viewer/2022102722/55859225d8b42aca7b8b4912/html5/thumbnails/26.jpg)
Context Based Service
Location
Activity
Time
. Home
. Office
. 번화가
. 외국
. QR Code 인식
. Driving
. Shopping
. Sporting Event
. Movie
. Schedule
. Day of Week
. Time of Day
Contextual Data+
추가 Data( 개인정보 , 성향 등 )
혜택가맹점 추천
우수회원 전환 유도
금융서비스 추천
금융서비스