Download - 접근성캠프3차 금융서비스의 멀티채널 디자인 박천수(0612)
금융서비스의 멀티채널 디자인
스마트미디어그룹 박천수 그룹장
http://niti-nat.com/2012/07/24/addiction-to-technology/
http://russadcox.wordpress.com/2013/01/07/screen-addiction/
http://en.wikipedia.org/wiki/File:Cuddling_with_multiple_devices.jpg
Always ON !
C 세대 _Connected Customer
커뮤니케이션
정보검색
커머스
엔터테인먼트
항상 연결되어 있으며 (Connection),
능동적으로 컨텐츠를 만들어 냅니다 (Creation).
수집된 정보를 선별하여 가치를 부여하고 전파합니다 (Curation).
MO
BILE
UI 일관성 (coherence) 동기화 (synchronization) 스크린공유 (screen sharing)
단말이동 (device shifting) 상호보완 (complementarity) 동시성 (simultane-ity)
http://www.slideshare.net/preciousforever/patterns-for-multiscreen-strategies
The New Multi-Screen World Study – Google
다중 스크린 이용 모드
순차적 사용
동시 사용
The New Multi-Screen World Study – Google
순차적 사용
Source : adobe
채널이용 사용자 시나리오
고객 관심사 파악 고려 사항 의사 결정 구매
Journey map
모바일영업지원 – KPS( 주요경로시나리오 )
모바일영업지원 – journey map
서비스디자인 기반 구축
* UX 컨설팅을 기반으로 한 고객지향적 영업지원시스템 구축- 프로젝트 초기 2 개월 UX 컨설팅 진행- FC 설문을 통한 핵심기능 요소 식별- FGI(Focus Group Interview) 를 통한 고객 컨설팅 Process 모델링
ING 생명 모바일 SFA
고객신뢰
참고 : ACCENTURE, BACKBASE
TIME
CHANNEL
CONTENT
RIGHT(relevant)
ME
KNOWSHOWENABLEVALUE
mission. 고객접점 ( 채널 ) 확대
디지에코 보고서 : ICT 와 리테일의 만남 : 옴니 채널 (Omni-Channel)
모든 채널이 유기적으로 통합되어야
더 이상 깔대기로는 ... 스며드는 서비스
SNS
M.APPs
M.WEB
PC.WEB 지점 / 고객센터
모바일 우선 전략
상시성
위치성
집단지성
즉시성
이동성
개인성
때와 장소에 무관한 서비스
위치기반 연동 정보 제공
기존 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
온라인 채널도 고객 친절 서비스가 필요하지 않을까 ?
고객의 동선을 고려한 지점 설계 신속한 업무 처리 ( 대기 시간 최소화 )
고객이 많이 찾는 업무 창구 입구쪽 배치인적 상담을 통한 명확한 정보 제공 친절한 안내 및 피드백 등등등…
고객은 온라인 서비스에서 불편함을 느낄 때 오프라인 보다 더 빨리 서비스를 이탈
UX 는 사람이 아닌 “온라인 서비스 자체에 친절의 정신을 심어 두는 것”
고객의 온라인 동선을 고려한 서비스 제공 원하는 메뉴에 빨리 접근할 수 있는 네비게이션 고객이 많이 찾는 메뉴를 가장 먼저 노출 안내 , 알람 , 강조 등의 기능을 통한 사용자 인지 이용 도중에 길을 잃지 않도록 서비스 가이드 등등등…
OFF LINE SERVICE ON LINE SERVICE
사용자의 Wants 에 기반한 디자인 전략 수립
기업의 Brand Identity
Style GuideDevice/OSUI Guide
인터렉션디자인 1) 원칙
디자인 전략
+ +
사용자 경험사용자 감성
• 기업 브랜드 이미지에 기반하면서도 트렌드한 감성을 전달 할 수 있는 스타일
• 사용자의 스마트단말 사용경험에 반하지 않는 가이드 준수
• 인터렉션디자인 기본 원칙에 충실한 UI 가이드라인
디자인 요소
색상
배치
서체
이미지요소
_ 주조색 , 보조색 , 강조색 _
_ 레이아웃 , 그리드 _
_ 폰트 , 사이즈 , 폰트컬러 _
_ 일러스트 , 아이콘 , 블릿… _
디바이스 사용성
네비게이션
탑재 / 배포
시스템 UI
_ 크기 , 터치영역 , 제조사별 PUI (물리버튼 )_
_ 이전 / 위로 , 뷰전환 , 앱간전환 _
_앱아이콘 , 브랜딩요소 , 스토어 게시가이드 _
_ 시스템통지 , 위젯 , 설정 , 접근성 _
제스쳐 & 트랜지션
디자인 패턴
사용성 체크리스트
UI 요소
_ 터치외 제스처 가이드 , 트랜지션 가이드 _
_ 네비게이션 , 폼 , 테이블 & 리스트 , 검색 / 정렬 , 툴바 , 인비테이션 / 도움말 , 피드백… _
_ 사용자 대상 사용성 평가 가이드 _
_ 타이틀 , 메뉴 , 탭 , 버튼 , 레이블 , 스크롤 , 페이지표현 , 팝업 , 안내문구 , progress, 픽커… _
멀티미디어 사용 _ 이미지 , 사운드 , 비디오 , 애니메이션 _
스타일 공통 정의 _ 네이밍룰 , UI 요소와 페이지의 기본 스타일 정의 _
다 해상도 대응 _ 반응형 그리드 , 미디어쿼리 사용 _
접근성 _ 접근성 고려사항 , 모바일웹 / 하이브리드앱 _
스타일가이드
디바이스 /OS UI 가이드
인터렉션디자인가이드
퍼블리싱가이드
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
Value added 모바일 서비스 사례
* 동부화재 길라잡이 APP / 컨텐츠 - Adobe AIR 기술을 기반으로 동적 니즈유발 컨텐츠 제작 - 상품정보 , 동영상 , 이미지 등의 태블릿 컨텐츠 최적화
* IBK 기업은행 스마트상담창구 구축 - 예금 , 보험 , 펀드 등 각종 상품정보를 동적으로 제작 - 창구 비치용과 고객 배포용 어플리케이션 (iPAD)
금융서비스 오픈웹 사례
국내 최초 다이렉트 생명보험사 교보라이프플래닛 구축
미래에셋생명 다이렉트
접근성 준수
멀티 브라우저 지원
모바일 지원
시니어 뱅킹 사례
HOT. digital stamp, iBeacon(ble)
지불/ 결제
쿠폰/ 혜택
맴버쉽/ 로열티
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( 개인정보 , 성향 등 )
혜택가맹점 추천
우수회원 전환 유도
금융서비스 추천
금융서비스