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

혜택가맹점 추천

우수회원 전환 유도

금융서비스 추천

금융서비스

감사합니다 .

박천수 그룹장

pcs@pulipinc.com