27
금융서비스의 멀티채널 디자인 스마트미디어그룹 박천수 그룹장

접근성캠프서울 세번째 이야기 - 금융서비스의 멀티채널 디자인 박천수(0612)

Embed Size (px)

DESCRIPTION

접근성캠프서울 세번째 이야기 - 스마트환경의 모바일 접근성에 대한 주제로 (주)플립커뮤니케이션즈 박천수그룹장의 금융서비스의 멀티채널 디자인에 대한 이야기입니다.

Citation preview

Page 1: 접근성캠프서울 세번째 이야기 - 금융서비스의 멀티채널 디자인 박천수(0612)

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

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

Page 2: 접근성캠프서울 세번째 이야기 - 금융서비스의 멀티채널 디자인 박천수(0612)

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

Page 3: 접근성캠프서울 세번째 이야기 - 금융서비스의 멀티채널 디자인 박천수(0612)

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

Page 4: 접근성캠프서울 세번째 이야기 - 금융서비스의 멀티채널 디자인 박천수(0612)

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

Always ON !

Page 5: 접근성캠프서울 세번째 이야기 - 금융서비스의 멀티채널 디자인 박천수(0612)

C세대_Connected Customer����������� ������������������  

커뮤니케이션

정보검색

커머스

엔터테인먼트

항상����������� ������������������  연결되어����������� ������������������  있으며����������� ������������������  (Connection), 능동적으로����������� ������������������  컨텐츠를����������� ������������������  만들어����������� ������������������  냅니다����������� ������������������  (Creation). 수집된����������� ������������������  정보를����������� ������������������  선별하여����������� ������������������  가치를����������� ������������������  부여하고����������� ������������������  전파합니다����������� ������������������  (Curation).����������� ������������������  

MO

BILE

Page 6: 접근성캠프서울 세번째 이야기 - 금융서비스의 멀티채널 디자인 박천수(0612)

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

단말이동����������� ������������������  (device shifting) 상호보완����������� ������������������  (complementarity) 동시성����������� ������������������  (simultaneity)����������� ������������������  

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

Page 7: 접근성캠프서울 세번째 이야기 - 금융서비스의 멀티채널 디자인 박천수(0612)

The New Multi-Screen World Study – Google����������� ������������������  

다중����������� ������������������  스크린����������� ������������������  이용����������� ������������������  모드����������� ������������������  

순차적����������� ������������������  사용����������� ������������������  

동시����������� ������������������  사용����������� ������������������  

Page 8: 접근성캠프서울 세번째 이야기 - 금융서비스의 멀티채널 디자인 박천수(0612)

The New Multi-Screen World Study – Google����������� ������������������  

순차적����������� ������������������  사용����������� ������������������  

Page 9: 접근성캠프서울 세번째 이야기 - 금융서비스의 멀티채널 디자인 박천수(0612)

Source : adobe����������� ������������������  

채널이용����������� ������������������  사용자����������� ������������������  시나리오����������� ������������������  

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

Page 10: 접근성캠프서울 세번째 이야기 - 금융서비스의 멀티채널 디자인 박천수(0612)

Journey map����������� ������������������  

Page 11: 접근성캠프서울 세번째 이야기 - 금융서비스의 멀티채널 디자인 박천수(0612)

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

Page 12: 접근성캠프서울 세번째 이야기 - 금융서비스의 멀티채널 디자인 박천수(0612)

모바일영업지원����������� ������������������  – journey map����������� ������������������  

Page 13: 접근성캠프서울 세번째 이야기 - 금융서비스의 멀티채널 디자인 박천수(0612)

서비스디자인����������� ������������������  기반����������� ������������������  구축����������� ������������������  

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

ING 생명����������� ������������������  모바일SFA����������� ������������������  

Page 14: 접근성캠프서울 세번째 이야기 - 금융서비스의 멀티채널 디자인 박천수(0612)

고객신뢰����������� ������������������  

참고����������� ������������������  : ACCENTURE, BACKBASE����������� ������������������  

TIME

CHANNEL

CONTENT

RIGHT (relevant)����������� ������������������  

ME

KNOW SHOW ENABLE VALUE����������� ������������������  

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

Page 15: 접근성캠프서울 세번째 이야기 - 금융서비스의 멀티채널 디자인 박천수(0612)

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

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

Page 16: 접근성캠프서울 세번째 이야기 - 금융서비스의 멀티채널 디자인 박천수(0612)

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

SNS����������� ������������������  

M.APPs����������� ������������������  

M.WEB����������� ������������������  

PC.WEB����������� ������������������   지점/고객센터����������� ������������������  

Page 17: 접근성캠프서울 세번째 이야기 - 금융서비스의 멀티채널 디자인 박천수(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: 접근성캠프서울 세번째 이야기 - 금융서비스의 멀티채널 디자인 박천수(0612)

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

ü ����������� ������������������  고객의����������� ������������������  동선을����������� ������������������  고려한����������� ������������������  지점����������� ������������������  설계����������� ������������������  ü ����������� ������������������  신속한����������� ������������������  업무����������� ������������������  처리(대기����������� ������������������  시간����������� ������������������  최소화)����������� ������������������  ü ����������� ������������������  고객이����������� ������������������  많이����������� ������������������  찾는����������� ������������������  업무����������� ������������������  창구����������� ������������������  입구쪽����������� ������������������  배치����������� ������������������  ü 인적����������� ������������������  상담을����������� ������������������  통한����������� ������������������  명확한����������� ������������������  정보����������� ������������������  제공����������� ������������������  ü ����������� ������������������  친절한����������� ������������������  안내����������� ������������������  및����������� ������������������  피드백����������� ������������������  ü ����������� ������������������  등등등…⋯����������� ������������������  

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

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

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

OFF����������� ������������������  LINE����������� ������������������  SERVICE����������� ������������������   ON����������� ������������������  LINE����������� ������������������  SERVICE����������� ������������������  

Page 19: 접근성캠프서울 세번째 이야기 - 금융서비스의 멀티채널 디자인 박천수(0612)

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

기업의 Brand Identity

Style Guide Device/OS UI Guide

인터렉션

디자인1) 원칙

디자인 전략

+����������� ������������������   +����������� ������������������  사용자����������� ������������������  경험����������� ������������������  

사용자����������� ������������������  감성����������� ������������������  

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

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

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

Page 20: 접근성캠프서울 세번째 이야기 - 금융서비스의 멀티채널 디자인 박천수(0612)

디자인����������� ������������������  요소����������� ������������������  

색상

배치

서체

이미지요소

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

_레이아웃, 그리드_

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

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

디바이스 사용성

네비게이션

탑재/배포

시스템 UI

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

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

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

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

제스쳐 & 트랜지션

디자인 패턴

사용성 체크리스트

UI 요소

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

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

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

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

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

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

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

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

스타일가이드

디바이스/ OS UI 가이드

인터렉션

디자인가이드

퍼블리싱 가이드

Page 21: 접근성캠프서울 세번째 이야기 - 금융서비스의 멀티채널 디자인 박천수(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: 접근성캠프서울 세번째 이야기 - 금융서비스의 멀티채널 디자인 박천수(0612)

Value added 모바일����������� ������������������  서비스����������� ������������������  사례����������� ������������������  

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

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

Page 23: 접근성캠프서울 세번째 이야기 - 금융서비스의 멀티채널 디자인 박천수(0612)

금융서비스����������� ������������������  오픈웹����������� ������������������  사례����������� ������������������  

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

미래에셋생명����������� ������������������  다이렉트����������� ������������������  

P ����������� ������������������  접근성����������� ������������������  준수

P  멀티����������� ������������������  브라우저����������� ������������������  지원

P  모바일����������� ������������������  지원����������� ������������������  

Page 24: 접근성캠프서울 세번째 이야기 - 금융서비스의 멀티채널 디자인 박천수(0612)

시니어����������� ������������������  뱅킹����������� ������������������  사례����������� ������������������  

Page 25: 접근성캠프서울 세번째 이야기 - 금융서비스의 멀티채널 디자인 박천수(0612)

HOT. digital stamp, iBeacon(ble)����������� ������������������  

지불 / 결제����������� ������������������  

쿠폰 / 혜택����������� ������������������  

맴버쉽 / 로열티����������� ������������������  

Page 26: 접근성캠프서울 세번째 이야기 - 금융서비스의 멀티채널 디자인 박천수(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: 접근성캠프서울 세번째 이야기 - 금융서비스의 멀티채널 디자인 박천수(0612)

감사합니다. ����������� ������������������  

박천수����������� ������������������  그룹장����������� ������������������  

[email protected]����������� ������������������