27
금금금금금금 금금금금 금금금 금금금금금금금금 금금금 금금금

접근성캠프3차 금융서비스의 멀티채널 디자인 박천수(0612)

Embed Size (px)

Citation preview

Page 1: 접근성캠프3차 금융서비스의 멀티채널 디자인 박천수(0612)

금융서비스의 멀티채널 디자인

스마트미디어그룹 박천수 그룹장

Page 2: 접근성캠프3차 금융서비스의 멀티채널 디자인 박천수(0612)

http://niti-nat.com/2012/07/24/addiction-to-technology/

Page 3: 접근성캠프3차 금융서비스의 멀티채널 디자인 박천수(0612)

http://russadcox.wordpress.com/2013/01/07/screen-addiction/

Page 4: 접근성캠프3차 금융서비스의 멀티채널 디자인 박천수(0612)

http://en.wikipedia.org/wiki/File:Cuddling_with_multiple_devices.jpg

Always ON !

Page 5: 접근성캠프3차 금융서비스의 멀티채널 디자인 박천수(0612)

C 세대 _Connected Customer

커뮤니케이션

정보검색

커머스

엔터테인먼트

항상 연결되어 있으며 (Connection),

능동적으로 컨텐츠를 만들어 냅니다 (Creation).

수집된 정보를 선별하여 가치를 부여하고 전파합니다 (Curation).

MO

BILE

Page 6: 접근성캠프3차 금융서비스의 멀티채널 디자인 박천수(0612)

UI 일관성 (coherence) 동기화 (synchronization) 스크린공유 (screen sharing)

단말이동 (device shifting) 상호보완 (complementarity) 동시성 (simultane-ity)

http://www.slideshare.net/preciousforever/patterns-for-multiscreen-strategies

Page 7: 접근성캠프3차 금융서비스의 멀티채널 디자인 박천수(0612)

The New Multi-Screen World Study – Google

다중 스크린 이용 모드

순차적 사용

동시 사용

Page 8: 접근성캠프3차 금융서비스의 멀티채널 디자인 박천수(0612)

The New Multi-Screen World Study – Google

순차적 사용

Page 9: 접근성캠프3차 금융서비스의 멀티채널 디자인 박천수(0612)

Source : adobe

채널이용 사용자 시나리오

고객 관심사 파악 고려 사항 의사 결정 구매

Page 10: 접근성캠프3차 금융서비스의 멀티채널 디자인 박천수(0612)

Journey map

Page 11: 접근성캠프3차 금융서비스의 멀티채널 디자인 박천수(0612)

모바일영업지원 – KPS( 주요경로시나리오 )

Page 12: 접근성캠프3차 금융서비스의 멀티채널 디자인 박천수(0612)

모바일영업지원 – journey map

Page 13: 접근성캠프3차 금융서비스의 멀티채널 디자인 박천수(0612)

서비스디자인 기반 구축

* UX 컨설팅을 기반으로 한 고객지향적 영업지원시스템 구축- 프로젝트 초기 2 개월 UX 컨설팅 진행- FC 설문을 통한 핵심기능 요소 식별- FGI(Focus Group Interview) 를 통한 고객 컨설팅 Process 모델링

ING 생명 모바일 SFA

Page 14: 접근성캠프3차 금융서비스의 멀티채널 디자인 박천수(0612)

고객신뢰

참고 : ACCENTURE, BACKBASE

TIME

CHANNEL

CONTENT

RIGHT(relevant)

ME

KNOWSHOWENABLEVALUE

mission. 고객접점 ( 채널 ) 확대

Page 15: 접근성캠프3차 금융서비스의 멀티채널 디자인 박천수(0612)

디지에코 보고서 : ICT 와 리테일의 만남 : 옴니 채널 (Omni-Channel)

모든 채널이 유기적으로 통합되어야

Page 16: 접근성캠프3차 금융서비스의 멀티채널 디자인 박천수(0612)

더 이상 깔대기로는 ... 스며드는 서비스

SNS

M.APPs

M.WEB

PC.WEB 지점 / 고객센터

Page 17: 접근성캠프3차 금융서비스의 멀티채널 디자인 박천수(0612)

모바일 우선 전략

상시성

위치성

집단지성

즉시성

이동성

개인성

때와 장소에 무관한 서비스

위치기반 연동 정보 제공

기존 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)

온라인 채널도 고객 친절 서비스가 필요하지 않을까 ?

고객의 동선을 고려한 지점 설계 신속한 업무 처리 ( 대기 시간 최소화 )

고객이 많이 찾는 업무 창구 입구쪽 배치인적 상담을 통한 명확한 정보 제공 친절한 안내 및 피드백 등등등…

고객은 온라인 서비스에서 불편함을 느낄 때 오프라인 보다 더 빨리 서비스를 이탈

UX 는 사람이 아닌 “온라인 서비스 자체에 친절의 정신을 심어 두는 것”

고객의 온라인 동선을 고려한 서비스 제공 원하는 메뉴에 빨리 접근할 수 있는 네비게이션 고객이 많이 찾는 메뉴를 가장 먼저 노출 안내 , 알람 , 강조 등의 기능을 통한 사용자 인지 이용 도중에 길을 잃지 않도록 서비스 가이드 등등등…

OFF LINE SERVICE ON LINE SERVICE

Page 19: 접근성캠프3차 금융서비스의 멀티채널 디자인 박천수(0612)

사용자의 Wants 에 기반한 디자인 전략 수립

기업의 Brand Identity

Style GuideDevice/OSUI Guide

인터렉션디자인 1) 원칙

디자인 전략

+ +

사용자 경험사용자 감성

• 기업 브랜드 이미지에 기반하면서도 트렌드한 감성을 전달 할 수 있는 스타일

• 사용자의 스마트단말 사용경험에 반하지 않는 가이드 준수

• 인터렉션디자인 기본 원칙에 충실한 UI 가이드라인

Page 20: 접근성캠프3차 금융서비스의 멀티채널 디자인 박천수(0612)

디자인 요소

색상

배치

서체

이미지요소

_ 주조색 , 보조색 , 강조색 _

_ 레이아웃 , 그리드 _

_ 폰트 , 사이즈 , 폰트컬러 _

_ 일러스트 , 아이콘 , 블릿… _

디바이스 사용성

네비게이션

탑재 / 배포

시스템 UI

_ 크기 , 터치영역 , 제조사별 PUI (물리버튼 )_

_ 이전 / 위로 , 뷰전환 , 앱간전환 _

_앱아이콘 , 브랜딩요소 , 스토어 게시가이드 _

_ 시스템통지 , 위젯 , 설정 , 접근성 _

제스쳐 & 트랜지션

디자인 패턴

사용성 체크리스트

UI 요소

_ 터치외 제스처 가이드 , 트랜지션 가이드 _

_ 네비게이션 , 폼 , 테이블 & 리스트 , 검색 / 정렬 , 툴바 , 인비테이션 / 도움말 , 피드백… _

_ 사용자 대상 사용성 평가 가이드 _

_ 타이틀 , 메뉴 , 탭 , 버튼 , 레이블 , 스크롤 , 페이지표현 , 팝업 , 안내문구 , progress, 픽커… _

멀티미디어 사용 _ 이미지 , 사운드 , 비디오 , 애니메이션 _

스타일 공통 정의 _ 네이밍룰 , UI 요소와 페이지의 기본 스타일 정의 _

다 해상도 대응 _ 반응형 그리드 , 미디어쿼리 사용 _

접근성 _ 접근성 고려사항 , 모바일웹 / 하이브리드앱 _

스타일가이드

디바이스 /OS UI 가이드

인터렉션디자인가이드

퍼블리싱가이드

Page 21: 접근성캠프3차 금융서비스의 멀티채널 디자인 박천수(0612)

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)

Value added 모바일 서비스 사례

* 동부화재 길라잡이 APP / 컨텐츠 - Adobe AIR 기술을 기반으로 동적 니즈유발 컨텐츠 제작 - 상품정보 , 동영상 , 이미지 등의 태블릿 컨텐츠 최적화

* IBK 기업은행 스마트상담창구 구축 - 예금 , 보험 , 펀드 등 각종 상품정보를 동적으로 제작 - 창구 비치용과 고객 배포용 어플리케이션 (iPAD)

Page 23: 접근성캠프3차 금융서비스의 멀티채널 디자인 박천수(0612)

금융서비스 오픈웹 사례

국내 최초 다이렉트 생명보험사 교보라이프플래닛 구축

미래에셋생명 다이렉트

접근성 준수

멀티 브라우저 지원

모바일 지원

Page 24: 접근성캠프3차 금융서비스의 멀티채널 디자인 박천수(0612)

시니어 뱅킹 사례

Page 25: 접근성캠프3차 금융서비스의 멀티채널 디자인 박천수(0612)

HOT. digital stamp, iBeacon(ble)

지불/ 결제

쿠폰/ 혜택

맴버쉽/ 로열티

Page 26: 접근성캠프3차 금융서비스의 멀티채널 디자인 박천수(0612)

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( 개인정보 , 성향 등 )

혜택가맹점 추천

우수회원 전환 유도

금융서비스 추천

금융서비스

Page 27: 접근성캠프3차 금융서비스의 멀티채널 디자인 박천수(0612)

감사합니다 .

박천수 그룹장

[email protected]