신한카드 모바일 홈페이지 [m.shinhancard.com] 제 9회 웹 어워드 코리아.

Presentation on theme: "신한카드 모바일 홈페이지 [m.shinhancard.com] 제 9회 웹 어워드 코리아."— Presentation transcript:

1 신한카드 모바일 홈페이지 [m.shinhancard.com] 제 9회 웹 어워드 코리아

2 목 차 1. 사이트 개요 2. 컨텐츠 특징 3. 차별화 기능 4. 사용자 시나리오

3 - 2 - 1. 사이트 개요 ■ 신한카드 모바일 홈페이지(m.shinhnacard.com)는 모바일 채널에서 당사를 대표하는 웹 사이트로써, 다양한 서비스와 정보를 고객에게 전달하고 있음 신한카드 모바일 홈페이지개발 컨셉 사이트 히스토리  ’10.3月 : 사이트 오픈  ’12.3月 : 사이트 리뉴얼 주요 서비스  신한카드 각종 카드 상품 소개 및 부가서비스 정보 제공 신한카드 모바일홈페이지란? (m.shinhancard.com)  신한카드에서 제공하는 다양한 상품 및 서비스 정보를 전달하는 모바일 웹 사이트 이용 규모  月間 UV: 50만명, PV: 130만페이지 (2012년 9월 기준) 1. 다양한 정보를 효과적으로 전달함 ☞ 카드존/서비스존/스마트존 등 테마별 메인화면 사용 ☞ 통합검색 기능을 통한 원하는 내용에 대한 빠른 검색 2. 다양한 고객 사용 환경에 최적화 된 화면을 제공함 ☞ 반응형 웹 방식 구현을 통한 이용자 단말기 별 최적 화면 출력 3. ‘Smart 신한’ 앱(당사 모바일 앱)과의 연동을 통한 조회/거래 서비스를 제공함 ☞ 모바일 앱과 모바일 홈페이지와의 연동을 통하여, 모바일 채널에서 PC 홈페이지 수준의 서비스 제공

4 2. 컨텐츠 특징 ■ 신한카드 모바일 홈페이지(m.shinhancar.com)은 총 133개 메뉴 / 480페이지 규모의 모바일 웹 사이트로써, 동종 업계 모바일 웹 사이트 中 가장 많은 양의 정보를 제공함 개인 카드소개/신청 (9) 금융서비스 (3) 포인트 (5) 공과금납부안내 (5) 편의서비스 (11) 공과금납부안내 (5) 고객센터 (4) 이벤트 (2) 뉴스/공지 (2) 신한가맹점타운 (4) 신한광장 (3) 카드파인더 (2) 법인 법인이용안내 (4) 해외이용안내 (5) 카드소개 (1) 법인카드혜택 (8) 가맹점 가입안내 (6) 카드안내 (1) 신한 웰컴 서비스 (4) 올댓 서비스 올댓서비스란? (1) 쇼핑 (3) 여행 (4) 골프 (3) 레져 (1) 컬쳐 (1) 라이프 (1) Tops 클럽 Tops Club 소개 (2) 서비스안내 (1) 멤버십서비스 안내 (3) VIP카드 (1) 구분개인법인가맹점올댓탑스 클럽자동차 금융아름인계 大 메뉴 1243743538 小 메뉴 5518111771114133 자동차 금융 신차 (2) 중고차 (5) 오토리스 (4) 아름인 기부안내 (1) 기부처 소개 (9) 아름다운 메아리 (2) 아름인이란? (1) 신한카드사회공헌 (1) 1) 방대한 양의 다양한 컨텐츠

5 2. 컨텐츠 특징 ■ 당사의 각종 상품 및 서비스 정보를 전달하는 모바일 홈페이지 특성상, 카드존/서비스존/스마트존 등으로 각 테마에 맞는 메인화면을 구성함 ■ 플리킹(화면 쓸어넘기기)을 통한 쉬운 화면 전환과 한정된 모바일 디바이스 화면의 활용성을 극대화함 2) 테마별 메인 화면 운영 화면 예시테마 별 주요 내용 카드존 I 서비스존 2 스마트존 3 테마주요 내용  주력 상품 소개  나만의 맟춤카드를 확인할 수 있는 ‘카드파인더’  카드 신청 메뉴 연결  당사 ‘Smart 신한’ 앱 연동 메뉴  현금서비스, 포인트 안내 등 당사 주요 서비스 소개 메뉴  당사 新 서비스 안내 및 소식지 등을 제공하여 Smart한 소비생활을 도움  배너를 통한 이벤트 안내 카드존 서비스존 스마트존

6 - 5 - 2. 컨텐츠 특징 ■ 고객이 원하는 정보를 빠르게 찾을 수 있도록, 업계 최초로 모바일 홈페이지 內 통합 검색 서비스를 제공함 검색어 완성 기능을 지원하여, 검색을 통하여 고객이 더욱 빠른 시간 내에 원하는 정보를 확인할 수 있음 3) 통합검색 서비스 제공 화면 구성 1 2 3 1  메인 화면 우측 상단 검색 버튼 선택 1. 입력 키워드에 대한 자동완성 기능 제공 2. 키워드에 대한 상품/서비스/이벤트/자주하는 질문 등 전체 모바일 웹사이트를 포괄하여 검색결과 노출

7 - 6 - 3. 차별화 기능 ■ 반응협 웹(Responsive Web) 방식을 사용하여 모바일 단말기에서 당사 모바일홈페이지 접속 시, 스마트폰, 태블릿 PC 등 단말기를 구분하고 세로/가로 모드도 구분하여 최적의 화면을 표시함 ■ 다양한 안드로이드 OS 사용 모바일 단말기에서도 각각 최적화된 사이즈의 이미지 및 화면을 표시함 1) 반응형 웹 방식 구현 화면 예시기능 구현 개요 스마트폰 태블릿 PC 가로 세로 가로 세로 단말기 접속 스마트폰태블릿 PC 가로 모드세로 모드가로 모드세로 모드 컨텐츠 소스(1개)  1개의 컨텐츠 소스를 통하여, 단말기에 따라 최적화 된 4가지의 메인화면 템플릿을 통해 각각 최적화 된 화면을 출력함  고객 사용 환경에 최적화 된 서비스 제공을 하면서도, 운영 요소를 최소화 함 고객 당사

8 - 7 - 3. 차별화 기능 ■ 신한카드 ‘Smart 신한’ 앱과의 유기적인 연동을 통하여, 고객이 모바일 채널에서도 PC 홈페이지 수준의 서비스를 이용할 수 있도록 함 2) 당사 앱과의 유기적인 연동 화면 예시  고객 이용 빈도가 높은 서비스를 선별하여 ‘자주 찾는 서비스’ 메뉴를 제공 메뉴 선택시, Smart 신한 앱이 구동되면서 해당 메뉴 페이지로 이동 (미설치 고객의 경우, 앱 다운로드 페이지로 연결하여 다운로드 후 이용 유도) 기능 구현 개요 기존 설치자미(未) 설치자기존 설치자미(未) 설치자 Smart 신한 현금서비스 신청 메뉴 애플 앱스토어 Smart 신한 다운로드 페이지 Smart 신한 현금서비스 신청 메뉴 구글 플레이스토어 Smart 신한 다운로드 페이지 현금서비스 신청 iOSAndroid 메뉴 선택OS 구분 설치여부 확인 다운로드 및 해당 메뉴 연결 예시 ※ 신뢰도 있는 모바일 웹사이트用 보안 솔루션 부재로 인하여, 모바일 홈페이지 자체적으로는 조회/거래서비스를 제공하지 않으며, Smart 신한 앱으로의 연동을 통하여 해당 서비스를 제공함

9 123 1. 카드존 - 카드 관련 메뉴 모음으로 오른쪽 ( 서비스존 ) 으로 플리킹 하여 서비스존으로 이동 가능 하다. 2. 서비스존 - 신한카드 서비스 메뉴 모음으로 왼쪽 ( 카드존 ), 오 른쪽 ( 이벤트존 ) 으로 플리킹하여 이동 가능 하다. 3. 이벤트존 - 모바일과 홈페이지 이벤트 및 공지등을 볼 수 있 는 메뉴 모음으로 왼쪽 ( 서비스존 ) 으로 플리킹하여 이동 가능하다. 4. 사용자 시나리오 01. 메인 화면

10 02. 네비게이션 1.2depth 메뉴는 좌, 우로 플래킹하여 여러 개의 메뉴를 탭 할 수 있다. 1. 선택박스 메뉴 탭 2. 스크롤 메뉴 ( 아이폰 ) 개인, 법인, 가맹점, 올댓, Tops Club, 자동차금융, 아름인 등 1depth 메뉴를 선택 할 수 있다. 1 2 1 02-2. 2depth 메뉴 선택 4. 사용자 시나리오 02-1. 1depth 메뉴 선택

11 02-3. 3depth, 4depth 메뉴 선택 1.2depth 메뉴 영역 하단의 선택목록 영역을 선택 시 3depth 와 4depth 를 탭 하면 해당 페이지로 이동 된다. 1 1 02. 네비게이션 4. 사용자 시나리오