KD Navien Smart Customer Service Mobile Web

Presentation on theme: "KD Navien Smart Customer Service Mobile Web"— Presentation transcript:

1 KD Navien Smart Customer Service Mobile Web
국가대표 보일러, 경동나비엔의 ‘스마트 고객지원 서비스’ Copyright © 2011 KD Navien & PIAMO by SynerVelly, Inc. All rights Reserved.

2 1. About KD Navien Smart Customer Service
경동나비엔의 스마트 고객지원 서비스는 스마트폰의 보급으로 상황에 구애 받지 않고 웹에 더욱 쉽게 접근할 수 있다는 것에 착안해, 스마트폰이 있는 곳에선 언제나 경동나비엔의 고객지원 서비스가 제공될 수 있도록 구현. 사용자 중심의 인터페이스로 구현하였으며, 고객들의 요구가 많은 분야별로 메뉴를 구성해 몇 번의 클릭으로 간편하게 원하는 정보에 도달하도록 설계. 또한 QR코드와 어플리케이션(하이브리드앱)을 적용해 접근 경로를 더욱 단순화하고 효율화하여, 최적의 고객지원 루트를 완성. 모바일웹과 하이브리드앱, 그리고 QR코드가 하나의 고객지원 시스템으로 운영되어 언제·어디서나 스마트폰이 있는 곳에서 고객이 필요한 정보를 습득할 수 있도록 함으로써 고객의 삶의 질을 높이고, 고객 만족도를 극대화 함.

3 01 02 03 04 2. Development Point for Mobile Web (Overview)
스마트 고객지원 기능 강화와 실용성 강조 제품관련 정보와 사용법, 응급조치, A/S 접수 등 고객들의 요구가 많은 서비스를 모바일웹에서 제공함으로써 고객지원 서비스 강화 및 편리성 도모. 02 QR코드와 애플리케이션 확장을 통한 고객 접근성 강화 제품에 각 상황에 따른 QR코드를 부착하여, 쉽고 빠른 고객지원 서비스 제공 및 모바일웹을 연동한 하이브리드 방식의 모바일 애플리케이션 확장 지원. 03 사용자 중심의 U.X & U.I Design 구현. 주요 콘텐츠가 한 눈에 들어오는 인터페이스 구현으로, 고객이 원하는 정보 및 서비스에 최대한 쉽고 간편하게 도달. 04 HTML5, CSS3, jQuery 등 차세대 최신 웹 표준 기술 적용. 차세대 웹 표준 방식인 HTML5와 CSS3를 기반으로 크로스브라우징 구현. jQuery와 Script 기술을 통한 모바일 환경에서의 인터랙티브 구현.

4 3. Development Point for Mobile Web (1)
스마트폰 애플리케이션 실행 시 모바일웹 연동 (하이브리드 방식) QR코드 스캔 (제품, 인쇄물, 온라인 등) 언제 어디서나 고객이 손쉽게 접근 할 수 있도록, 다양한 경로의 접속 루트 제공 (모바일웹/앱/QR코드)

5 4. Development Point for Mobile Web (2)
A/S, 응급조치요령, 이용안내 등의 각 분야별 QR코드를 제품에 직접 부착하여, 고객이 필요로 하는 정보를 바로 확인 가능하도록 함.

6 5. Development Point for Mobile Web (3)
브랜드 아이덴티티 강화 상단의 슬라이딩 되는 [메뉴숨기기] 기능을 통하여, 경동나비엔을 상징하는 나비 이미지를 보여줌.

7 6. Development Point for Mobile Web (4)
메인 메뉴 접근성 강화 모든 페이지에서 상단 GNB의 [메뉴보기] 버튼 클릭 시, 8개의 주요 메뉴 슬라이딩 노출.

8 7. Development Point for Mobile Web (5)
구체적인 상황 별 응급조치 요령을 담아. 고객은 상황에 따른 원하는 정보를 확인하고 스스로 문제점을 찾아 신속히 해결 가능.

9 8. Development Point for Mobile Web (6)
룸콘 각 제품별 사용법을 이미지와 함께 제공하여, 고객의 이해도를 높이는 한편, 기능별 설명을 하단 탭 메뉴로 구성하여 사용자 중심의 UI 구현.

10 9. Development Point for Mobile Web (7)
경동나비엔 제품을 사용하는 고객은 회원 및 비회원 모두 모바일을 통하여, 누구나 A/S신청 접수 및 A/S내역 조회.

11 10. Development Point for Mobile Web (8)
대리점 지도검색 및 전화걸기 지역구분을 통하여, 주변의 대리점 정보 확인 가능. 상세지도부터 전화 걸기까지 간편히 이용.

12 11. Composition of Mobile Web (Main Page)
2 3 4 5 6 Header 영역 홈 이동 및 메뉴보기/숨기기, 로그인 버튼으로 구성 (전체 페이지 상시 노출 및 이동 가능) News Ticker 영역 실시간 주요 공지사항 노출. (자동 롤링 및 선택) Menu 영역 8개의 메인 메뉴로 구성 및 전체 페이지 노출 가능 (타이틀바 클릭 시, 메뉴보기/펼치기) Event 영역 진행 중인 이벤트 노출. (자동 롤링) (타이틀바 클릭 시, 배너보기/펼치기) News 영역 최근 공지 및 뉴스 노출. (타이틀바 클릭 시 배너보기/펼치기) Footer 영역 어느 페이지에서도 상시 노출되는 메뉴로 구성. 전화걸기 버튼과 카피라이트로 구성.

13 12. Composition of Mobile Web (Sub Page 1)
3 4 1 5 Header 영역 (Main과 동일) Navigation 영역 사용자들이 현재 페이지 위치를 확인할 수 있도록 구성. 클릭 시 각 메뉴로 이동 가능. Image 영역 해당 주제별 카테고리 이미지 전달. (총8개 메뉴별 이미지) 타이틀 문구에 동적인 움직임 표현. Contents 영역 컨텐츠 페이지는 이미지의 사용을 최소화 하면서도 정보전달력과 심미성을 극대화 할 수 있도록 표현. Footer 영역 (Main과 동일)

14 13. Composition of Mobile Web (Sub Page 2)
4 5 6 3 2 1 Header 영역 (Main과 동일) Navigation 영역 사용자들이 현재 페이지 위치를 확인할 수 있도록 구성. 클릭 시 각 메뉴로 이동 가능. Image 영역 해당 주제별 카테고리 이미지 전달. (총8개 메뉴별 이미지) 타이틀 문구에 동적인 움직임 표현. Menu 영역 사용자들이 현재 페이지 위치를 확인할 수 있도록 구성. 클릭 시 각 메뉴로 이동 가능. Contents Menu 영역 콘텐츠의 내용을 탭으로 분류. Contents 영역 콘텐츠 페이지는 이미지의 사용을 최소화 하면서도 정보전달력을 극대화 할 수 있도록 표현.

15 14. Mobile Appication with Mobile Web
모바일 웹사이트를 연동한 하이브리드 앱 (Hybrid App) 경동나비엔은 모바일 웹사이트를 기반으로 하는 하이브리드 방식의 모바일 애플리케이션 (iOS & Android 지원)을 제공하여 고객들의 접속 경로를 극대화 함.

16 Play the PIAMO! 피아모 (PIAMO) by ㈜시너밸리 (SynerVelly, Inc.)
전화번호: ~ 9 / 팩스번호: 피아모: / 메이크큐알: 블로그: 트위터: Follow하시면 모바일 관련 정보를 받아 보실 수 있습니다!