SlideShare une entreprise Scribd logo
1  sur  57
301, Dosan-daero, Gangnam-gu Seoul,Korea 135-890 T. 02 2052 8900 F. 02 2052 8904 U. rightbrain.co.kr 
The enclosed material is proprietary to Rightbrain 
Digital Convergence, Mobile App & Web, 
SNS Platfrom, eBranding & Identity, 
eBiz Consulting & Execution 
통신서비스 온라인 채널 UX Design 사례 
Credentials 2014
Design Thinking! 
사용자경험에서 얻은 통찰로부터 시작되는 디자인
Strategy 
Concept 
이전 리서치 과정을 보시려면... http://www.slideshare.net/yan117/ux-research-by-rightbrain
4 
Strategy > Concept 
분석 시사점 정리 
SNS를 통한 활력 부여 
Seamless한 경험을 주는 통합 홈페이지 
모바일웹을 통한 접근성 높은 상품 안내 
이용 목적에 따른 특색있고 간결한 구조 
가입을 다른 메뉴와 차별화 
고객 유형에 따른 차별화된 이용 경험 
기존 고객을 대상으로 한 맞춤화된 리텐션 서비스 
쉽고 직관적인 레이블 
5개의 주요 카테고리별 간결화된 메뉴 구조 
빠른 상품 탐색 
유선통신에 최적화된 일관된 UI Framework 
동일한 시각적 언어를 UI에 적용 
한 눈에 비교 가능한 상품 목록 
필터링 옵션을 통한 탐색 편의성 증대 
쉽고 간편한 가입 프로세스 
가입시 상품정보 및 이벤트/혜택정보를 같이 제공 
온라인 채널을 통한 실시간 상담 제공 
서비스 유형별 사용자 가이드 제공 
장기 고객 및 불만 예상 고객을 대상으로 한 추가적인 혜택 제공
5 
Strategy > Concept 
컨셉 도출 
SNS를 통한 활력 부여 
Seamless한 경험을 주는 통합 홈페이지 
모바일웹을 통한 접근성 높은 상품 안내 
이용 목적에 따른 특색있고 간결한 구조 
가입을 다른 메뉴와 차별화 
고객 유형에 따른 차별화된 이용 경험 
기존 고객을 대상으로 한 맞춤화된 리텐션 서비스 
쉽고 직관적인 레이블 
5개의 주요 카테고리별 간결화된 메뉴 구조 
빠른 상품 탐색 
유선통신에 최적화된 일관된 UI Framework 
동일한 시각적 언어를 UI에 적용 
한 눈에 비교 가능한 상품 목록 
필터링 옵션을 통한 탐색 편의성 증대 
쉽고 간편한 가입 프로세스 
가입시 상품정보 및 이벤트/혜택정보를 같이 제공 
온라인 채널을 통한 실시간 상담 제공 
서비스 유형별 사용자 가이드 제공 
장기 고객 및 불만 예상 고객을 대상으로 한 추가적인 혜택 제공 
쉬운 
간결한 
친밀한
6 
Strategy > Concept 
컨셉 레이어 
쉬운 
간결한 
친밀한 
•찾고자 했던 정보에 쉽게 접근할 수 있다 
•레이블이나 비주얼, 아이콘을 통해서 정보를 쉽게 연상할 수 있다 
•예상했던 경로와 실제 경로가 일치한다 
•원하는 목적을 쉽게 완료할 수 있다 
•이동 경로가 간결하게 구성되었다 
•깊이 들어가지 않고도 원하는 정보를 찾았다 
•일관된 UI 패턴을 통해 인지적 노력없이 이용한다 
•특정 디자인이 의미하는 바가 명확하게 와닿는다 
•뜻밖의 서비스가 찾아와서 기분을 즐겁게 해준다 
•전체적인 룩앤필이 친근하게 다가온다 
•사용자를 배려해주는 상세한 안내가 제공된다 
•SNS로 연결되어 다른 사람들의 생생한 목소리를 전달받을 수 있다 
컨셉을 다음과 같은 3가지 레이어와 매칭시킴 
-친밀한 : 가장 밑바탕에 깔리며, 고객을 배려하는 서비스와 디자인으로 감성을 만족시키고 브랜드에 대한 신뢰감을 북돋움 
-간결한 : 정보의 탐색이나 UI, 서비스 이용시에 사용자들의 이용 편의성과 탐색 효율성을 돕는다 
-쉬운 : 가장 전면에 나서서 사용자들에게 시인성(visuability), 예측(mapping), 직관성, 일관성을 제공하는 영역에 해당한다
7 
Strategy > Concept 
컨셉의 디자인 적용 
컨셉을 어떤 방법으로 사용자에게 전달할 것인가? 
-3가지 컨셉으로부터 도출한 가치들을 10가지 디자인 영역별로 어디에 해당하는 지 여부를 표시함 (9가지 분석항목 + 비주얼 디자인) 
컨셉 
사용자에게 제공하는 가치 
온라인 
전략 
전체적 
UX 
IA 
UI 
회원 
상품 
가입 
CS 
차별화 
디자인 
쉬운 
찾고자 했던 정보에 쉽게 접근할 수 있다 
√ 
√ 
√ 
√ 
√ 
√ 
√ 
√ 
디자인 요소들을 통해서 정보를 쉽게 연상할 수 있다 
√ 
√ 
√ 
√ 
√ 
예상했던 경로와 실제 경로가 일치한다 
√ 
√ 
√ 
√ 
√ 
√ 
√ 
√ 
원하는 목적을 쉽게 완료할 수 있다 
√ 
√ 
√ 
√ 
√ 
√ 
간결한 
이동 경로가 간결하게 구성되었다 
√ 
√ 
√ 
√ 
√ 
√ 
√ 
√ 
깊이 들어가지 않고도 원하는 정보를 찾았다 
√ 
√ 
√ 
√ 
√ 
√ 
√ 
√ 
일관된 UI 패턴을 통해 인지적 노력없이 이용한다 
√ 
√ 
√ 
√ 
√ 
특정 디자인이 의미하는 바가 명확하게 와닿는다 
√ 
√ 
√ 
√ 
√ 
친밀한 
뜻밖의 서비스가 찾아와서 기분을 즐겁게 해준다 
√ 
√ 
√ 
√ 
전체적인 룩앤필이 친근하게 다가온다 
√ 
√ 
√ 
√ 
사용자를 배려해주는 상세한 안내가 제공된다 
√ 
√ 
√ 
√ 
√ 
√ 
SNS로 연결되어 다른 사람들의 생생한 목소리를 전달받을 수 있다 
√ 
√ 
√ 
√ 
√ 
√ 
√ 
√
Online Channel Strategy 
Strategy
9 
Strategy > Online Channel Strategy 
3개 사이트의 완전한 통합 – “고기가 오는 곳에서 고기를 잡아야 한다” 
웹사이트 통합 
-사용자들은 판매채널을 다른 대리점들과 구별하지 못하고 있다. 사용자 입장에서 판매채널은 또 하나의 대리점일 뿐이다 
-반면에 온라인에서 상품 가입을 시도하는 대다수 사용자들이 A사 홈페이지을 어떤 이유에서든지 한번은 방문한다. 판매채널의 특화된 마케팅을 홈페이지내로 흡수하여 홈페이지를 통한 전환율을 높여야 한다 
판매채널 
홈페이지 
홈페이지
10 
Strategy > Online Channel Strategy 
Coherence 전략 
멀티 채널 연계 
-각 채널이 동일한 목적의 메뉴 구성과 톤앤매너를 지닌 컨텐츠를 제공하되 채널의 특성과 사용 시나리오에 맞게 컨텐츠의 표현이나 UI, IA 등에 변화를 가져가는 전략 
통합 사이트 
A사의 온라인 채널 중심 
신규/기존 고객에 대한 정보/서비스 제공 
상품, 가입, CS, 컨텐츠, 개인화서비스 
모바일웹 
A사의 모바일 채널 
신규고객을 위한 접근성 높은 상품 정보 
기존고객을 위한 조회/편의/리텐션 서비스 
SNS 및 외부 채널 
이벤트 등의 고객 커뮤니케이션 수행 
상품이나 컨텐츠를 홈페이지와 차별화해서 제공 
고객 상담 기능 
폰 문자/전화 
A사의 대면접촉 채널 온라인 채널과 긴밀한 상호 연계 장기/고객 대상 리텐션서비스를 제공하는 터치포인트 역할 
이벤트 응모, 결과 확인 
통합 사이트를 모바일에 맞게 재구성 
상품 정보 조회, 가입 신청으로 연결 
고객 참여 유도, SNS에서 생산된 컨텐츠를 통합 사이트에 소개 
Patterns for Multiscreen Strategies by PRECIOUS DESIGN STUDIO
11 
Strategy > Online Channel Strategy 
동일한 메뉴도 신규 고객과 기존 고객에 따라 이원화해서 제공 
고객 유형별 서비스 차별화 
기존 고객 
신규 고객 
전체 상품에 대한 빠른 탐색 
얕고 한 눈에 비교 가능한 상품 목록 및 간편한 상품 검색 기능 
나에게 맞는 상품 찾기 
가입한 상품 및 관련 정보 
현재 가입되어 있는 상품 정보로 쉽게 접근 가능 
가입된 상품과 관련된 정보 제공 
빠른 가입하기 > 가입시 혜택 
사이트 어디에서나 빠르게 가입으로 이어질 수 있음 
가입시 얻을 수 있는 혜택이나 관련 이벤트를 상세하게 제시 
기 가입된 상품에 근거한 추천 상품 
홈페이지, 모바일웹 방문시 상품/서비스를 지속적으로 추천 고객 유형에 따라 상품 및 부가 서비스를 추천, 혜택 제시 
설치 및 가입후 이용 가이드/팁 
설치 절차 안내 
가입후 인터넷, TV 이용 가이드 및 팁 
IPTV 가입시 이용 가능한 컨텐츠 열람 
IPTV를 통해서 볼 수 있는 전체적인 컨텐츠 
VOD 및 월정액 서비스 안내 
상담, FAQ 중심 
실시간으로 상담원과 연결할 수 있는 채팅, 문자 상담 
상품 유형, 증상 유형별로 체계적으로 정리된 FAQ 
현재 가입 상품에 맞는 컨텐츠 제시 
현재 가입된 상품 및 이용 현황을 파악하여 적절한 컨텐츠 추천 컨텐츠와 관련된 참여 가능한 이벤트 제시 
빠르게 접근 가능한 요금/이용내역 
로그인시 요금과 같은 자주 이용하는 메뉴에 빠르게 접근 가능 
상품 
가입 
CS 
컨텐츠 
개인화
12 
Strategy > To-Be User Scenario 
통합 채널 및 외부의 SNS 채널들을 통해서 상품에 대한 다양한 정보를 얻을 수 있음 
신규고객의 상품 탐색 사용자 시나리오 
To-Be 이용 
시나리오 
관련된 분석 시사점 
이용단계 
상품 인지 
약정 기간 내 요금 혜택(2년 24만원 절약)과 TV Content의 차별성을 강조하는 문자/전화 마케팅 
검색 
네이버에서 검색 
모바일웹으로 이동. 할인 혜택 중심의 상품 정보를 일목요연하게 조회할 수 있음 
방송, 유선방송이란 검색어를 넣어도 SK IPTV 검색가능 
검색 결과 확인 
A사 홈페이지로 바로 이동 
A사의 블로그, SNS도 사이트 검색 결과에 노출 
브랜드 검색 영역에 A사의 4가지 주요 메뉴(상품, Content, 고객센터, 가입신청)와 3년 최대 135만원 할인에 관한 인포그래픽이 표시 
상품정보 조회 
A사 홈페이지에서 한눈에 모든 상품을 일목요연하게 조회할 수 있음 
블로그로 이동하여 다른 사용자들이 올린 후기 조회 
A사 홈페이지>가입>상품 이용 혜택 인포그래픽 페이지에서 자세하게 안내 
•사용자의 관심을 끌 수 있는 마케팅 (약정 기간 내 전체 요금 할인 혜택, 상품의 특징을 강조, 가입혜택 강조 등) 
•외부 채널인 공식 Blog, SNS, 유투브와 A사 홈페이지와의 연계 필요 
•쉽게 알아볼 수 있도록 개별 상품안내보다는 한눈에 비교 가능한 형태로 상품정보를 제공 
•상품을 쉽게 찾을 수 있도록 상품 정보구조의 Depth를 줄이고, 쉽게 인지할 수 있는 메뉴명 사용 
•가입 채널의 신뢰를 중시 여기는 사용자들은 A사 홈페이지로 바로 이동 
•판매채널이나 IPTV를 A사 홈페이지에 통합하여 시너지 효과 창출 
•외부 채널의 적극적인 활용 및 홈페이지와의 강한 연계 (SNS, 유튜브) 
•채널 통합으로 운영 효율, 가입전환율 상승 
•가입 채널의 신뢰를 중시여기는 브랜드 검색 영역 
•정보/서비스의 플랫폼인 홈페이지와 마케팅/홍보/프로모션을 위한 외부의 채널로 이원화된 온라인 전략 
-사용자들은 인터넷은 물론 IPTV(IPTV), 결합상품을 가입하려고 할 때에도 검색어 때문에 많은 노력을 들일 필요가 없다. 
-네이버나 구글 검색결과에 A사의 홈페이지 뿐만 아니라 SNS, 블로그, 유튜브로도 쉽게 접근할 수 있다. 
-검색 시 검색결과 최상위에 나오는 브랜드 광고영역에는 알아보기 어렵고 눈길도 가지 않는 동영상, 이벤트 배너, 텍스트 설명 대신에 통합 홈페이지의 4가지 주요 메뉴와 최대 혜택에 대한 인포그라픽을 볼 수 있다. 
구글에서 검색 
유튜브 동영상 검색 결과 
A사 공식 Blog 나 SNS를 통한 신규 및 주요 상품 인지
13 
Strategy > To-Be User Scenario 
Storyboard 
신규고객의 상품 탐색 사용자 시나리오 
#1. 기존 상품의 약정 만기가 다가와서 신규 유선상품을 찾고자 함 
#2. 네이버에서 ‘A사’를 검색하여 메인 홈페이지로 이동함 
#3. 홈페이지에서 내 상황에 맞게 쉽고 빠르게 상품 정보를 조회함 
#4. 상품 정보 조회 결과를 바탕으로 원하는 상품을 찾음
14 
Strategy > To-Be User Scenario 
쉽게 상품 정보로 이동하여 한 화면에서 상품들을 비교하고 가입까지 끊김없이 이어질 수 있음 
신규고객의 상품 비교 & 가입 사용자 시나리오 
To-Be 이용 시나리오 
관련된 
분석 시사점 
이용단계 
상품 비교 
원하는 상품 군의 가격, 혜택, 상품 특징을 한눈에 비교할 수 있음 
상품 선택 
원하는 상품의 상세 정보,혜택의 자세한 내용과 할인의 항목을 상세하게 확인 
가입 
선택한 상품을 쉽고 빠르게 가입하기 위한 ‘가입 상담 예약’을 위한 Form 입력 
전화를 통한 가입 
가입 이전에 상품 혜택과 프로모션을 한번 더 확인함으로써, 가입 의지 상승 
•전체 기간내의 할인 금액을 구체적인 숫자로 표시 
•상품의 속성, 금액, 혜택, 채널, Content 별 비교 기능 필요 
•상품 리스트 페이지를 통해 상품의 종류, 혜택, 특징, 요금을 한 눈에 비교 
•중요 정보는 Visual 로 표현하여 정보의 Hierarchy 제공 
•상품 선택 결정에 긍정적인 영향을 줄 수 있는 이벤트, 혜택 정보를 함께 노출 
•원하는 상품을 좀 더 쉽게 찾을 수 있는 ‘맞춤 상품’기능 업그레이드 
•선택이 행동으로 이어질 수 있도록 가입 관련 내역을 전체적인 UX에 노출 (GNB 포함) 
•A사 홈페이지와 모바일웹에서 가입까지 가능하다는 메시지를 지속 노출 
•가입상담예약 Form 에 선택한 상품과 관련된 이벤트, 사은품, 혜택을 다시 한번 노출 
•사용자가 상품을 선택했다면 해당 상품 정보가 자연스럽게 가입 상담 사에게 전달 
-상세한 상품 비교를 위해 상품을 하나하나 확인할 필요 없이 한 눈에 상품을 비교할 수 있다 
-사용자의 이슈(이사, 통신사 이동), 혜택, 전체 금액, 원하는 Content나 채널 별 비교가 가능해서 원하는 상품을 쉽게 비교할 수 있다. 
-상품 선택과 가입 절차에서 이벤트와 혜택 정보를 지속적으로 노출하여, 사용자의 의사결정에 긍정적인 영향을 줄 수 있다. 
-A사 홈페이지와 모바일에서 요금 조회  부가서비스의 조회  구매 & 가입이 자연스럽게 연결되어 편리하게 이용할 수 있다. 
페이지 이동 없이 가장 중요한 정보의 상세 내용까지 비교할 수 있음 
원하는 상품을 찾지 못했을 경우의 보조 수단으로 이동 
상품을 선택하지 못했을 경우, 좀 더 쉽게 맞춤 상품을 통해 원하는 상품 확인 
가입 완료 후 
A사 홈페이지에서 요금 확인 및 관련 부가서비스 확인 
멤버십과 관련된 포인트 및 혜택 프로그램 확인 
IPTV의 경우, 자세한 이용방법을 확인하고, 자주 보는 채널의 즐겨 찾기 
•IPTV의 이용방법을 자세히 알 수 있도록 매뉴얼 제공 
•A사 홈페이지와 모바일웹에서 멤버십 프로그램 안내 & 부가 서비스를 확인하고 가입 또는 구매가 가능하도록 함 
•지속적 방문을 유도할 수 있는 요금과 관련된 흥미 있는 정보 제공 
상품 결과에서 ‘가입 상담’ 버튼 선택을 하거나 가입 상담 전화를 함 
부가 서비스 가입 및 구매
15 
Strategy > To-Be User Scenario 
Storyboard 
신규고객의 상품 비교 & 가입 사용자 시나리오 
#1. 여러 상품들 가운데서 원하는 상품을 찾아 상품 카테고리에서 원하는 상품만 선택 
#2. 상품 목록에서 각 상품들의 상세 내용을 바로 보며 서로 비교해 봄 
#3. 맞춤 상품 찾기로 이동하여 자신에게 맞는 상품을 찾아 봄 
#4. 가입으로 이동하여 선택한 상품에 대한 가입 신청
16 
인터넷 관련 통신망 작업이 예정 되었을 경우 미리 안내를 받아 불편을 예측할 수 있음 
TV 화질이 타사에 비해 나쁘다는 인식이 없어 짐 
Strategy > To-Be User Scenario 
본인이 가입한 상품을 바로 알 수 있고, 가입 상품에 기초하여 부가 서비스/타상품 조회가 편리함 
기존고객의 가입 상품 이용 사용자 시나리오 
To-Be 이용 
시나리오 
관련된 분석 시사점 
이용단계 
가입 상품 정보 조회 
가입한 상품명을 기억하지 못해도 다양한 상품 필터링을 통해 여러 Depth를 거치지 않더라도 쉽게 가입 상품을 찾을 수 있음 
가입 상품 품질 확인 
부가 서비스 신청 / 해지 
A사 홈페이지와 모바일웹을 통해 부가서비스 확인 후 찜을 하거나 가입 & 구매 
타 상품 조회 
•사용자의 이슈, 혜택 등의 다양한 상품 필터링 조건 제공 
•가입한 상품의 부가서비스 알림 제공 
•깊은 Depth에 들어가지 않더라도 상품을 찾을 수 있도록 IA 조정 필요 
•로그인 후, 한눈에 볼 수 있는 MY 정보 제공 
•인터넷 관련 통신만 작업이 있을 경우, 사용자가 미리 인지 가능하도록 A사 홈페이지, 모바일 웹, SMS 등을 통해 알림 제공 
•TV 화질 비교를 지속적으로 제공하여 사용자의 인식 전환 
•A사 홈페이지와 모바일웹에서 부가서비스를 선택할 수 있도록 자세한 안내 제공 (나와 비슷한 사람들이 어떤 부가서비스를 사용하는 지 등) 
•A사 홈페이지와 모바일웹에서 부가서비스 찜하기, 가입 & 구매와 해지 기능이 제공되어야 함 
•기존 고객이 상품 정보를 조회하는 동기 (이사, 통신사 변경, 결혼 등등) 를 파악하여, 동기에 맞는 상품을 제공 
•현재 사용하고 있는 상품과 비교했을 때의 혜택을 쉽게 알 수 있도록 전체 금액 비교 등의 정보 제공 
-가입한 상품명을 기억하지 못하더라도 다양한 필터링 조건에 의해 깊은 Depth 탐색 없이 가입한 상품을 쉽게 찾을 수 있다. 
-부가 서비스 정보를 알림을 통해 지속적으로 제공해 주어, 사용자가 일일이 찾아보지 않더라도 자연스럽게 알 수 있다. 
-부가서비스의 가입 및 해지를 A사 홈페이지와 모바일웹에서 제공하여, 쉽고 빠르게 가입 및 해지를 할 수 있다. 
-타 상품을 조회하는 동기를 미리 파악하여 제공함으로써 사용자는 복잡한 상품 검색 없이도, 원하는 상품을 제공받을 수 있다. 
로그인을 통해 자신의 상품 정보 조회 및 요금제, 이용 내역을 찾아볼 수 있음 
부가 서비스를 찾아보지 않더라도 알림을 통해 자연스럽게 알 수 있음 
찜한 부가서비스를 IPTV에서 가입 & 구매 
A사 홈페이지와 모바일웹에서 부가서비스 확인 후 바로 해지 가능 
원하는 상품을 손쉽게 조회 
현재 사용하고 있는 상품과 혜택 비교
17 
Strategy > To-Be User Scenario 
Storyboard 
기존고객의 가입 상품 이용 사용자 시나리오 
#1. 본인이 가입한 상품에 대한 상세한 정보를 찾아보고자 함 
#2. 모바일웹에 들어와서 로그인 
#3. 상품 정보 조회 후 이용 가능한 Content 중에서 하나를 신청 
#4. 추천받은 상품에 대한 상세정보를 조회 
로그인 
ID 
PW 
OK
18 
Strategy > To-Be User Scenario 
다양한 리텐션 서비스에 접근할 수 있고 A/S나 고객센터 이용이 보다 편리해짐 
기존고객의 My, 고객센터 이용 사용자 시나리오 
To-Be 이용 
시나리오 
관련된 
분석 시사점 
이용단계 
로그인 및 멤버십 조회 
로그인 후, 원하는 정보를 바로 확인할 수 있음 
요금 및 청구서 확인 
A사 홈페이지와 모바일웹에 지속적으로 로그인해서 요금, 이용내역, 멤버십 혜택, 다양한 부가서비스 내역을 확인 
A/S 신청 
전화를 통해 A/S 담당자 바로 연결 
고객센터 이용 
A사 홈페이지에서 계약 내용을 확인해 가면서 상담함 
한 명의 상담원과 통화를 해서 원하는 문제를 해결할 수 있음 
문자를 통한 상담 가능 
•로그인 후, 사용자들이 많이 사용하는 메뉴를 파악하여 Quick 메뉴 형태로 제공 
•로그인 후, 주요 페이지에서 제공되는 정보를 사용자에게 맞춰서 변경 
•멤버십 프로그램에 대한 자세한 안내 및 활용 가이드, 활용 가능한 혜택 리스트 제공 
•흥미 있는 정보 제공을 통해 지속적 로그인 유도 (나와 비슷한 사람들이 많이 사용하는 부가서비스 등의 흥미 정보를 인포그래픽을 통해 제공) 
•현재까지 할인 받은 내역을 알 수 있도록 정보 제공 
•모바일웹에서도 요금, 이용내역의 상세 정보 제공 
•담당자와 바로 전화연결을 할 수 있는 A/S 관련 상세 전화번호 안내 
•A/S 신청자와 A/S 를 받은 사용자가 다를 경우, A/S 완료 후 모두에게 피드백 제공 
•SMS, A사 홈페이지, 모바일웹을 통해 A/S 현황 안내 
•담당자와 바로 전화연결을 할 수 있는 상세 전화번호 안내 
•A사 홈페이지에서 계약 내용에 관한 상세 내용 확인할 수 있도록 정보 제공 
•문자를 통한 상담 기능 제공 
-멤버십 혜택정보나 요금제 관련 흥미 있는 정보 제공을 통해 사용자는 A사 홈페이지와 모바일웹에 지속적으로 로그인 한다. 
-멤버십 이용 팁과 활용가능 혜택 리스트를 제공하여 사용자는 멤버십 혜택을 A사 홈페이지와 모바일웹에서 바로 사용할 수 있다. 
-A/S 신청부터 결과까지 단계별 피드백을 A사 홈페이지, 모바일웹, 문자를 통해 제공하여 사용자는 편리한 A/S 를 받을 수 있다. 
-담당자 바로 연결, 문자 상담 등을 통해 사용자는 좀 더 친절한 고객센터를 경험할 수 있다. 
로그인을 통해 멤버십 프로그램을 한눈에 확인할 수 있고, 사용자의 멤버십 혜택을 쉽게 활용할 수 있음 
SMS로 오는 문자 청구서를 통해 원하는 내역을 모두 확인할 수 있음 
처음 전화에서 기사 방문 약속시간까지 확정 받음 
A사 홈페이지, SMS를 통해 기사의 신상정보와 방문정보를 받음 
A/S 완료 후, SMS와 A사 홈페이지, 모바일웹을 통해 A/S 결과를 피드백 받음 
전화 상담 시, 바로 원하는 담당자와 통화
19 
Strategy > To-Be User Scenario 
Storyboard 
기존고객의 My, 고객센터 이용 사용자 시나리오 
#1. 고객센터를 통해서 서비스 이용중 생긴 불만을 상담하려고 함 
#2. 홈페이지 고객센터로 이동하여 실시간 상담 선택 
#3. 상담원과 메신저 채팅을 통해서 불만을 상담함 
#4. 몇일후, 상담 처리 결과를 조회하고 서비스로 B포인트를 받음
Design
Design 
IA 
본 챕터는 공개용 버전에서 생략
Design 
Membership
23 
Design > Membership 
로그인 전/후 사용자 목적을 달성하기 위한 주요 페이지의 일부 내용 및 모바일 웹의 메뉴 구조 변경 
로그인 전/후에 따른 서비스 차별화 
-사용자들의 로그인 목적은 요금 및 청구서 확인, 부가 서비스 확인 및 신청/해지가 가장 크다. 
-이러한 사용자의 목적을 빠르게 달성할 수 있도록 로그인 전, 후의 주요 페이지의 내용 변경을 통해 원하는 Content를 바로 노출한다. 
-모바일웹의 특성 상, 메뉴 구조가 더 단순해야 하기 때문에 로그인 전, 후의 메뉴 구조 변경을 통해 단순함을 유지하면서 필요한 메뉴에 바로 접근할 수 있도록 한다. 
로그인 전 사용자 
로그인 사용자 A 
로그인 사용자 B
24 
Design > Membership 
회원가입 및 로그인 
A사 홈페이지의 회원가입 및 로그인 사용자 시나리오 
To-Be 이용 시나리오 
관련된 
분석 시사점 
이용단계 
ID 등록 
서비스 가입 시 지정한 ID를 
A사 홈페이지 에서 등록 
ID 등록 성공 및 실패 
ID 등록 성공 시, 로그인 창으로 이동 
로그인 
A사 홈페이지 로그인 선택 
등록한 아이디, 패스워드를 통해 로그인 
아이디/비밀번호 찾기 시도 
요금 및 청구서 확인 
A사 홈페이지 로그인 시 Main화면에서 다양한 요금 관련 정보를 바로 확인 
멤버십 프로그램에 대한 안내 및 활용 가이드 확인 
•ID 등록 화면에서 ID 등록에 필요한 조건을 명확하게 노출 
•ID 등록과 관련된 모든 Process를 진행하지 않더라도 ID 등록 조건이 안 된다면 중간에 Process 종료 
•ID 등록 실패 시, 실패에 대한 원인을 상세하게 노출한 안내 페이지 제공 
•로그인 화면에서 로그인을 유도할 수 있는 로그인 시의 혜택 노출 
•로그인 후, 사용자들이 많이 이용하는 정보를 파악하여 Quick 메뉴 + 상세 정보를 바로 제공 
•로그인 후, 주요 페이지의 정보를 사용자에게 맞춰서 변경 
•멤버십 프로그램에 대한 자세한 안내 및 활용 가이드, 활용 가능한 혜택 리스트 제공 
-ID 등록을 위한 조건과 상세한 안내를 사전에 알려주어 사용자들이 ID 등록에 있어 오류를 범하지 않는다. 
-ID 등록 조건이 안될 경우 Process를 중간에 종료하여 이러한 사용자들의 수고를 최소한으로 한다. 
-로그인 후, 사용자들이 많이 사용하는 메뉴와 정보를 바로 제공하여 사용자는 로그인의 목적을 쉽게 달성할 수 있다. 
-멤버십 프로그램에 대한 자세한 안내 및 활용 가이드를 통해 로그인  멤버십에 대한 자연스러운 동선을 경험한다. 
휴대폰 인증과 i-pin 인증을 통해 아이디, 패스워드 찾기 
ID 등록 실패 시, 실패에 대한 자세한 안내를 받음 
휴대폰인증을 통해 본인인증 : 약관 동의, 고객명, 생년월일, 성별, 내외국인 등의 본인정보 입력 
i-PIN 입력 Process를 통한 본인인증
25 
Design > Membership 
회원가입 및 로그인 
A사 홈페이지의 회원가입 및 로그인 상세 구현 방안 
아이디 등록 Process 개선으로 사용자의 불필요한 노력을 없앰 
순서 변경 
[As-Is ID 등록 Process] 
[To-Be ID 등록 Process]
26 
Design > Membership 
회원가입 및 로그인 
A사 홈페이지의 회원가입 및 로그인 상세 구현 방안 
로그인 후 주요 페이지 정보 변경을 통해 빠른 목적 달성 
•로그인 후, 사용자들이 많이 이용하는 메뉴는 Quick 메뉴 형태 제공 
•Main 화면에 주요 정보를 바로 노출하여 쉽고 빠른 목적 달성 
[로그인 후 Main 화면] 
•로그인 후, 사용자의 목적을 빠르게 달성할 수 있도록 주요 페이지 정보를 사용자에게 맞추어 변경 
[로그인 후 상품 서브 메인 화면]
27 
Design > Membership 
회원가입 및 로그인 (모바일웹) 
A사 홈페이지 모바일웹의 회원가입 및 로그인 사용자 시나리오 
To-Be 이용 시나리오 
관련된 
분석 시사점 
이용단계 
ID 등록 
서비스 가입 시 지정한 ID를 
A사 홈페이지 모바일웹에서 등록 
ID 등록 성공 및 실패 
ID 등록 성공 시, 로그인 창으로 이동 
로그인 
A사 홈페이지 모바일웹에서 로그인 선택 
등록한 아이디, 패스워드를 통해 로그인 
아이디/비밀번호 찾기 시도 
요금 및 청구서 확인 
A사raodband.com 모바일웹 Main 화면에서 다양한 요금 관련 정보를 바로 확인 
•ID 등록 화면에서 ID 등록에 필요한 조건을 명확하게 노출 
•ID 등록과 관련된 모든 Process를 진행하지 않더라도 ID 등록 조건이 안 된다면 중간에 Process 종료 
•ID 등록 실패 시, 실패에 대한 원인을 상세하게 노출한 안내 페이지 제공 
•로그인 화면에서 로그인을 유도할 수 있는 로그인 시의 혜택 노출 
•로그인 후, 사용자들이 많이 이용하는 정보를 파악하여 Quick 메뉴 + 상세 정보를 바로 제공 
•모바일웹의 특성을 고려한 메뉴 구조로 재편 
•멤버십 프로그램에 대한 자세한 안내 및 활용 가이드, 활용 가능한 혜택 리스트 제공 
휴대폰 인증과 i-pin 인증을 통해 아이디, 패스워드 찾기 
ID 등록 실패 시, 실패에 대한 자세한 안내를 받음 
휴대폰인증을 통해 본인인증 : 약관 동의, 고객명, 생년월일, 성별, 내외국인 등의 본인정보 입력 
i-PIN 입력 Process를 통한 본인인증 
-ID 등록을 위한 조건과 상세한 안내를 사전에 알려주어 사용자들이 ID 등록에 있어 오류를 범하지 않는다. 
-ID 등록 조건이 안될 경우 Process를 중간에 종료하여 이러한 사용자들의 수고를 최소한으로 한다. 
-로그인 후, 사용자들이 많이 사용하는 메뉴와 정보를 바로 제공하여 사용자는 로그인의 목적을 쉽게 달성할 수 있다. 
-멤버십 프로그램에 대한 자세한 안내 및 활용 가이드를 통해 로그인  멤버십에 대한 자연스러운 동선을 경험한다. 
모바일의 특성이 반영 된, 로그인의 목적을 달성할 수 있는 메뉴만으로 재편된 메뉴 구조 확인 
멤버십 프로그램에 대한 안내 및 활용 가이드 확인
28 
Design > Membership 
회원가입 및 로그인 (모바일웹) 
A사 홈페이지 모바일웹의 회원가입 및 로그인 상세 구현 방안 
로그인 후 주요 페이지 정보 변경을 통해 빠른 목적 달성 
[로그인 전/후 Main 화면] 
[로그인 전/후 변경되는 사이트맵] 
•로그인 후, 사용자들이 많이 사용하는 메뉴는 Quick 메뉴 형태 제공 
•Main 화면에 주요 정보를 바로 노출하여 쉽고 빠른 목적 달성 
•로그인 전/후의 메뉴 변경을 통해 모바일의 특성을 고려한 Direct Access 제공
29 
Design > Membership 
부가서비스 신청 
부가서비스 확인 및 신청 사용자 시나리오 
To-Be 이용 시나리오 
관련된 분석 시사점 
이용단계 
확인동기 발생 
서비스 가입 후, 자신이 가입한 상품의 부가 서비스를 확인 
로그인 
A사 홈페이지 에서 로그인 
A사 홈페이지 모바일웹에서 로그인 
부가서비스 확인/선택 
•본인이 사용하는 상품에 대한 부가서비스 알림 제공 
•A사 홈페이지와 모바일웹에서 부가 서비스 이용 내역 확인 및 가입한 상품에 따라 이용할 수 있는 수 있는 부가 서비스 추천 
•A사 홈페이지과 모바일웹에서 해지 기능 제공 
-부가 서비스 알림을 통해 본인이 사용하는 상품에 대한 부가서비스를 일일이 찾을 필요 없이 늘 접할 수 있다. 
-로그인 후, 가입한 상품에 따른 부가 서비스 이용 내역 및 추천 부가 서비스를 제공 받아 원하는 부가 서비스를 손쉽게 선택할 수 있다. 
-A사 홈페이지와 모바일에서 상품 조회  부가 서비스 조회  구매 & 가입이 자연스럽게 연결되어 편리하게 이용할 수 있다. 
IPTV 사용자의 경우, 편성표와 이용가능 VOD 확인 
부가서비스 신청/해지 
A사 홈페이지과 모바일웹을 통해 부가서비스의 구매& 가입 
A사 홈페이지과 모바일웹을 통해 가입&구매한 부가서비스 확인 후 해지 
사용자 본인이 사용하는 상품의 부가서비스 알림 확인 
A사 홈페이지과 모바일웹을 통해 자신이 가입한 상품의 부가서비스 이용 내역 및 이용 가능 부가서비스 확인 
찜한 부가서비스를 IPTV에서 가입 & 구매 
A사 홈페이지과 모바일웹을 통해 가입 가능한 부가서비스 확인 후, 찜하기
30 
Design > Membership 
부가서비스 신청 
부가서비스 확인 및 신청 상세구현 방안 
로그인 후 주요 페이지 정보 변경을 통해 빠른 목적 달성 
[로그인 전 Content 화면] 
[로그인 후 Content 화면] 
•로그인 후, 현재 시간에 맞는 편성표 제공 
•로그인 후, 사용하는 서비스에서 이용할 수 있는 부가 서비스 추천 
•바로 가입 및 구매 가능한 링크 제공
Design 
User Interface
32 
Design > User Interface 
해당 페이지를 가장 잘 전달할 수 있는 목적 영역과 목적을 이루기 위한 서포트 영역을 분리하여, 사용자의 페이지 접속 목적을 쉽고 빠르게 달성할 수 있도록 사용자 편의성 증대 
UI Framework 
해당 페이지를 가장 잘 전달할 수 있는 목적 영역 
목적을 이루기 위한 서포트 영역 
① Header : SK Broadband Logo Area 
② Utility Menu : 주요 필수 노출 메뉴로 로그인(로그아웃), ID 등록, 이벤트 메뉴와 검색으로 구성 
‘가입’의 경우 중요도 상 2Depth까지 항시 노출 
③ 1st Level Navigation : 1Depth 메뉴를 주요 Key 서비스 3개와 my 메뉴, 가입 메뉴로 구성하여 사용자 목적을 이룰 수 있는 Start Point 로서의 효율성 극대화 
④ 목적 영역 : 해당 페이지의 내용을 가장 잘 전달할 수 있는 전체 페이지의 목적 영역, 컨텐츠를 효율적으로 노출할 수 있도록 자유롭게 구성 
⑤ 서포트 영역 : 해당 페이지의 목적을 이루기 위해 추가적으로 의사 결정을 도와주고, Action을 취할 수 있도록 하는 서포트 영역, 목적과 관련된 각종 이벤트, 안내, Action 버튼 등의 노출 
④ + ⑤ 공통 : 신규 고객, 기존 고객의 로그인 전 / 후에 따라 달라지는 이용 목적을 각 Case별로 반영하여 제공 
① Header 
② Utility Menu 
③ 1st Level Menu Navigation 
④ 목적 영역 
⑤ 서포트 영역 
④ 목적 영역 
⑤ 서포트 영역
33 
Design > User Interface 
Main Page 
전체 공통 Header 
GNB Navi. 
Key 컨텐츠 영역 
상품 탐색 영역 
부가 서비스영역 
C/S 영역 
Footer 
해당 페이지의 주요 Key 컨텐츠 신규 고객, 기존 고객 (로그인 전/후) 에 따라 변경 
Key 컨텐츠 서포트 영역 
주요 Key 컨텐츠에 따라 변경되는 프로모션 영역 
상품 탐색 영역 친근한 사용자 언어를 통한 상품 탐색 
상품 탐색 보조 영역 
원하는 상품을 찾지 못했을 경우 보조수단 
부가 서비스 영역 목적을 쉽게 달성할 수 있도록 페이지 이동 없이 미리 보기 제공 
Key 컨텐츠 영역 : 기존고객 
Key 컨텐츠 영역 
기존고객 로그인 후 : 홈페이지 이용 목적을 빠르게 달성할 수 있도록 실제 Content가 바로 노출
34 
Design > User Interface 
Main Page (Mobile) 
Header 
Key 컨텐츠 영역 
부가 컨텐츠 영역 
사이트 맵 & Footer 
전체 공통 Header 
해당 페이지의 Title + 전체 Navigation 이동 버튼 
Key 컨텐츠 영역 
신규 고객, 기존 고객 (로그인 전/후)에 따라 변경 
부가 서비스 영역 
목적을 쉽게 달성할 수 있도록 페이지 이동 없이 미리 보기 제공 
사이트 맵 & Footer 영역 
모바일의 특성 상, 페이지 이동이 쉽지 않음을 고려하여 Main 페이지에서 전체 사이트 맵을 
노출하여 이동 동선을 단축을 도와 줌 
Key 컨텐츠 영역 : 기존고객 
사이트 맵 영역 : 기존고객
35 
Design > User Interface 
Content Page 
GNB Navi. 
Key 컨텐츠 영역 
상품 탐색 영역 
주요 컨텐츠 영역 
전체 공통 Header 
1Depth + 2Depth 노출 
해당 페이지의 주요 Key 컨텐츠 신규 고객, 기존 고객 (로그인 전/ 후)에 따라 변경 
채널 및 상품 탐색 영역 원하는 채널 입력을 통한 부가 서비스 및 상품 탐색 
주요 컨텐츠 노출 영역 다양한 컨텐츠가 활발하게 업데이트 된다는 느낌을 제공할 수 있는 그루핑 된 컨텐츠 노출 
Key 컨텐츠 영역 : 기존고객 
Key 컨텐츠 영역 
기존고객 로그인 후 : 홈페이지 이용 목적을 빠르게 달성할 수 있도록 실제 Content가 바로 노출 
Content Page의 경우, 편성표를 현재 시간 기준으로 노출
36 
Design > User Interface 
Content Page (Mobile) 
Header 
프로모션 영역 
Key 컨텐츠 영역 
부가 컨텐츠 영역 
Key 컨텐츠 영역 : 기존고객 
전체 공통 Header 
해당 페이지의 Title + 전체 Navigation 이동 버튼 
Key 컨텐츠 영역 
모바일의 특성 상, 메뉴 이동이 쉽도록 구성 
좌우 플리킹만으로 관련 컨텐츠 확인할 수 있는 쉬운 인터렉션으로 구성 
Key 컨텐츠 영역 
기존고객 로그인 후 : 홈페이지 이용 목적을 빠르게 달성할 수 있도록 채널 정보가 가장 처음으로 노출 
상품 탐색 영역
37 
Design > User Interface 
상품 Page 
GNB Navi. 
Key 컨텐츠 영역 
상품 탐색 영역 
전체 공통 Header 
1Depth + 2Depth 노출 
해당 페이지의 주요 Key 컨텐츠 신규 고객, 기존 고객 (로그인 전/ 후)에 따라 변경 
상품 탐색 영역 친근한 사용자 언어를 통한 상품 탐색 
신규 고객, 기존 고객 (로그인 전/ 후)에 따라 변경 
상품 탐색 영역 : 기존고객 
상품 탐색 영역 
기존고객 로그인 후 : 사용자의 상품 탐색 동기에 맞는 검색 조건 세팅 
Key 컨텐츠 영역 : 기존고객 
Key 컨텐츠 영역 
기존고객 로그인 후 : 사용자의 상품 탐색 동기에 맞는 프로모션 노출
38 
Design > User Interface 
추가 정보 노출 
최상단 Notice 영역 
사용자에게 꼭 전달해야 할 정보를 노출하는 영역, 페이지 최상단에 노출하여 주목도를 높이고, 거부감이 높은 팝업 대체 
컨텐츠 미리보기 영역 
페이지 이동 없이 미리 보기가 가능하여 원하는 목적을 쉽게 달성 
상품 가격 상세정보 노출 영역 
상품의 가격에 마우스 오버 시, 상세 할인 내역, 약정 기간 내의 전체 금액 및 전체 할인 금액 등의 상세 정보 노출, 
페이지 이동 없이 원하는 정보를 확인할 수 있음 
서비스 특징 노출 영역 
1Depth 메뉴에 맞는 서비스의 특징 노출 영역, 중요하지만 Depth가 깊은 정보를 GNB에 노출하여 접근성을 높임
39 
Design > User Interface 
‘가입’ 접근 경로 
가입하기 GNB 
‘가입’의 중요도를 고려하여 2Depth까지 상시노출 
스크롤 시, 상단에 가입 이동 경로 노출 
페이지가 길어져서 스크롤을 하는 경우, GNB가 스크롤로 인해 가려지는 경우, 최 상단에 가입으로 이동할 수 있는 Access Point 항시 노출
Design 
Product Info
41 
Design > Product Info 
상품의 탐색 동기에 맞는 상품 탐색 경험을 제공 
상품 정보 제공 전략 
-신규 고객과 기존 고객의 상품 탐색 동기에 맞는 상품 필터링 조건과 관련 이벤트를 통해 원하는 상품을 탐색하는 노력을 덜어준다. 
-상품 리스트를 통해 상품의 혜택, 속성, 특징, 가격 등을 통한 비교가 한눈에 가능하기 때문에 상품을 비교하는 노력을 덜어준다. 
-상품 선택에 결정적인 영향을 미치는 정보인 약정 기간 내의 할인 혜택, 가입 관련 이벤트를 제공하여 상품을 선택하는 데 필요한 노력을 덜어준다. 
다양한 필터링 조건을 통해 
원하는 상품을 쉽게 찾을 수 있는 
상품 리스트 페이지 
상품의 속성, 혜택, 특징, 가격을 
한눈에 비교할 수 있는 
상품 리스트 페이지 
상품 선택에 결정적인 영향을 
미치는 정보를 제공하는 
상품 상세 페이지 
상품 탐색 
상품 비교 
상품 선택 
상품 탐색 
상품 탐색 
상품 탐색 
상품 비교 
상품 비교 
상품 선택
42 
Design > Product Info 
상품탐색, 비교 및 선택 사용자 시나리오 
To-Be 이용 
시나리오 
관련된 분석 시사점 
이용단계 
상품 탐색 동기 
신뢰성 있는 정보를 얻기 위해 A사 홈페이지과 모바일웹에서 상품 탐색 
상품 정보 조회 
A사 홈페이지과 모바일웹에서 다양한 필터링 조건을 통해 원하는 상품을 바로 찾을 수 있고, 한눈에 모든 상품을 일목요연하게 조회할 수 있음 
상품 비교 
원하는 상품 군의 가격, 혜택, 상품 특징을 한눈에 비교할 수 있음 
페이지 이동 없이 가장 중요한 정보의 상세 내용까지 비교할 수 있음 
원하는 상품을 찾지 못했을 경우의 보조 수단 
•사용자의 이슈, 혜택 등의 다양한 상품 필터링 조건 제공을 통해 상품 탐색 동기에 맞는 제공 상품 탐색 경험 제공 
•전체 기간내의 할인 금액을 구체적인 숫자로 표시 
•상품의 속성, 금액, 혜택, 채널, Content 별 탐색 기능 필요 
•상품 리스트 페이지를 통해 상품의 종류, 혜택, 특징, 요금을 한 눈에 비교 
•상품 선택 의사결정에 긍정적인 영향을 줄 수 있는 이벤트, 혜택 정보를 함께 노출 
•원하는 상품을 쉽게 찾을 수 있는 ‘맞춤 상품’ 기능 업그레이드 
•선택이 행동으로 이어질 수 있도록 가입 관련 내역을 전체 사이트 내에 노출 
-원하는 상품을 찾기 위해 여러 단계를 거칠 필요 없이, 다양한 필터링 조건을 통해 원하는 상품을 바로 찾고 한눈에 모든 상품을 일목요연하게 조회할 수 있다. 
-상세한 상품 비교를 위해 상품을 하나하나 확인할 필요 없이 한 눈에 상품을 비교할 수 있다. 
-상품 선택과 가입 절차에서 이벤트와 혜택 정보를 지속적으로 노출하여, 사용자의 의사결정에 긍정적인 영향을 줄 수 있다. 
상품 선택 
원하는 상품의 상세 정보,혜택의 자세한 내용과 할인 항목을 상세하게 확인 
상품을 선택하지 못했을 경우, 좀 더 쉽게 맞춤 상품을 통해 원하는 상품 확인 
상품 결과에서 ‘가입 상담’ 버튼을 선택하거나 가입 상담 전화를 함 
대리점이나 마케팅을 통해 얻은 상품 정보의 자세한 확인 
특별한 이슈 (이사, 결혼, 이통사 변경) 시, 상품 탐색을 시작 
상품 탐색, 비교, 선택
43 
Design > Product Info 
상품 탐색 동기에 맞는 상품 탐색 경험 제공 
상품탐색 및 비교 상세 구현 방안 
•신규 회원, 기존 회원의 상품 탐색 동기에 맞는 다양한 프로모션과 상품 탐색 조건 제공 
[신규회원 상품 탐색 경험] 
[기존회원 상품 탐색 경험] 
상품 탐색, 비교, 선택
44 
Design > Product Info 
한눈에 상품의 상세한 정보까지 비교하고, 의사 선택을 유도 
상품탐색 및 비교 상세 구현 방안 
•상품 리스트 페이지를 통해 상품의 속성, 금액, 혜택 특징, 요금을 한눈에 비교 가능 
•상품 선택에 도움을 줄 수 있는 최저요금, 최대혜택은 별도 표시 
•금액 영역에 마우스 오버 시, 상세 할인 내역 및 약정 기간 내의 총 납부 요금 및 할인 요금 확인 가능 
•상품 선택의 의사결정에 긍정적인 영향을 줄 수 있는 이벤트, 혜택 정보를 함께 노출 
[상품 전체를 확인할 수 있는 상품 서브메인 페이지이자 상품 리스트 페이지] 
상품 탐색, 비교, 선택
45 
Design > Product Info 
원하는 상품을 좀 더 빨리 찾기 위한 모바일 웹 맞춤상품 기능 제공 
상품탐색 및 비교 상세 구현 방안 
•신규 고객이 오프라인에서 확인했던 상품을 좀 더 쉽게 찾기 위한 상품 속성별 필터링 조건 노출 
[신규고객의 상품 탐색] 
[기존고객의 상품 탐색] 
[공통 : 쉬운 상품 탐색 조건 입력] 
•기존 고객의 상품 탐색 동기에 맞춰, 더욱 빠르게 상품을 찾기 위한 이슈별 필터링 조건 노출 
•앞에서 입력한 상품 필터링 조건 덕분에 더욱 간소해지는 상품 탐색 조건 입력 단계 
상품 탐색, 비교, 선택
46 
Design > Product Info 
상품 선택의 의사결정에 결정적 영향을 줄 수 있는 정보를 함께 노출 
상품탐색 및 비교 상세 구현 방안 
상품 탐색과 선택에 방해가 되는 모든 요소 제거를 위해 LNG를 삭제하고, Line Map만 제공 
① 탐색 
② 비교 
③ 비교, 선택 
① 탐색 
•상품을 특징을 알 수 있는 한 줄 카피 
•상품의 실질적인 특징을 알 수 있는 상품 정보 
② 비교 
•상품의 약정, 특징, 유형 선택을 친근한 언어로 표현 
•월 납부 요금과 상세한 할인 혜택 노출 
③ 선택 
•상품 선택 의사결정에 결정적 영향을 줄 수 있는 약정 기간 내의 전체 납부 금액 및 할인 혜택 노출 
•①  ②  ③ 의 정보 확인 후, 자연스럽게 가입으로 이루어 질 수 있는 영역 제공 
상품 탐색, 비교, 선택
47 
Design > Product Info 
하나의 상품 내에서도 원하는 요금을 한눈에 확인할 수 있도록 제공 
상품탐색 및 비교 상세 구현 방안 
•선택한 약정에 따라, 상품의 요금제를 한눈에 확인할 수 있는 표 제공 
00 
•선택한 약정에 따라, 부가요금까지 한눈에 확인할 수 있는 표 제공 
상품 탐색, 비교, 선택
Design 
가입
Design > 가입 
가입 구현 전략 
고객의 가입결정이 흔들리지 않도록 끝까지 상품에 대한 혜택을 인지 시킴 
-사용자의 가입 결정이 번복되지 않도록 사이트 전체 내에서 가입으로 이동할 수 있는 Access Point를 제공한다. 
-가입 페이지는 접속한 사용자의 이탈을 방지하는 요소들로 구성한다. 
-기존의 가입에서는 화면 당 한 가지 정보를 사용자에게 노출시켰다면, 새로운 가입화면에서는 가입에 필요한 여러 정보를 제공하여 정보를 한 눈에 확인하고, 바로 가입으로 이루어질 수 있는 동선을 구축한다. 
새로운 가입화면에서의 가입신청 고객 
제휴사 할인!!!! 
요금할인!! 
가입 
이벤트!!! 
가입 혜택! 
사은품!! 
기존 가입화면에서의 가입신청 고객 
!
50 
Design > 가입 
신규 고객의 상품 가입 
신규고객의 상품 가입 사용자 시나리오 
To-Be 이용 
시나리오 
관련된 분석 시사점 
이용단계 
상품 경로 확인 
약정이 다 끝나갈 무렵 타 통신사의 새로운 상품을 권유하는 문자의 URL로 이동 
상품 탐색 
상품 탐색 시나리오 
상품 선택 
이벤트 및 혜택 확인 
가입 이전에 상품 혜택과 프로모션을 한번 더 확인함으로써, 가입 의지 상승 
•사용자의 관심을 끌 수 있는 마케팅 (할인 혜택, 상품 특징, 가입혜택 등 강조) 
•외부 채널인 공식 Blog, SNS, 유투브와 A사 홈페이지와의 연계 필요 
•상품 선택 결정에 긍정적인 영향을 줄 수 있는 이벤트, 혜택 정보를 함께 노출. 
•사용자에게 맞는 상품을 보다 쉽게 찾을 수 있는 ‘맞춤상품 추천서비스’ 업그레이드 
•사용자가 가입에 대한 생각을 번복하지 않도록 붙잡는 효과 
-가입하려고 하는 상품정보와 상품 관련 이벤트 및 혜택정보는 함께 제공되어야 상품에 대한 혜택을 사용자가 쉽게 파악할 수 있다. 
-가입 신청 시 고객의 결정을 흔들리게 하는 요소들을 배제하고 긍정적인 영향을 미치는 정보를 함께 노출해야 한다. 
-언제 어디서나 가입이 용이하도록 웹과 모바일웹에서 동시에 가입신청을 지원해야 한다. 
-전화상담을 할 때 사용자가 신청한 가입상품 정보에 대해 반복하여 설명하는 일이 없도록 정보가 상담원에게 잘 전달되어야 한다. 
A사 공식 홈페이지나 SNS, 대리점 사이트, 블로그 등을 통한 상품 확인 
전화 마케팅을 통해 이동 
대리점이나 매장 가판에서 상품 확인 
원하는 상품의 상세 정보,혜택의 자세한 내용과 할인 항목을 상세하게 확인 
상품을 선택하지 못했을 경우, 좀 더 쉽게 맞춤 상품을 통해 원하는 상품 선택 
상품 관련 이벤트가 있는지 같은 페이지 내에서 확인하고 선택 
가입 시 받을 수 있는 사은품 확인 및 카드할인 확인
51 
Design > 가입 
신규고객의 상품 가입 사용자 시나리오 
To-Be 이용 시나리오 
관련된 분석 시사점 
이용단계 
상품 가입 경로 
A사 홈페이지 메인 또는 상품 상세 페이지에 있는 ‘가입문의’ 전화번호로 연결 
상품 가입 
•‘전화상담신청’을 ‘가입상담신청’으로 명칭을 바꿔 사용자에게 가입만을 위한 번호라는 것을 명확하게 알림 
•A사 홈페이지와 모바일웹에서 가입까지 가능하다는 메시지를 지속 노출 
•‘가입상담 신청하기’ 메뉴 선택 시 바로 전화상담 신청서를 입력할 수 있도록 하여 사용자의 가입 단계를 단축 
•사용자가 선택한 상품 정보가 자연스럽게 가입 상담 사에게 전달 
•IPTV의 이용방법을 자세히 알 수 있도록 매뉴얼 제공 
•A사 홈페이지와 모바일웹에서 멤버십 프로그램 안내 & 부가 서비스를 확인하고 가입 또는 구매가 가능하도록 함 
•지속적 방문을 유도할 수 있는 요금과 관련된 흥미 있는 정보 제공 
-가입하려고 하는 상품정보와 상품 관련 이벤트 및 혜택정보는 함께 제공되어야 상품에 대한 혜택을 사용자가 쉽게 파악할 수 있다. 
-가입 신청 시 고객의 결정을 흔들리게 하는 요소들을 배제하고 긍정적인 영향을 미치는 정보를 함께 노출해야 한다. 
-언제 어디서나 가입이 용이하도록 웹과 모바일웹에서 동시에 가입신청을 지원해야 한다. 
-전화상담을 할 때 사용자가 신청한 가입상품 정보에 대해 반복하여 설명하는 일이 없도록 정보가 상담원에게 잘 전달되어야 한다. 
A사 웹/ 모바일 홈페이지 메인에서 ‘가입’으로 이동하거나 상품 상세 페이지의 ‘가입상담 신청하기’로 이동 
바로 상담원과의 전화통화를 통해 상품에 대한 상담 실시 및 가입 절차 진행 
선택한 상품을 쉽고 빠르게 가입하기 위한 전화상담 신청서 기입 후 ‘전화상담 신청하기’ 선택 
가입 완료 후 
A사 홈페이지에서 요금 확인 및 관련 부가서비스 확인 
멤버십과 관련된 포인트 및 혜택 프로그램 확인 
IPTV의 경우, 자세한 이용방법을 확인하고, 자주 보는 채널의 즐겨 찾기 
부가 서비스 가입 및 구매 
신규 고객의 상품 가입
52 
Design > 가입 
신규 고객의 상품 가입 
‘가입’으로 이동하면 바로 전화상담 신청 Form을 제공하여 사용자의 가입 단계를 단축 
가입 신청서 작성 시 같은 페이지 내에서 혜택 및 사은품을 확인할 수 있도록 하여 사용자의 가입행동이 막히지 않도록 함 
가입상담 전화번호와 일반상담 전화번호의 혼선이 없도록 명확한 번호 제공 
가입관련 이벤트 및 사은품을 바로 노출하여 이동 단계를 단축 
신규고객의 상품 가입 상세 구현 방안 
사용자의 가입 결정이 번복되지 않도록 가입 페이지로의 신속한 이동 및 명확한 혜택 정보 제공
53 
Design > 가입 
신규 고객의 상품 가입 
상품 관련 이벤트를 Scroll하여 내리면 상단에 가입전화를 할 수 있는 탭이 계속해서 노출이 되어 사용자가 쉽게 가입전화를 연결할 수 있도록 함 
시간과 장소에 상관없이 사용자가 원할 때 가입신청이 쉽고 빠르게 이루어 질 수 있도록 단순한 가입 프로세스 제공 
가입 신청 페이지에서 바로 관련 이벤트를 확인해 볼 수 있도록 이벤트 및 혜택 정보 배치 
신규고객의 상품 가입 상세 구현 방안 
언제 어디서나 쉽고 빠르게 가입할 수 있는 가입신청 페이지 마련
Design 
고객센터 
본 챕터는 공개용 버전에서 생략
Design 
차별화 서비스 
본 챕터는 공개용 버전에서 생략
Design 
Graphic Design 
본 챕터는 공개용 버전에서 생략
이제 우리는 단순한 보험회사가 아니다. 우리는 앞으로 재정적 안전이나 자동차 구매, 가옥 개조, 심지어 멋진 휴가에 이르기까지 다양한 꿈을 이루는 데 도움이 되는 상품과 서비스를 제공할 것이다. 
- 파머스그룹의 마틴 파인스타인 
우리는 단순한 디자인 회사가 아닙니다. 우리의 고객을 위해서 시장이 원하는 변화를 찾아줍니다 
301, Dosan-daero, Gangnam-gu Seoul, Korea 135-890 T. 02 2052 8900 F. 02 2052 8904 U. rightbrain.co.kr

Contenu connexe

Tendances

UX Academy 17th 마이리얼트립 UX/UI 개선 프로젝트
UX Academy 17th 마이리얼트립 UX/UI 개선 프로젝트UX Academy 17th 마이리얼트립 UX/UI 개선 프로젝트
UX Academy 17th 마이리얼트립 UX/UI 개선 프로젝트RightBrain inc.
 
모바일 UX/UI : 트랜드와 원칙으로써의 UX - 1부
모바일 UX/UI : 트랜드와 원칙으로써의 UX - 1부모바일 UX/UI : 트랜드와 원칙으로써의 UX - 1부
모바일 UX/UI : 트랜드와 원칙으로써의 UX - 1부RightBrain inc.
 
UX 아카데미 오픈프로젝트 [쿠팡이츠 - UX/UI 개선]
UX 아카데미 오픈프로젝트 [쿠팡이츠 - UX/UI 개선]UX 아카데미 오픈프로젝트 [쿠팡이츠 - UX/UI 개선]
UX 아카데미 오픈프로젝트 [쿠팡이츠 - UX/UI 개선]RightBrain inc.
 
UX 아카데미 오픈프로젝트 [카카오톡 선물하기- UX/UI 개선]
UX 아카데미 오픈프로젝트 [카카오톡 선물하기- UX/UI 개선]UX 아카데미 오픈프로젝트 [카카오톡 선물하기- UX/UI 개선]
UX 아카데미 오픈프로젝트 [카카오톡 선물하기- UX/UI 개선]RightBrain inc.
 
스타벅스 사이렌오더 사용 편의성 개선을 위한 UX 조사
스타벅스 사이렌오더 사용 편의성 개선을 위한 UX 조사스타벅스 사이렌오더 사용 편의성 개선을 위한 UX 조사
스타벅스 사이렌오더 사용 편의성 개선을 위한 UX 조사RightBrain inc.
 
[Rightbrain UX Academy] Skyscanner UX/UI개선
[Rightbrain UX Academy] Skyscanner UX/UI개선 [Rightbrain UX Academy] Skyscanner UX/UI개선
[Rightbrain UX Academy] Skyscanner UX/UI개선 RightBrain inc.
 
UX Academy 20th 애플 건강앱 UX/UI 개선 프로젝트
UX Academy 20th 애플 건강앱 UX/UI 개선 프로젝트UX Academy 20th 애플 건강앱 UX/UI 개선 프로젝트
UX Academy 20th 애플 건강앱 UX/UI 개선 프로젝트RightBrain inc.
 
UX 아카데미 오픈프로젝트 [29cm - UX/UI 개선]
UX 아카데미 오픈프로젝트 [29cm - UX/UI 개선] UX 아카데미 오픈프로젝트 [29cm - UX/UI 개선]
UX 아카데미 오픈프로젝트 [29cm - UX/UI 개선] RightBrain inc.
 
UX Academy 16th Subway UX/UI 개선 프로젝트
UX Academy 16th Subway UX/UI 개선 프로젝트UX Academy 16th Subway UX/UI 개선 프로젝트
UX Academy 16th Subway UX/UI 개선 프로젝트RightBrain inc.
 
여행가이드 트리플 - UXUI 개선
여행가이드 트리플 - UXUI 개선여행가이드 트리플 - UXUI 개선
여행가이드 트리플 - UXUI 개선RightBrain inc.
 
라이트브레인 UX 아카데미 8기 오픈프로젝트 [Airbnb 어플리케이션 UX/UI개선 Design]
라이트브레인 UX 아카데미 8기 오픈프로젝트 [Airbnb 어플리케이션 UX/UI개선 Design]라이트브레인 UX 아카데미 8기 오픈프로젝트 [Airbnb 어플리케이션 UX/UI개선 Design]
라이트브레인 UX 아카데미 8기 오픈프로젝트 [Airbnb 어플리케이션 UX/UI개선 Design]RightBrain inc.
 
UX 아카데미 오픈프로젝트 [클럽하우스- UX/UI 개선]
 UX 아카데미 오픈프로젝트 [클럽하우스- UX/UI 개선] UX 아카데미 오픈프로젝트 [클럽하우스- UX/UI 개선]
UX 아카데미 오픈프로젝트 [클럽하우스- UX/UI 개선]RightBrain inc.
 
UXDS_Naver me UX 개선안 프로젝트_최종
UXDS_Naver me UX 개선안 프로젝트_최종UXDS_Naver me UX 개선안 프로젝트_최종
UXDS_Naver me UX 개선안 프로젝트_최종Yeji Cho
 
UX Academy 18th 네이버 쇼핑 UX/UI 개선 프로젝트
UX Academy 18th 네이버 쇼핑 UX/UI 개선 프로젝트UX Academy 18th 네이버 쇼핑 UX/UI 개선 프로젝트
UX Academy 18th 네이버 쇼핑 UX/UI 개선 프로젝트RightBrain inc.
 
[Rightbrain UX Academy] Megabox UX/UI개선
[Rightbrain UX Academy] Megabox UX/UI개선 [Rightbrain UX Academy] Megabox UX/UI개선
[Rightbrain UX Academy] Megabox UX/UI개선 RightBrain inc.
 
UX Academy 19th 뱅크샐러드 UX/UI 개선 프로젝트
UX Academy 19th 뱅크샐러드 UX/UI 개선 프로젝트UX Academy 19th 뱅크샐러드 UX/UI 개선 프로젝트
UX Academy 19th 뱅크샐러드 UX/UI 개선 프로젝트RightBrain inc.
 
UX 아카데미 오픈프로젝트 [ 이마트몰 - UX/UI 개선]
UX 아카데미 오픈프로젝트 [ 이마트몰 - UX/UI 개선]UX 아카데미 오픈프로젝트 [ 이마트몰 - UX/UI 개선]
UX 아카데미 오픈프로젝트 [ 이마트몰 - UX/UI 개선]RightBrain inc.
 
알라딘 어플리케이션 UX개선
알라딘 어플리케이션 UX개선알라딘 어플리케이션 UX개선
알라딘 어플리케이션 UX개선RightBrain inc.
 
UX 아카데미 오픈프로젝트 [Gmarket - UX/UI 개선]
UX 아카데미 오픈프로젝트 [Gmarket - UX/UI 개선]UX 아카데미 오픈프로젝트 [Gmarket - UX/UI 개선]
UX 아카데미 오픈프로젝트 [Gmarket - UX/UI 개선]RightBrain inc.
 
UX 아카데미 오픈프로젝트 [토스 모바일앱 - UX/UI 개선]
UX 아카데미 오픈프로젝트 [토스 모바일앱 - UX/UI 개선] UX 아카데미 오픈프로젝트 [토스 모바일앱 - UX/UI 개선]
UX 아카데미 오픈프로젝트 [토스 모바일앱 - UX/UI 개선] RightBrain inc.
 

Tendances (20)

UX Academy 17th 마이리얼트립 UX/UI 개선 프로젝트
UX Academy 17th 마이리얼트립 UX/UI 개선 프로젝트UX Academy 17th 마이리얼트립 UX/UI 개선 프로젝트
UX Academy 17th 마이리얼트립 UX/UI 개선 프로젝트
 
모바일 UX/UI : 트랜드와 원칙으로써의 UX - 1부
모바일 UX/UI : 트랜드와 원칙으로써의 UX - 1부모바일 UX/UI : 트랜드와 원칙으로써의 UX - 1부
모바일 UX/UI : 트랜드와 원칙으로써의 UX - 1부
 
UX 아카데미 오픈프로젝트 [쿠팡이츠 - UX/UI 개선]
UX 아카데미 오픈프로젝트 [쿠팡이츠 - UX/UI 개선]UX 아카데미 오픈프로젝트 [쿠팡이츠 - UX/UI 개선]
UX 아카데미 오픈프로젝트 [쿠팡이츠 - UX/UI 개선]
 
UX 아카데미 오픈프로젝트 [카카오톡 선물하기- UX/UI 개선]
UX 아카데미 오픈프로젝트 [카카오톡 선물하기- UX/UI 개선]UX 아카데미 오픈프로젝트 [카카오톡 선물하기- UX/UI 개선]
UX 아카데미 오픈프로젝트 [카카오톡 선물하기- UX/UI 개선]
 
스타벅스 사이렌오더 사용 편의성 개선을 위한 UX 조사
스타벅스 사이렌오더 사용 편의성 개선을 위한 UX 조사스타벅스 사이렌오더 사용 편의성 개선을 위한 UX 조사
스타벅스 사이렌오더 사용 편의성 개선을 위한 UX 조사
 
[Rightbrain UX Academy] Skyscanner UX/UI개선
[Rightbrain UX Academy] Skyscanner UX/UI개선 [Rightbrain UX Academy] Skyscanner UX/UI개선
[Rightbrain UX Academy] Skyscanner UX/UI개선
 
UX Academy 20th 애플 건강앱 UX/UI 개선 프로젝트
UX Academy 20th 애플 건강앱 UX/UI 개선 프로젝트UX Academy 20th 애플 건강앱 UX/UI 개선 프로젝트
UX Academy 20th 애플 건강앱 UX/UI 개선 프로젝트
 
UX 아카데미 오픈프로젝트 [29cm - UX/UI 개선]
UX 아카데미 오픈프로젝트 [29cm - UX/UI 개선] UX 아카데미 오픈프로젝트 [29cm - UX/UI 개선]
UX 아카데미 오픈프로젝트 [29cm - UX/UI 개선]
 
UX Academy 16th Subway UX/UI 개선 프로젝트
UX Academy 16th Subway UX/UI 개선 프로젝트UX Academy 16th Subway UX/UI 개선 프로젝트
UX Academy 16th Subway UX/UI 개선 프로젝트
 
여행가이드 트리플 - UXUI 개선
여행가이드 트리플 - UXUI 개선여행가이드 트리플 - UXUI 개선
여행가이드 트리플 - UXUI 개선
 
라이트브레인 UX 아카데미 8기 오픈프로젝트 [Airbnb 어플리케이션 UX/UI개선 Design]
라이트브레인 UX 아카데미 8기 오픈프로젝트 [Airbnb 어플리케이션 UX/UI개선 Design]라이트브레인 UX 아카데미 8기 오픈프로젝트 [Airbnb 어플리케이션 UX/UI개선 Design]
라이트브레인 UX 아카데미 8기 오픈프로젝트 [Airbnb 어플리케이션 UX/UI개선 Design]
 
UX 아카데미 오픈프로젝트 [클럽하우스- UX/UI 개선]
 UX 아카데미 오픈프로젝트 [클럽하우스- UX/UI 개선] UX 아카데미 오픈프로젝트 [클럽하우스- UX/UI 개선]
UX 아카데미 오픈프로젝트 [클럽하우스- UX/UI 개선]
 
UXDS_Naver me UX 개선안 프로젝트_최종
UXDS_Naver me UX 개선안 프로젝트_최종UXDS_Naver me UX 개선안 프로젝트_최종
UXDS_Naver me UX 개선안 프로젝트_최종
 
UX Academy 18th 네이버 쇼핑 UX/UI 개선 프로젝트
UX Academy 18th 네이버 쇼핑 UX/UI 개선 프로젝트UX Academy 18th 네이버 쇼핑 UX/UI 개선 프로젝트
UX Academy 18th 네이버 쇼핑 UX/UI 개선 프로젝트
 
[Rightbrain UX Academy] Megabox UX/UI개선
[Rightbrain UX Academy] Megabox UX/UI개선 [Rightbrain UX Academy] Megabox UX/UI개선
[Rightbrain UX Academy] Megabox UX/UI개선
 
UX Academy 19th 뱅크샐러드 UX/UI 개선 프로젝트
UX Academy 19th 뱅크샐러드 UX/UI 개선 프로젝트UX Academy 19th 뱅크샐러드 UX/UI 개선 프로젝트
UX Academy 19th 뱅크샐러드 UX/UI 개선 프로젝트
 
UX 아카데미 오픈프로젝트 [ 이마트몰 - UX/UI 개선]
UX 아카데미 오픈프로젝트 [ 이마트몰 - UX/UI 개선]UX 아카데미 오픈프로젝트 [ 이마트몰 - UX/UI 개선]
UX 아카데미 오픈프로젝트 [ 이마트몰 - UX/UI 개선]
 
알라딘 어플리케이션 UX개선
알라딘 어플리케이션 UX개선알라딘 어플리케이션 UX개선
알라딘 어플리케이션 UX개선
 
UX 아카데미 오픈프로젝트 [Gmarket - UX/UI 개선]
UX 아카데미 오픈프로젝트 [Gmarket - UX/UI 개선]UX 아카데미 오픈프로젝트 [Gmarket - UX/UI 개선]
UX 아카데미 오픈프로젝트 [Gmarket - UX/UI 개선]
 
UX 아카데미 오픈프로젝트 [토스 모바일앱 - UX/UI 개선]
UX 아카데미 오픈프로젝트 [토스 모바일앱 - UX/UI 개선] UX 아카데미 오픈프로젝트 [토스 모바일앱 - UX/UI 개선]
UX 아카데미 오픈프로젝트 [토스 모바일앱 - UX/UI 개선]
 

En vedette

통신서비스 온라인 채널 UX Research 사례 by Rightbrain
통신서비스 온라인 채널 UX Research 사례 by Rightbrain통신서비스 온라인 채널 UX Research 사례 by Rightbrain
통신서비스 온라인 채널 UX Research 사례 by RightbrainRightbrain UX1 Consulting group
 
무장애정류장조 UX Consultant 교육 최종 과제결과
무장애정류장조 UX Consultant 교육 최종 과제결과무장애정류장조 UX Consultant 교육 최종 과제결과
무장애정류장조 UX Consultant 교육 최종 과제결과Rightbrain UX1 Consulting group
 

En vedette (20)

Mobile design pattern
Mobile design patternMobile design pattern
Mobile design pattern
 
3월 2주차 UX trend
3월 2주차 UX trend3월 2주차 UX trend
3월 2주차 UX trend
 
통신서비스 온라인 채널 UX Research 사례 by Rightbrain
통신서비스 온라인 채널 UX Research 사례 by Rightbrain통신서비스 온라인 채널 UX Research 사례 by Rightbrain
통신서비스 온라인 채널 UX Research 사례 by Rightbrain
 
4월 3주차 ux trend
4월 3주차 ux trend4월 3주차 ux trend
4월 3주차 ux trend
 
4월 2주차 ux trend
4월 2주차 ux trend4월 2주차 ux trend
4월 2주차 ux trend
 
회식팅 프로토타입 송은영
회식팅 프로토타입 송은영회식팅 프로토타입 송은영
회식팅 프로토타입 송은영
 
무장애정류장조 UX Consultant 교육 최종 과제결과
무장애정류장조 UX Consultant 교육 최종 과제결과무장애정류장조 UX Consultant 교육 최종 과제결과
무장애정류장조 UX Consultant 교육 최종 과제결과
 
UX Design_case study_Smart Apart
UX Design_case study_Smart ApartUX Design_case study_Smart Apart
UX Design_case study_Smart Apart
 
회식팅 서비스디자인 임혜진
회식팅 서비스디자인 임혜진회식팅 서비스디자인 임혜진
회식팅 서비스디자인 임혜진
 
Ux design approach
Ux design approachUx design approach
Ux design approach
 
소셜커머스 카카오박스
소셜커머스 카카오박스소셜커머스 카카오박스
소셜커머스 카카오박스
 
Ux 급조 푸드다이어리_prototype_20120714
Ux 급조 푸드다이어리_prototype_20120714Ux 급조 푸드다이어리_prototype_20120714
Ux 급조 푸드다이어리_prototype_20120714
 
회식팅 프로토타입 배은지
회식팅 프로토타입 배은지회식팅 프로토타입 배은지
회식팅 프로토타입 배은지
 
회식팅 서비스디자인 배은지
회식팅 서비스디자인 배은지회식팅 서비스디자인 배은지
회식팅 서비스디자인 배은지
 
Ux research guide ux1
Ux research guide ux1Ux research guide ux1
Ux research guide ux1
 
회식팅 프로토타입 임혜진
회식팅 프로토타입 임혜진회식팅 프로토타입 임혜진
회식팅 프로토타입 임혜진
 
UX trend report (August) by rightbrain
UX trend report (August) by rightbrainUX trend report (August) by rightbrain
UX trend report (August) by rightbrain
 
Megabox mobile movie theater experience prism
Megabox mobile movie theater experience prismMegabox mobile movie theater experience prism
Megabox mobile movie theater experience prism
 
UX trend report 2014 lite version (by UX1)
UX trend report 2014 lite version (by UX1)UX trend report 2014 lite version (by UX1)
UX trend report 2014 lite version (by UX1)
 
원격테스트_UX1
원격테스트_UX1원격테스트_UX1
원격테스트_UX1
 

Similaire à 통신서비스 온라인 채널 UX 디자인 사례 by rightbrain

MezzoMedia Media &Market Report (2019.11)
MezzoMedia Media &Market Report (2019.11)MezzoMedia Media &Market Report (2019.11)
MezzoMedia Media &Market Report (2019.11)MezzoMedia
 
MezzoMedia Media &Market Report (2018.11)
MezzoMedia Media &Market Report (2018.11)MezzoMedia Media &Market Report (2018.11)
MezzoMedia Media &Market Report (2018.11)MezzoMedia
 
위챗 지역 LBS 광고
위챗 지역 LBS 광고위챗 지역 LBS 광고
위챗 지역 LBS 광고weikorea11
 
신세계미디어 종합 마케팅 제안서
신세계미디어 종합 마케팅 제안서신세계미디어 종합 마케팅 제안서
신세계미디어 종합 마케팅 제안서병광 김
 
MezzoMedia - MEDIA SALES GUIDE [디지털 마케팅 시작 광고주]
MezzoMedia - MEDIA SALES GUIDE [디지털 마케팅 시작 광고주]MezzoMedia - MEDIA SALES GUIDE [디지털 마케팅 시작 광고주]
MezzoMedia - MEDIA SALES GUIDE [디지털 마케팅 시작 광고주]MezzoMedia
 
모바일 쿠폰 마케팅 솔루션 세일즈콘
모바일 쿠폰 마케팅 솔루션 세일즈콘모바일 쿠폰 마케팅 솔루션 세일즈콘
모바일 쿠폰 마케팅 솔루션 세일즈콘상경 이
 
오감만족 홍보, 마케팅, 이벤트 게임 어플- 아이쏴
오감만족 홍보, 마케팅, 이벤트 게임 어플- 아이쏴오감만족 홍보, 마케팅, 이벤트 게임 어플- 아이쏴
오감만족 홍보, 마케팅, 이벤트 게임 어플- 아이쏴세종씨엔에이
 
MezzoMedia Media &Market Report (2019.06)
MezzoMedia Media &Market Report (2019.06)MezzoMedia Media &Market Report (2019.06)
MezzoMedia Media &Market Report (2019.06)MezzoMedia
 
MezzoMedia Media &Market Report (2019.10)
MezzoMedia Media &Market Report (2019.10)MezzoMedia Media &Market Report (2019.10)
MezzoMedia Media &Market Report (2019.10)MezzoMedia
 
MezzoMedia Media &Market Report (2019.12)
MezzoMedia Media &Market Report (2019.12)MezzoMedia Media &Market Report (2019.12)
MezzoMedia Media &Market Report (2019.12)MezzoMedia
 
MezzoMedia Media &Market Report (2019.09)
MezzoMedia Media &Market Report (2019.09)MezzoMedia Media &Market Report (2019.09)
MezzoMedia Media &Market Report (2019.09)MezzoMedia
 
[메조미디어] 2022 자사몰 세일즈 가이드
[메조미디어] 2022 자사몰 세일즈 가이드[메조미디어] 2022 자사몰 세일즈 가이드
[메조미디어] 2022 자사몰 세일즈 가이드MezzoMedia
 
MezzoMedia Media &Market Report (2018.10)
MezzoMedia Media &Market Report (2018.10)MezzoMedia Media &Market Report (2018.10)
MezzoMedia Media &Market Report (2018.10)MezzoMedia
 
[메조미디어] Media&Market Report_2023.07
[메조미디어] Media&Market Report_2023.07[메조미디어] Media&Market Report_2023.07
[메조미디어] Media&Market Report_2023.07MezzoMedia
 
MezzoMedia Media &Market Report (2018.07)
MezzoMedia Media &Market Report (2018.07)MezzoMedia Media &Market Report (2018.07)
MezzoMedia Media &Market Report (2018.07)MezzoMedia
 
MezzoMedia Media &Market Report (2020.01)
MezzoMedia Media &Market Report (2020.01)MezzoMedia Media &Market Report (2020.01)
MezzoMedia Media &Market Report (2020.01)MezzoMedia
 
[메조미디어] 미디어&마켓 리포트 / Media&Market Report_2024.02
[메조미디어] 미디어&마켓 리포트 / Media&Market Report_2024.02[메조미디어] 미디어&마켓 리포트 / Media&Market Report_2024.02
[메조미디어] 미디어&마켓 리포트 / Media&Market Report_2024.02MezzoMedia
 
프로젝트 소유 소개서
프로젝트 소유 소개서프로젝트 소유 소개서
프로젝트 소유 소개서Ray Park
 
MezzoMedia Media &Market Report (2019.01)
MezzoMedia Media &Market Report (2019.01)MezzoMedia Media &Market Report (2019.01)
MezzoMedia Media &Market Report (2019.01)MezzoMedia
 
MezzoMedia Media & Market Report (2018년 4월호)
MezzoMedia Media & Market Report (2018년 4월호)MezzoMedia Media & Market Report (2018년 4월호)
MezzoMedia Media & Market Report (2018년 4월호)MezzoMedia
 

Similaire à 통신서비스 온라인 채널 UX 디자인 사례 by rightbrain (20)

MezzoMedia Media &Market Report (2019.11)
MezzoMedia Media &Market Report (2019.11)MezzoMedia Media &Market Report (2019.11)
MezzoMedia Media &Market Report (2019.11)
 
MezzoMedia Media &Market Report (2018.11)
MezzoMedia Media &Market Report (2018.11)MezzoMedia Media &Market Report (2018.11)
MezzoMedia Media &Market Report (2018.11)
 
위챗 지역 LBS 광고
위챗 지역 LBS 광고위챗 지역 LBS 광고
위챗 지역 LBS 광고
 
신세계미디어 종합 마케팅 제안서
신세계미디어 종합 마케팅 제안서신세계미디어 종합 마케팅 제안서
신세계미디어 종합 마케팅 제안서
 
MezzoMedia - MEDIA SALES GUIDE [디지털 마케팅 시작 광고주]
MezzoMedia - MEDIA SALES GUIDE [디지털 마케팅 시작 광고주]MezzoMedia - MEDIA SALES GUIDE [디지털 마케팅 시작 광고주]
MezzoMedia - MEDIA SALES GUIDE [디지털 마케팅 시작 광고주]
 
모바일 쿠폰 마케팅 솔루션 세일즈콘
모바일 쿠폰 마케팅 솔루션 세일즈콘모바일 쿠폰 마케팅 솔루션 세일즈콘
모바일 쿠폰 마케팅 솔루션 세일즈콘
 
오감만족 홍보, 마케팅, 이벤트 게임 어플- 아이쏴
오감만족 홍보, 마케팅, 이벤트 게임 어플- 아이쏴오감만족 홍보, 마케팅, 이벤트 게임 어플- 아이쏴
오감만족 홍보, 마케팅, 이벤트 게임 어플- 아이쏴
 
MezzoMedia Media &Market Report (2019.06)
MezzoMedia Media &Market Report (2019.06)MezzoMedia Media &Market Report (2019.06)
MezzoMedia Media &Market Report (2019.06)
 
MezzoMedia Media &Market Report (2019.10)
MezzoMedia Media &Market Report (2019.10)MezzoMedia Media &Market Report (2019.10)
MezzoMedia Media &Market Report (2019.10)
 
MezzoMedia Media &Market Report (2019.12)
MezzoMedia Media &Market Report (2019.12)MezzoMedia Media &Market Report (2019.12)
MezzoMedia Media &Market Report (2019.12)
 
MezzoMedia Media &Market Report (2019.09)
MezzoMedia Media &Market Report (2019.09)MezzoMedia Media &Market Report (2019.09)
MezzoMedia Media &Market Report (2019.09)
 
[메조미디어] 2022 자사몰 세일즈 가이드
[메조미디어] 2022 자사몰 세일즈 가이드[메조미디어] 2022 자사몰 세일즈 가이드
[메조미디어] 2022 자사몰 세일즈 가이드
 
MezzoMedia Media &Market Report (2018.10)
MezzoMedia Media &Market Report (2018.10)MezzoMedia Media &Market Report (2018.10)
MezzoMedia Media &Market Report (2018.10)
 
[메조미디어] Media&Market Report_2023.07
[메조미디어] Media&Market Report_2023.07[메조미디어] Media&Market Report_2023.07
[메조미디어] Media&Market Report_2023.07
 
MezzoMedia Media &Market Report (2018.07)
MezzoMedia Media &Market Report (2018.07)MezzoMedia Media &Market Report (2018.07)
MezzoMedia Media &Market Report (2018.07)
 
MezzoMedia Media &Market Report (2020.01)
MezzoMedia Media &Market Report (2020.01)MezzoMedia Media &Market Report (2020.01)
MezzoMedia Media &Market Report (2020.01)
 
[메조미디어] 미디어&마켓 리포트 / Media&Market Report_2024.02
[메조미디어] 미디어&마켓 리포트 / Media&Market Report_2024.02[메조미디어] 미디어&마켓 리포트 / Media&Market Report_2024.02
[메조미디어] 미디어&마켓 리포트 / Media&Market Report_2024.02
 
프로젝트 소유 소개서
프로젝트 소유 소개서프로젝트 소유 소개서
프로젝트 소유 소개서
 
MezzoMedia Media &Market Report (2019.01)
MezzoMedia Media &Market Report (2019.01)MezzoMedia Media &Market Report (2019.01)
MezzoMedia Media &Market Report (2019.01)
 
MezzoMedia Media & Market Report (2018년 4월호)
MezzoMedia Media & Market Report (2018년 4월호)MezzoMedia Media & Market Report (2018년 4월호)
MezzoMedia Media & Market Report (2018년 4월호)
 

Plus de Rightbrain UX1 Consulting group (11)

회식팅 서비스디자인 송은영1
회식팅 서비스디자인  송은영1회식팅 서비스디자인  송은영1
회식팅 서비스디자인 송은영1
 
UX Planning 서울 - Smart Door Display
UX Planning 서울 - Smart Door DisplayUX Planning 서울 - Smart Door Display
UX Planning 서울 - Smart Door Display
 
UX Planning 서울 - 굿모닝앱
UX Planning 서울 - 굿모닝앱UX Planning 서울 - 굿모닝앱
UX Planning 서울 - 굿모닝앱
 
10월 3주차 ux trend
10월 3주차 ux trend10월 3주차 ux trend
10월 3주차 ux trend
 
10월 2주차 ux trend
10월 2주차 ux trend10월 2주차 ux trend
10월 2주차 ux trend
 
10월 1주차 ux trend
10월 1주차 ux trend10월 1주차 ux trend
10월 1주차 ux trend
 
Ux 트렌드, beyond 2012
Ux 트렌드, beyond 2012Ux 트렌드, beyond 2012
Ux 트렌드, beyond 2012
 
디지털광고 마케팅을 위한 Ux 디자인 전략 20120921
디지털광고 마케팅을 위한 Ux 디자인 전략 20120921디지털광고 마케팅을 위한 Ux 디자인 전략 20120921
디지털광고 마케팅을 위한 Ux 디자인 전략 20120921
 
젠,졸리 B lauching_planwithsns_120907
젠,졸리 B lauching_planwithsns_120907젠,졸리 B lauching_planwithsns_120907
젠,졸리 B lauching_planwithsns_120907
 
안드레아 트윙클 Sns마케팅
안드레아 트윙클 Sns마케팅안드레아 트윙클 Sns마케팅
안드레아 트윙클 Sns마케팅
 
샤워기 UX_Hands-Free Bathroom_이미옥님
샤워기 UX_Hands-Free Bathroom_이미옥님샤워기 UX_Hands-Free Bathroom_이미옥님
샤워기 UX_Hands-Free Bathroom_이미옥님
 

통신서비스 온라인 채널 UX 디자인 사례 by rightbrain

  • 1. 301, Dosan-daero, Gangnam-gu Seoul,Korea 135-890 T. 02 2052 8900 F. 02 2052 8904 U. rightbrain.co.kr The enclosed material is proprietary to Rightbrain Digital Convergence, Mobile App & Web, SNS Platfrom, eBranding & Identity, eBiz Consulting & Execution 통신서비스 온라인 채널 UX Design 사례 Credentials 2014
  • 2. Design Thinking! 사용자경험에서 얻은 통찰로부터 시작되는 디자인
  • 3. Strategy Concept 이전 리서치 과정을 보시려면... http://www.slideshare.net/yan117/ux-research-by-rightbrain
  • 4. 4 Strategy > Concept 분석 시사점 정리 SNS를 통한 활력 부여 Seamless한 경험을 주는 통합 홈페이지 모바일웹을 통한 접근성 높은 상품 안내 이용 목적에 따른 특색있고 간결한 구조 가입을 다른 메뉴와 차별화 고객 유형에 따른 차별화된 이용 경험 기존 고객을 대상으로 한 맞춤화된 리텐션 서비스 쉽고 직관적인 레이블 5개의 주요 카테고리별 간결화된 메뉴 구조 빠른 상품 탐색 유선통신에 최적화된 일관된 UI Framework 동일한 시각적 언어를 UI에 적용 한 눈에 비교 가능한 상품 목록 필터링 옵션을 통한 탐색 편의성 증대 쉽고 간편한 가입 프로세스 가입시 상품정보 및 이벤트/혜택정보를 같이 제공 온라인 채널을 통한 실시간 상담 제공 서비스 유형별 사용자 가이드 제공 장기 고객 및 불만 예상 고객을 대상으로 한 추가적인 혜택 제공
  • 5. 5 Strategy > Concept 컨셉 도출 SNS를 통한 활력 부여 Seamless한 경험을 주는 통합 홈페이지 모바일웹을 통한 접근성 높은 상품 안내 이용 목적에 따른 특색있고 간결한 구조 가입을 다른 메뉴와 차별화 고객 유형에 따른 차별화된 이용 경험 기존 고객을 대상으로 한 맞춤화된 리텐션 서비스 쉽고 직관적인 레이블 5개의 주요 카테고리별 간결화된 메뉴 구조 빠른 상품 탐색 유선통신에 최적화된 일관된 UI Framework 동일한 시각적 언어를 UI에 적용 한 눈에 비교 가능한 상품 목록 필터링 옵션을 통한 탐색 편의성 증대 쉽고 간편한 가입 프로세스 가입시 상품정보 및 이벤트/혜택정보를 같이 제공 온라인 채널을 통한 실시간 상담 제공 서비스 유형별 사용자 가이드 제공 장기 고객 및 불만 예상 고객을 대상으로 한 추가적인 혜택 제공 쉬운 간결한 친밀한
  • 6. 6 Strategy > Concept 컨셉 레이어 쉬운 간결한 친밀한 •찾고자 했던 정보에 쉽게 접근할 수 있다 •레이블이나 비주얼, 아이콘을 통해서 정보를 쉽게 연상할 수 있다 •예상했던 경로와 실제 경로가 일치한다 •원하는 목적을 쉽게 완료할 수 있다 •이동 경로가 간결하게 구성되었다 •깊이 들어가지 않고도 원하는 정보를 찾았다 •일관된 UI 패턴을 통해 인지적 노력없이 이용한다 •특정 디자인이 의미하는 바가 명확하게 와닿는다 •뜻밖의 서비스가 찾아와서 기분을 즐겁게 해준다 •전체적인 룩앤필이 친근하게 다가온다 •사용자를 배려해주는 상세한 안내가 제공된다 •SNS로 연결되어 다른 사람들의 생생한 목소리를 전달받을 수 있다 컨셉을 다음과 같은 3가지 레이어와 매칭시킴 -친밀한 : 가장 밑바탕에 깔리며, 고객을 배려하는 서비스와 디자인으로 감성을 만족시키고 브랜드에 대한 신뢰감을 북돋움 -간결한 : 정보의 탐색이나 UI, 서비스 이용시에 사용자들의 이용 편의성과 탐색 효율성을 돕는다 -쉬운 : 가장 전면에 나서서 사용자들에게 시인성(visuability), 예측(mapping), 직관성, 일관성을 제공하는 영역에 해당한다
  • 7. 7 Strategy > Concept 컨셉의 디자인 적용 컨셉을 어떤 방법으로 사용자에게 전달할 것인가? -3가지 컨셉으로부터 도출한 가치들을 10가지 디자인 영역별로 어디에 해당하는 지 여부를 표시함 (9가지 분석항목 + 비주얼 디자인) 컨셉 사용자에게 제공하는 가치 온라인 전략 전체적 UX IA UI 회원 상품 가입 CS 차별화 디자인 쉬운 찾고자 했던 정보에 쉽게 접근할 수 있다 √ √ √ √ √ √ √ √ 디자인 요소들을 통해서 정보를 쉽게 연상할 수 있다 √ √ √ √ √ 예상했던 경로와 실제 경로가 일치한다 √ √ √ √ √ √ √ √ 원하는 목적을 쉽게 완료할 수 있다 √ √ √ √ √ √ 간결한 이동 경로가 간결하게 구성되었다 √ √ √ √ √ √ √ √ 깊이 들어가지 않고도 원하는 정보를 찾았다 √ √ √ √ √ √ √ √ 일관된 UI 패턴을 통해 인지적 노력없이 이용한다 √ √ √ √ √ 특정 디자인이 의미하는 바가 명확하게 와닿는다 √ √ √ √ √ 친밀한 뜻밖의 서비스가 찾아와서 기분을 즐겁게 해준다 √ √ √ √ 전체적인 룩앤필이 친근하게 다가온다 √ √ √ √ 사용자를 배려해주는 상세한 안내가 제공된다 √ √ √ √ √ √ SNS로 연결되어 다른 사람들의 생생한 목소리를 전달받을 수 있다 √ √ √ √ √ √ √ √
  • 9. 9 Strategy > Online Channel Strategy 3개 사이트의 완전한 통합 – “고기가 오는 곳에서 고기를 잡아야 한다” 웹사이트 통합 -사용자들은 판매채널을 다른 대리점들과 구별하지 못하고 있다. 사용자 입장에서 판매채널은 또 하나의 대리점일 뿐이다 -반면에 온라인에서 상품 가입을 시도하는 대다수 사용자들이 A사 홈페이지을 어떤 이유에서든지 한번은 방문한다. 판매채널의 특화된 마케팅을 홈페이지내로 흡수하여 홈페이지를 통한 전환율을 높여야 한다 판매채널 홈페이지 홈페이지
  • 10. 10 Strategy > Online Channel Strategy Coherence 전략 멀티 채널 연계 -각 채널이 동일한 목적의 메뉴 구성과 톤앤매너를 지닌 컨텐츠를 제공하되 채널의 특성과 사용 시나리오에 맞게 컨텐츠의 표현이나 UI, IA 등에 변화를 가져가는 전략 통합 사이트 A사의 온라인 채널 중심 신규/기존 고객에 대한 정보/서비스 제공 상품, 가입, CS, 컨텐츠, 개인화서비스 모바일웹 A사의 모바일 채널 신규고객을 위한 접근성 높은 상품 정보 기존고객을 위한 조회/편의/리텐션 서비스 SNS 및 외부 채널 이벤트 등의 고객 커뮤니케이션 수행 상품이나 컨텐츠를 홈페이지와 차별화해서 제공 고객 상담 기능 폰 문자/전화 A사의 대면접촉 채널 온라인 채널과 긴밀한 상호 연계 장기/고객 대상 리텐션서비스를 제공하는 터치포인트 역할 이벤트 응모, 결과 확인 통합 사이트를 모바일에 맞게 재구성 상품 정보 조회, 가입 신청으로 연결 고객 참여 유도, SNS에서 생산된 컨텐츠를 통합 사이트에 소개 Patterns for Multiscreen Strategies by PRECIOUS DESIGN STUDIO
  • 11. 11 Strategy > Online Channel Strategy 동일한 메뉴도 신규 고객과 기존 고객에 따라 이원화해서 제공 고객 유형별 서비스 차별화 기존 고객 신규 고객 전체 상품에 대한 빠른 탐색 얕고 한 눈에 비교 가능한 상품 목록 및 간편한 상품 검색 기능 나에게 맞는 상품 찾기 가입한 상품 및 관련 정보 현재 가입되어 있는 상품 정보로 쉽게 접근 가능 가입된 상품과 관련된 정보 제공 빠른 가입하기 > 가입시 혜택 사이트 어디에서나 빠르게 가입으로 이어질 수 있음 가입시 얻을 수 있는 혜택이나 관련 이벤트를 상세하게 제시 기 가입된 상품에 근거한 추천 상품 홈페이지, 모바일웹 방문시 상품/서비스를 지속적으로 추천 고객 유형에 따라 상품 및 부가 서비스를 추천, 혜택 제시 설치 및 가입후 이용 가이드/팁 설치 절차 안내 가입후 인터넷, TV 이용 가이드 및 팁 IPTV 가입시 이용 가능한 컨텐츠 열람 IPTV를 통해서 볼 수 있는 전체적인 컨텐츠 VOD 및 월정액 서비스 안내 상담, FAQ 중심 실시간으로 상담원과 연결할 수 있는 채팅, 문자 상담 상품 유형, 증상 유형별로 체계적으로 정리된 FAQ 현재 가입 상품에 맞는 컨텐츠 제시 현재 가입된 상품 및 이용 현황을 파악하여 적절한 컨텐츠 추천 컨텐츠와 관련된 참여 가능한 이벤트 제시 빠르게 접근 가능한 요금/이용내역 로그인시 요금과 같은 자주 이용하는 메뉴에 빠르게 접근 가능 상품 가입 CS 컨텐츠 개인화
  • 12. 12 Strategy > To-Be User Scenario 통합 채널 및 외부의 SNS 채널들을 통해서 상품에 대한 다양한 정보를 얻을 수 있음 신규고객의 상품 탐색 사용자 시나리오 To-Be 이용 시나리오 관련된 분석 시사점 이용단계 상품 인지 약정 기간 내 요금 혜택(2년 24만원 절약)과 TV Content의 차별성을 강조하는 문자/전화 마케팅 검색 네이버에서 검색 모바일웹으로 이동. 할인 혜택 중심의 상품 정보를 일목요연하게 조회할 수 있음 방송, 유선방송이란 검색어를 넣어도 SK IPTV 검색가능 검색 결과 확인 A사 홈페이지로 바로 이동 A사의 블로그, SNS도 사이트 검색 결과에 노출 브랜드 검색 영역에 A사의 4가지 주요 메뉴(상품, Content, 고객센터, 가입신청)와 3년 최대 135만원 할인에 관한 인포그래픽이 표시 상품정보 조회 A사 홈페이지에서 한눈에 모든 상품을 일목요연하게 조회할 수 있음 블로그로 이동하여 다른 사용자들이 올린 후기 조회 A사 홈페이지>가입>상품 이용 혜택 인포그래픽 페이지에서 자세하게 안내 •사용자의 관심을 끌 수 있는 마케팅 (약정 기간 내 전체 요금 할인 혜택, 상품의 특징을 강조, 가입혜택 강조 등) •외부 채널인 공식 Blog, SNS, 유투브와 A사 홈페이지와의 연계 필요 •쉽게 알아볼 수 있도록 개별 상품안내보다는 한눈에 비교 가능한 형태로 상품정보를 제공 •상품을 쉽게 찾을 수 있도록 상품 정보구조의 Depth를 줄이고, 쉽게 인지할 수 있는 메뉴명 사용 •가입 채널의 신뢰를 중시 여기는 사용자들은 A사 홈페이지로 바로 이동 •판매채널이나 IPTV를 A사 홈페이지에 통합하여 시너지 효과 창출 •외부 채널의 적극적인 활용 및 홈페이지와의 강한 연계 (SNS, 유튜브) •채널 통합으로 운영 효율, 가입전환율 상승 •가입 채널의 신뢰를 중시여기는 브랜드 검색 영역 •정보/서비스의 플랫폼인 홈페이지와 마케팅/홍보/프로모션을 위한 외부의 채널로 이원화된 온라인 전략 -사용자들은 인터넷은 물론 IPTV(IPTV), 결합상품을 가입하려고 할 때에도 검색어 때문에 많은 노력을 들일 필요가 없다. -네이버나 구글 검색결과에 A사의 홈페이지 뿐만 아니라 SNS, 블로그, 유튜브로도 쉽게 접근할 수 있다. -검색 시 검색결과 최상위에 나오는 브랜드 광고영역에는 알아보기 어렵고 눈길도 가지 않는 동영상, 이벤트 배너, 텍스트 설명 대신에 통합 홈페이지의 4가지 주요 메뉴와 최대 혜택에 대한 인포그라픽을 볼 수 있다. 구글에서 검색 유튜브 동영상 검색 결과 A사 공식 Blog 나 SNS를 통한 신규 및 주요 상품 인지
  • 13. 13 Strategy > To-Be User Scenario Storyboard 신규고객의 상품 탐색 사용자 시나리오 #1. 기존 상품의 약정 만기가 다가와서 신규 유선상품을 찾고자 함 #2. 네이버에서 ‘A사’를 검색하여 메인 홈페이지로 이동함 #3. 홈페이지에서 내 상황에 맞게 쉽고 빠르게 상품 정보를 조회함 #4. 상품 정보 조회 결과를 바탕으로 원하는 상품을 찾음
  • 14. 14 Strategy > To-Be User Scenario 쉽게 상품 정보로 이동하여 한 화면에서 상품들을 비교하고 가입까지 끊김없이 이어질 수 있음 신규고객의 상품 비교 & 가입 사용자 시나리오 To-Be 이용 시나리오 관련된 분석 시사점 이용단계 상품 비교 원하는 상품 군의 가격, 혜택, 상품 특징을 한눈에 비교할 수 있음 상품 선택 원하는 상품의 상세 정보,혜택의 자세한 내용과 할인의 항목을 상세하게 확인 가입 선택한 상품을 쉽고 빠르게 가입하기 위한 ‘가입 상담 예약’을 위한 Form 입력 전화를 통한 가입 가입 이전에 상품 혜택과 프로모션을 한번 더 확인함으로써, 가입 의지 상승 •전체 기간내의 할인 금액을 구체적인 숫자로 표시 •상품의 속성, 금액, 혜택, 채널, Content 별 비교 기능 필요 •상품 리스트 페이지를 통해 상품의 종류, 혜택, 특징, 요금을 한 눈에 비교 •중요 정보는 Visual 로 표현하여 정보의 Hierarchy 제공 •상품 선택 결정에 긍정적인 영향을 줄 수 있는 이벤트, 혜택 정보를 함께 노출 •원하는 상품을 좀 더 쉽게 찾을 수 있는 ‘맞춤 상품’기능 업그레이드 •선택이 행동으로 이어질 수 있도록 가입 관련 내역을 전체적인 UX에 노출 (GNB 포함) •A사 홈페이지와 모바일웹에서 가입까지 가능하다는 메시지를 지속 노출 •가입상담예약 Form 에 선택한 상품과 관련된 이벤트, 사은품, 혜택을 다시 한번 노출 •사용자가 상품을 선택했다면 해당 상품 정보가 자연스럽게 가입 상담 사에게 전달 -상세한 상품 비교를 위해 상품을 하나하나 확인할 필요 없이 한 눈에 상품을 비교할 수 있다 -사용자의 이슈(이사, 통신사 이동), 혜택, 전체 금액, 원하는 Content나 채널 별 비교가 가능해서 원하는 상품을 쉽게 비교할 수 있다. -상품 선택과 가입 절차에서 이벤트와 혜택 정보를 지속적으로 노출하여, 사용자의 의사결정에 긍정적인 영향을 줄 수 있다. -A사 홈페이지와 모바일에서 요금 조회  부가서비스의 조회  구매 & 가입이 자연스럽게 연결되어 편리하게 이용할 수 있다. 페이지 이동 없이 가장 중요한 정보의 상세 내용까지 비교할 수 있음 원하는 상품을 찾지 못했을 경우의 보조 수단으로 이동 상품을 선택하지 못했을 경우, 좀 더 쉽게 맞춤 상품을 통해 원하는 상품 확인 가입 완료 후 A사 홈페이지에서 요금 확인 및 관련 부가서비스 확인 멤버십과 관련된 포인트 및 혜택 프로그램 확인 IPTV의 경우, 자세한 이용방법을 확인하고, 자주 보는 채널의 즐겨 찾기 •IPTV의 이용방법을 자세히 알 수 있도록 매뉴얼 제공 •A사 홈페이지와 모바일웹에서 멤버십 프로그램 안내 & 부가 서비스를 확인하고 가입 또는 구매가 가능하도록 함 •지속적 방문을 유도할 수 있는 요금과 관련된 흥미 있는 정보 제공 상품 결과에서 ‘가입 상담’ 버튼 선택을 하거나 가입 상담 전화를 함 부가 서비스 가입 및 구매
  • 15. 15 Strategy > To-Be User Scenario Storyboard 신규고객의 상품 비교 & 가입 사용자 시나리오 #1. 여러 상품들 가운데서 원하는 상품을 찾아 상품 카테고리에서 원하는 상품만 선택 #2. 상품 목록에서 각 상품들의 상세 내용을 바로 보며 서로 비교해 봄 #3. 맞춤 상품 찾기로 이동하여 자신에게 맞는 상품을 찾아 봄 #4. 가입으로 이동하여 선택한 상품에 대한 가입 신청
  • 16. 16 인터넷 관련 통신망 작업이 예정 되었을 경우 미리 안내를 받아 불편을 예측할 수 있음 TV 화질이 타사에 비해 나쁘다는 인식이 없어 짐 Strategy > To-Be User Scenario 본인이 가입한 상품을 바로 알 수 있고, 가입 상품에 기초하여 부가 서비스/타상품 조회가 편리함 기존고객의 가입 상품 이용 사용자 시나리오 To-Be 이용 시나리오 관련된 분석 시사점 이용단계 가입 상품 정보 조회 가입한 상품명을 기억하지 못해도 다양한 상품 필터링을 통해 여러 Depth를 거치지 않더라도 쉽게 가입 상품을 찾을 수 있음 가입 상품 품질 확인 부가 서비스 신청 / 해지 A사 홈페이지와 모바일웹을 통해 부가서비스 확인 후 찜을 하거나 가입 & 구매 타 상품 조회 •사용자의 이슈, 혜택 등의 다양한 상품 필터링 조건 제공 •가입한 상품의 부가서비스 알림 제공 •깊은 Depth에 들어가지 않더라도 상품을 찾을 수 있도록 IA 조정 필요 •로그인 후, 한눈에 볼 수 있는 MY 정보 제공 •인터넷 관련 통신만 작업이 있을 경우, 사용자가 미리 인지 가능하도록 A사 홈페이지, 모바일 웹, SMS 등을 통해 알림 제공 •TV 화질 비교를 지속적으로 제공하여 사용자의 인식 전환 •A사 홈페이지와 모바일웹에서 부가서비스를 선택할 수 있도록 자세한 안내 제공 (나와 비슷한 사람들이 어떤 부가서비스를 사용하는 지 등) •A사 홈페이지와 모바일웹에서 부가서비스 찜하기, 가입 & 구매와 해지 기능이 제공되어야 함 •기존 고객이 상품 정보를 조회하는 동기 (이사, 통신사 변경, 결혼 등등) 를 파악하여, 동기에 맞는 상품을 제공 •현재 사용하고 있는 상품과 비교했을 때의 혜택을 쉽게 알 수 있도록 전체 금액 비교 등의 정보 제공 -가입한 상품명을 기억하지 못하더라도 다양한 필터링 조건에 의해 깊은 Depth 탐색 없이 가입한 상품을 쉽게 찾을 수 있다. -부가 서비스 정보를 알림을 통해 지속적으로 제공해 주어, 사용자가 일일이 찾아보지 않더라도 자연스럽게 알 수 있다. -부가서비스의 가입 및 해지를 A사 홈페이지와 모바일웹에서 제공하여, 쉽고 빠르게 가입 및 해지를 할 수 있다. -타 상품을 조회하는 동기를 미리 파악하여 제공함으로써 사용자는 복잡한 상품 검색 없이도, 원하는 상품을 제공받을 수 있다. 로그인을 통해 자신의 상품 정보 조회 및 요금제, 이용 내역을 찾아볼 수 있음 부가 서비스를 찾아보지 않더라도 알림을 통해 자연스럽게 알 수 있음 찜한 부가서비스를 IPTV에서 가입 & 구매 A사 홈페이지와 모바일웹에서 부가서비스 확인 후 바로 해지 가능 원하는 상품을 손쉽게 조회 현재 사용하고 있는 상품과 혜택 비교
  • 17. 17 Strategy > To-Be User Scenario Storyboard 기존고객의 가입 상품 이용 사용자 시나리오 #1. 본인이 가입한 상품에 대한 상세한 정보를 찾아보고자 함 #2. 모바일웹에 들어와서 로그인 #3. 상품 정보 조회 후 이용 가능한 Content 중에서 하나를 신청 #4. 추천받은 상품에 대한 상세정보를 조회 로그인 ID PW OK
  • 18. 18 Strategy > To-Be User Scenario 다양한 리텐션 서비스에 접근할 수 있고 A/S나 고객센터 이용이 보다 편리해짐 기존고객의 My, 고객센터 이용 사용자 시나리오 To-Be 이용 시나리오 관련된 분석 시사점 이용단계 로그인 및 멤버십 조회 로그인 후, 원하는 정보를 바로 확인할 수 있음 요금 및 청구서 확인 A사 홈페이지와 모바일웹에 지속적으로 로그인해서 요금, 이용내역, 멤버십 혜택, 다양한 부가서비스 내역을 확인 A/S 신청 전화를 통해 A/S 담당자 바로 연결 고객센터 이용 A사 홈페이지에서 계약 내용을 확인해 가면서 상담함 한 명의 상담원과 통화를 해서 원하는 문제를 해결할 수 있음 문자를 통한 상담 가능 •로그인 후, 사용자들이 많이 사용하는 메뉴를 파악하여 Quick 메뉴 형태로 제공 •로그인 후, 주요 페이지에서 제공되는 정보를 사용자에게 맞춰서 변경 •멤버십 프로그램에 대한 자세한 안내 및 활용 가이드, 활용 가능한 혜택 리스트 제공 •흥미 있는 정보 제공을 통해 지속적 로그인 유도 (나와 비슷한 사람들이 많이 사용하는 부가서비스 등의 흥미 정보를 인포그래픽을 통해 제공) •현재까지 할인 받은 내역을 알 수 있도록 정보 제공 •모바일웹에서도 요금, 이용내역의 상세 정보 제공 •담당자와 바로 전화연결을 할 수 있는 A/S 관련 상세 전화번호 안내 •A/S 신청자와 A/S 를 받은 사용자가 다를 경우, A/S 완료 후 모두에게 피드백 제공 •SMS, A사 홈페이지, 모바일웹을 통해 A/S 현황 안내 •담당자와 바로 전화연결을 할 수 있는 상세 전화번호 안내 •A사 홈페이지에서 계약 내용에 관한 상세 내용 확인할 수 있도록 정보 제공 •문자를 통한 상담 기능 제공 -멤버십 혜택정보나 요금제 관련 흥미 있는 정보 제공을 통해 사용자는 A사 홈페이지와 모바일웹에 지속적으로 로그인 한다. -멤버십 이용 팁과 활용가능 혜택 리스트를 제공하여 사용자는 멤버십 혜택을 A사 홈페이지와 모바일웹에서 바로 사용할 수 있다. -A/S 신청부터 결과까지 단계별 피드백을 A사 홈페이지, 모바일웹, 문자를 통해 제공하여 사용자는 편리한 A/S 를 받을 수 있다. -담당자 바로 연결, 문자 상담 등을 통해 사용자는 좀 더 친절한 고객센터를 경험할 수 있다. 로그인을 통해 멤버십 프로그램을 한눈에 확인할 수 있고, 사용자의 멤버십 혜택을 쉽게 활용할 수 있음 SMS로 오는 문자 청구서를 통해 원하는 내역을 모두 확인할 수 있음 처음 전화에서 기사 방문 약속시간까지 확정 받음 A사 홈페이지, SMS를 통해 기사의 신상정보와 방문정보를 받음 A/S 완료 후, SMS와 A사 홈페이지, 모바일웹을 통해 A/S 결과를 피드백 받음 전화 상담 시, 바로 원하는 담당자와 통화
  • 19. 19 Strategy > To-Be User Scenario Storyboard 기존고객의 My, 고객센터 이용 사용자 시나리오 #1. 고객센터를 통해서 서비스 이용중 생긴 불만을 상담하려고 함 #2. 홈페이지 고객센터로 이동하여 실시간 상담 선택 #3. 상담원과 메신저 채팅을 통해서 불만을 상담함 #4. 몇일후, 상담 처리 결과를 조회하고 서비스로 B포인트를 받음
  • 21. Design IA 본 챕터는 공개용 버전에서 생략
  • 23. 23 Design > Membership 로그인 전/후 사용자 목적을 달성하기 위한 주요 페이지의 일부 내용 및 모바일 웹의 메뉴 구조 변경 로그인 전/후에 따른 서비스 차별화 -사용자들의 로그인 목적은 요금 및 청구서 확인, 부가 서비스 확인 및 신청/해지가 가장 크다. -이러한 사용자의 목적을 빠르게 달성할 수 있도록 로그인 전, 후의 주요 페이지의 내용 변경을 통해 원하는 Content를 바로 노출한다. -모바일웹의 특성 상, 메뉴 구조가 더 단순해야 하기 때문에 로그인 전, 후의 메뉴 구조 변경을 통해 단순함을 유지하면서 필요한 메뉴에 바로 접근할 수 있도록 한다. 로그인 전 사용자 로그인 사용자 A 로그인 사용자 B
  • 24. 24 Design > Membership 회원가입 및 로그인 A사 홈페이지의 회원가입 및 로그인 사용자 시나리오 To-Be 이용 시나리오 관련된 분석 시사점 이용단계 ID 등록 서비스 가입 시 지정한 ID를 A사 홈페이지 에서 등록 ID 등록 성공 및 실패 ID 등록 성공 시, 로그인 창으로 이동 로그인 A사 홈페이지 로그인 선택 등록한 아이디, 패스워드를 통해 로그인 아이디/비밀번호 찾기 시도 요금 및 청구서 확인 A사 홈페이지 로그인 시 Main화면에서 다양한 요금 관련 정보를 바로 확인 멤버십 프로그램에 대한 안내 및 활용 가이드 확인 •ID 등록 화면에서 ID 등록에 필요한 조건을 명확하게 노출 •ID 등록과 관련된 모든 Process를 진행하지 않더라도 ID 등록 조건이 안 된다면 중간에 Process 종료 •ID 등록 실패 시, 실패에 대한 원인을 상세하게 노출한 안내 페이지 제공 •로그인 화면에서 로그인을 유도할 수 있는 로그인 시의 혜택 노출 •로그인 후, 사용자들이 많이 이용하는 정보를 파악하여 Quick 메뉴 + 상세 정보를 바로 제공 •로그인 후, 주요 페이지의 정보를 사용자에게 맞춰서 변경 •멤버십 프로그램에 대한 자세한 안내 및 활용 가이드, 활용 가능한 혜택 리스트 제공 -ID 등록을 위한 조건과 상세한 안내를 사전에 알려주어 사용자들이 ID 등록에 있어 오류를 범하지 않는다. -ID 등록 조건이 안될 경우 Process를 중간에 종료하여 이러한 사용자들의 수고를 최소한으로 한다. -로그인 후, 사용자들이 많이 사용하는 메뉴와 정보를 바로 제공하여 사용자는 로그인의 목적을 쉽게 달성할 수 있다. -멤버십 프로그램에 대한 자세한 안내 및 활용 가이드를 통해 로그인  멤버십에 대한 자연스러운 동선을 경험한다. 휴대폰 인증과 i-pin 인증을 통해 아이디, 패스워드 찾기 ID 등록 실패 시, 실패에 대한 자세한 안내를 받음 휴대폰인증을 통해 본인인증 : 약관 동의, 고객명, 생년월일, 성별, 내외국인 등의 본인정보 입력 i-PIN 입력 Process를 통한 본인인증
  • 25. 25 Design > Membership 회원가입 및 로그인 A사 홈페이지의 회원가입 및 로그인 상세 구현 방안 아이디 등록 Process 개선으로 사용자의 불필요한 노력을 없앰 순서 변경 [As-Is ID 등록 Process] [To-Be ID 등록 Process]
  • 26. 26 Design > Membership 회원가입 및 로그인 A사 홈페이지의 회원가입 및 로그인 상세 구현 방안 로그인 후 주요 페이지 정보 변경을 통해 빠른 목적 달성 •로그인 후, 사용자들이 많이 이용하는 메뉴는 Quick 메뉴 형태 제공 •Main 화면에 주요 정보를 바로 노출하여 쉽고 빠른 목적 달성 [로그인 후 Main 화면] •로그인 후, 사용자의 목적을 빠르게 달성할 수 있도록 주요 페이지 정보를 사용자에게 맞추어 변경 [로그인 후 상품 서브 메인 화면]
  • 27. 27 Design > Membership 회원가입 및 로그인 (모바일웹) A사 홈페이지 모바일웹의 회원가입 및 로그인 사용자 시나리오 To-Be 이용 시나리오 관련된 분석 시사점 이용단계 ID 등록 서비스 가입 시 지정한 ID를 A사 홈페이지 모바일웹에서 등록 ID 등록 성공 및 실패 ID 등록 성공 시, 로그인 창으로 이동 로그인 A사 홈페이지 모바일웹에서 로그인 선택 등록한 아이디, 패스워드를 통해 로그인 아이디/비밀번호 찾기 시도 요금 및 청구서 확인 A사raodband.com 모바일웹 Main 화면에서 다양한 요금 관련 정보를 바로 확인 •ID 등록 화면에서 ID 등록에 필요한 조건을 명확하게 노출 •ID 등록과 관련된 모든 Process를 진행하지 않더라도 ID 등록 조건이 안 된다면 중간에 Process 종료 •ID 등록 실패 시, 실패에 대한 원인을 상세하게 노출한 안내 페이지 제공 •로그인 화면에서 로그인을 유도할 수 있는 로그인 시의 혜택 노출 •로그인 후, 사용자들이 많이 이용하는 정보를 파악하여 Quick 메뉴 + 상세 정보를 바로 제공 •모바일웹의 특성을 고려한 메뉴 구조로 재편 •멤버십 프로그램에 대한 자세한 안내 및 활용 가이드, 활용 가능한 혜택 리스트 제공 휴대폰 인증과 i-pin 인증을 통해 아이디, 패스워드 찾기 ID 등록 실패 시, 실패에 대한 자세한 안내를 받음 휴대폰인증을 통해 본인인증 : 약관 동의, 고객명, 생년월일, 성별, 내외국인 등의 본인정보 입력 i-PIN 입력 Process를 통한 본인인증 -ID 등록을 위한 조건과 상세한 안내를 사전에 알려주어 사용자들이 ID 등록에 있어 오류를 범하지 않는다. -ID 등록 조건이 안될 경우 Process를 중간에 종료하여 이러한 사용자들의 수고를 최소한으로 한다. -로그인 후, 사용자들이 많이 사용하는 메뉴와 정보를 바로 제공하여 사용자는 로그인의 목적을 쉽게 달성할 수 있다. -멤버십 프로그램에 대한 자세한 안내 및 활용 가이드를 통해 로그인  멤버십에 대한 자연스러운 동선을 경험한다. 모바일의 특성이 반영 된, 로그인의 목적을 달성할 수 있는 메뉴만으로 재편된 메뉴 구조 확인 멤버십 프로그램에 대한 안내 및 활용 가이드 확인
  • 28. 28 Design > Membership 회원가입 및 로그인 (모바일웹) A사 홈페이지 모바일웹의 회원가입 및 로그인 상세 구현 방안 로그인 후 주요 페이지 정보 변경을 통해 빠른 목적 달성 [로그인 전/후 Main 화면] [로그인 전/후 변경되는 사이트맵] •로그인 후, 사용자들이 많이 사용하는 메뉴는 Quick 메뉴 형태 제공 •Main 화면에 주요 정보를 바로 노출하여 쉽고 빠른 목적 달성 •로그인 전/후의 메뉴 변경을 통해 모바일의 특성을 고려한 Direct Access 제공
  • 29. 29 Design > Membership 부가서비스 신청 부가서비스 확인 및 신청 사용자 시나리오 To-Be 이용 시나리오 관련된 분석 시사점 이용단계 확인동기 발생 서비스 가입 후, 자신이 가입한 상품의 부가 서비스를 확인 로그인 A사 홈페이지 에서 로그인 A사 홈페이지 모바일웹에서 로그인 부가서비스 확인/선택 •본인이 사용하는 상품에 대한 부가서비스 알림 제공 •A사 홈페이지와 모바일웹에서 부가 서비스 이용 내역 확인 및 가입한 상품에 따라 이용할 수 있는 수 있는 부가 서비스 추천 •A사 홈페이지과 모바일웹에서 해지 기능 제공 -부가 서비스 알림을 통해 본인이 사용하는 상품에 대한 부가서비스를 일일이 찾을 필요 없이 늘 접할 수 있다. -로그인 후, 가입한 상품에 따른 부가 서비스 이용 내역 및 추천 부가 서비스를 제공 받아 원하는 부가 서비스를 손쉽게 선택할 수 있다. -A사 홈페이지와 모바일에서 상품 조회  부가 서비스 조회  구매 & 가입이 자연스럽게 연결되어 편리하게 이용할 수 있다. IPTV 사용자의 경우, 편성표와 이용가능 VOD 확인 부가서비스 신청/해지 A사 홈페이지과 모바일웹을 통해 부가서비스의 구매& 가입 A사 홈페이지과 모바일웹을 통해 가입&구매한 부가서비스 확인 후 해지 사용자 본인이 사용하는 상품의 부가서비스 알림 확인 A사 홈페이지과 모바일웹을 통해 자신이 가입한 상품의 부가서비스 이용 내역 및 이용 가능 부가서비스 확인 찜한 부가서비스를 IPTV에서 가입 & 구매 A사 홈페이지과 모바일웹을 통해 가입 가능한 부가서비스 확인 후, 찜하기
  • 30. 30 Design > Membership 부가서비스 신청 부가서비스 확인 및 신청 상세구현 방안 로그인 후 주요 페이지 정보 변경을 통해 빠른 목적 달성 [로그인 전 Content 화면] [로그인 후 Content 화면] •로그인 후, 현재 시간에 맞는 편성표 제공 •로그인 후, 사용하는 서비스에서 이용할 수 있는 부가 서비스 추천 •바로 가입 및 구매 가능한 링크 제공
  • 32. 32 Design > User Interface 해당 페이지를 가장 잘 전달할 수 있는 목적 영역과 목적을 이루기 위한 서포트 영역을 분리하여, 사용자의 페이지 접속 목적을 쉽고 빠르게 달성할 수 있도록 사용자 편의성 증대 UI Framework 해당 페이지를 가장 잘 전달할 수 있는 목적 영역 목적을 이루기 위한 서포트 영역 ① Header : SK Broadband Logo Area ② Utility Menu : 주요 필수 노출 메뉴로 로그인(로그아웃), ID 등록, 이벤트 메뉴와 검색으로 구성 ‘가입’의 경우 중요도 상 2Depth까지 항시 노출 ③ 1st Level Navigation : 1Depth 메뉴를 주요 Key 서비스 3개와 my 메뉴, 가입 메뉴로 구성하여 사용자 목적을 이룰 수 있는 Start Point 로서의 효율성 극대화 ④ 목적 영역 : 해당 페이지의 내용을 가장 잘 전달할 수 있는 전체 페이지의 목적 영역, 컨텐츠를 효율적으로 노출할 수 있도록 자유롭게 구성 ⑤ 서포트 영역 : 해당 페이지의 목적을 이루기 위해 추가적으로 의사 결정을 도와주고, Action을 취할 수 있도록 하는 서포트 영역, 목적과 관련된 각종 이벤트, 안내, Action 버튼 등의 노출 ④ + ⑤ 공통 : 신규 고객, 기존 고객의 로그인 전 / 후에 따라 달라지는 이용 목적을 각 Case별로 반영하여 제공 ① Header ② Utility Menu ③ 1st Level Menu Navigation ④ 목적 영역 ⑤ 서포트 영역 ④ 목적 영역 ⑤ 서포트 영역
  • 33. 33 Design > User Interface Main Page 전체 공통 Header GNB Navi. Key 컨텐츠 영역 상품 탐색 영역 부가 서비스영역 C/S 영역 Footer 해당 페이지의 주요 Key 컨텐츠 신규 고객, 기존 고객 (로그인 전/후) 에 따라 변경 Key 컨텐츠 서포트 영역 주요 Key 컨텐츠에 따라 변경되는 프로모션 영역 상품 탐색 영역 친근한 사용자 언어를 통한 상품 탐색 상품 탐색 보조 영역 원하는 상품을 찾지 못했을 경우 보조수단 부가 서비스 영역 목적을 쉽게 달성할 수 있도록 페이지 이동 없이 미리 보기 제공 Key 컨텐츠 영역 : 기존고객 Key 컨텐츠 영역 기존고객 로그인 후 : 홈페이지 이용 목적을 빠르게 달성할 수 있도록 실제 Content가 바로 노출
  • 34. 34 Design > User Interface Main Page (Mobile) Header Key 컨텐츠 영역 부가 컨텐츠 영역 사이트 맵 & Footer 전체 공통 Header 해당 페이지의 Title + 전체 Navigation 이동 버튼 Key 컨텐츠 영역 신규 고객, 기존 고객 (로그인 전/후)에 따라 변경 부가 서비스 영역 목적을 쉽게 달성할 수 있도록 페이지 이동 없이 미리 보기 제공 사이트 맵 & Footer 영역 모바일의 특성 상, 페이지 이동이 쉽지 않음을 고려하여 Main 페이지에서 전체 사이트 맵을 노출하여 이동 동선을 단축을 도와 줌 Key 컨텐츠 영역 : 기존고객 사이트 맵 영역 : 기존고객
  • 35. 35 Design > User Interface Content Page GNB Navi. Key 컨텐츠 영역 상품 탐색 영역 주요 컨텐츠 영역 전체 공통 Header 1Depth + 2Depth 노출 해당 페이지의 주요 Key 컨텐츠 신규 고객, 기존 고객 (로그인 전/ 후)에 따라 변경 채널 및 상품 탐색 영역 원하는 채널 입력을 통한 부가 서비스 및 상품 탐색 주요 컨텐츠 노출 영역 다양한 컨텐츠가 활발하게 업데이트 된다는 느낌을 제공할 수 있는 그루핑 된 컨텐츠 노출 Key 컨텐츠 영역 : 기존고객 Key 컨텐츠 영역 기존고객 로그인 후 : 홈페이지 이용 목적을 빠르게 달성할 수 있도록 실제 Content가 바로 노출 Content Page의 경우, 편성표를 현재 시간 기준으로 노출
  • 36. 36 Design > User Interface Content Page (Mobile) Header 프로모션 영역 Key 컨텐츠 영역 부가 컨텐츠 영역 Key 컨텐츠 영역 : 기존고객 전체 공통 Header 해당 페이지의 Title + 전체 Navigation 이동 버튼 Key 컨텐츠 영역 모바일의 특성 상, 메뉴 이동이 쉽도록 구성 좌우 플리킹만으로 관련 컨텐츠 확인할 수 있는 쉬운 인터렉션으로 구성 Key 컨텐츠 영역 기존고객 로그인 후 : 홈페이지 이용 목적을 빠르게 달성할 수 있도록 채널 정보가 가장 처음으로 노출 상품 탐색 영역
  • 37. 37 Design > User Interface 상품 Page GNB Navi. Key 컨텐츠 영역 상품 탐색 영역 전체 공통 Header 1Depth + 2Depth 노출 해당 페이지의 주요 Key 컨텐츠 신규 고객, 기존 고객 (로그인 전/ 후)에 따라 변경 상품 탐색 영역 친근한 사용자 언어를 통한 상품 탐색 신규 고객, 기존 고객 (로그인 전/ 후)에 따라 변경 상품 탐색 영역 : 기존고객 상품 탐색 영역 기존고객 로그인 후 : 사용자의 상품 탐색 동기에 맞는 검색 조건 세팅 Key 컨텐츠 영역 : 기존고객 Key 컨텐츠 영역 기존고객 로그인 후 : 사용자의 상품 탐색 동기에 맞는 프로모션 노출
  • 38. 38 Design > User Interface 추가 정보 노출 최상단 Notice 영역 사용자에게 꼭 전달해야 할 정보를 노출하는 영역, 페이지 최상단에 노출하여 주목도를 높이고, 거부감이 높은 팝업 대체 컨텐츠 미리보기 영역 페이지 이동 없이 미리 보기가 가능하여 원하는 목적을 쉽게 달성 상품 가격 상세정보 노출 영역 상품의 가격에 마우스 오버 시, 상세 할인 내역, 약정 기간 내의 전체 금액 및 전체 할인 금액 등의 상세 정보 노출, 페이지 이동 없이 원하는 정보를 확인할 수 있음 서비스 특징 노출 영역 1Depth 메뉴에 맞는 서비스의 특징 노출 영역, 중요하지만 Depth가 깊은 정보를 GNB에 노출하여 접근성을 높임
  • 39. 39 Design > User Interface ‘가입’ 접근 경로 가입하기 GNB ‘가입’의 중요도를 고려하여 2Depth까지 상시노출 스크롤 시, 상단에 가입 이동 경로 노출 페이지가 길어져서 스크롤을 하는 경우, GNB가 스크롤로 인해 가려지는 경우, 최 상단에 가입으로 이동할 수 있는 Access Point 항시 노출
  • 41. 41 Design > Product Info 상품의 탐색 동기에 맞는 상품 탐색 경험을 제공 상품 정보 제공 전략 -신규 고객과 기존 고객의 상품 탐색 동기에 맞는 상품 필터링 조건과 관련 이벤트를 통해 원하는 상품을 탐색하는 노력을 덜어준다. -상품 리스트를 통해 상품의 혜택, 속성, 특징, 가격 등을 통한 비교가 한눈에 가능하기 때문에 상품을 비교하는 노력을 덜어준다. -상품 선택에 결정적인 영향을 미치는 정보인 약정 기간 내의 할인 혜택, 가입 관련 이벤트를 제공하여 상품을 선택하는 데 필요한 노력을 덜어준다. 다양한 필터링 조건을 통해 원하는 상품을 쉽게 찾을 수 있는 상품 리스트 페이지 상품의 속성, 혜택, 특징, 가격을 한눈에 비교할 수 있는 상품 리스트 페이지 상품 선택에 결정적인 영향을 미치는 정보를 제공하는 상품 상세 페이지 상품 탐색 상품 비교 상품 선택 상품 탐색 상품 탐색 상품 탐색 상품 비교 상품 비교 상품 선택
  • 42. 42 Design > Product Info 상품탐색, 비교 및 선택 사용자 시나리오 To-Be 이용 시나리오 관련된 분석 시사점 이용단계 상품 탐색 동기 신뢰성 있는 정보를 얻기 위해 A사 홈페이지과 모바일웹에서 상품 탐색 상품 정보 조회 A사 홈페이지과 모바일웹에서 다양한 필터링 조건을 통해 원하는 상품을 바로 찾을 수 있고, 한눈에 모든 상품을 일목요연하게 조회할 수 있음 상품 비교 원하는 상품 군의 가격, 혜택, 상품 특징을 한눈에 비교할 수 있음 페이지 이동 없이 가장 중요한 정보의 상세 내용까지 비교할 수 있음 원하는 상품을 찾지 못했을 경우의 보조 수단 •사용자의 이슈, 혜택 등의 다양한 상품 필터링 조건 제공을 통해 상품 탐색 동기에 맞는 제공 상품 탐색 경험 제공 •전체 기간내의 할인 금액을 구체적인 숫자로 표시 •상품의 속성, 금액, 혜택, 채널, Content 별 탐색 기능 필요 •상품 리스트 페이지를 통해 상품의 종류, 혜택, 특징, 요금을 한 눈에 비교 •상품 선택 의사결정에 긍정적인 영향을 줄 수 있는 이벤트, 혜택 정보를 함께 노출 •원하는 상품을 쉽게 찾을 수 있는 ‘맞춤 상품’ 기능 업그레이드 •선택이 행동으로 이어질 수 있도록 가입 관련 내역을 전체 사이트 내에 노출 -원하는 상품을 찾기 위해 여러 단계를 거칠 필요 없이, 다양한 필터링 조건을 통해 원하는 상품을 바로 찾고 한눈에 모든 상품을 일목요연하게 조회할 수 있다. -상세한 상품 비교를 위해 상품을 하나하나 확인할 필요 없이 한 눈에 상품을 비교할 수 있다. -상품 선택과 가입 절차에서 이벤트와 혜택 정보를 지속적으로 노출하여, 사용자의 의사결정에 긍정적인 영향을 줄 수 있다. 상품 선택 원하는 상품의 상세 정보,혜택의 자세한 내용과 할인 항목을 상세하게 확인 상품을 선택하지 못했을 경우, 좀 더 쉽게 맞춤 상품을 통해 원하는 상품 확인 상품 결과에서 ‘가입 상담’ 버튼을 선택하거나 가입 상담 전화를 함 대리점이나 마케팅을 통해 얻은 상품 정보의 자세한 확인 특별한 이슈 (이사, 결혼, 이통사 변경) 시, 상품 탐색을 시작 상품 탐색, 비교, 선택
  • 43. 43 Design > Product Info 상품 탐색 동기에 맞는 상품 탐색 경험 제공 상품탐색 및 비교 상세 구현 방안 •신규 회원, 기존 회원의 상품 탐색 동기에 맞는 다양한 프로모션과 상품 탐색 조건 제공 [신규회원 상품 탐색 경험] [기존회원 상품 탐색 경험] 상품 탐색, 비교, 선택
  • 44. 44 Design > Product Info 한눈에 상품의 상세한 정보까지 비교하고, 의사 선택을 유도 상품탐색 및 비교 상세 구현 방안 •상품 리스트 페이지를 통해 상품의 속성, 금액, 혜택 특징, 요금을 한눈에 비교 가능 •상품 선택에 도움을 줄 수 있는 최저요금, 최대혜택은 별도 표시 •금액 영역에 마우스 오버 시, 상세 할인 내역 및 약정 기간 내의 총 납부 요금 및 할인 요금 확인 가능 •상품 선택의 의사결정에 긍정적인 영향을 줄 수 있는 이벤트, 혜택 정보를 함께 노출 [상품 전체를 확인할 수 있는 상품 서브메인 페이지이자 상품 리스트 페이지] 상품 탐색, 비교, 선택
  • 45. 45 Design > Product Info 원하는 상품을 좀 더 빨리 찾기 위한 모바일 웹 맞춤상품 기능 제공 상품탐색 및 비교 상세 구현 방안 •신규 고객이 오프라인에서 확인했던 상품을 좀 더 쉽게 찾기 위한 상품 속성별 필터링 조건 노출 [신규고객의 상품 탐색] [기존고객의 상품 탐색] [공통 : 쉬운 상품 탐색 조건 입력] •기존 고객의 상품 탐색 동기에 맞춰, 더욱 빠르게 상품을 찾기 위한 이슈별 필터링 조건 노출 •앞에서 입력한 상품 필터링 조건 덕분에 더욱 간소해지는 상품 탐색 조건 입력 단계 상품 탐색, 비교, 선택
  • 46. 46 Design > Product Info 상품 선택의 의사결정에 결정적 영향을 줄 수 있는 정보를 함께 노출 상품탐색 및 비교 상세 구현 방안 상품 탐색과 선택에 방해가 되는 모든 요소 제거를 위해 LNG를 삭제하고, Line Map만 제공 ① 탐색 ② 비교 ③ 비교, 선택 ① 탐색 •상품을 특징을 알 수 있는 한 줄 카피 •상품의 실질적인 특징을 알 수 있는 상품 정보 ② 비교 •상품의 약정, 특징, 유형 선택을 친근한 언어로 표현 •월 납부 요금과 상세한 할인 혜택 노출 ③ 선택 •상품 선택 의사결정에 결정적 영향을 줄 수 있는 약정 기간 내의 전체 납부 금액 및 할인 혜택 노출 •①  ②  ③ 의 정보 확인 후, 자연스럽게 가입으로 이루어 질 수 있는 영역 제공 상품 탐색, 비교, 선택
  • 47. 47 Design > Product Info 하나의 상품 내에서도 원하는 요금을 한눈에 확인할 수 있도록 제공 상품탐색 및 비교 상세 구현 방안 •선택한 약정에 따라, 상품의 요금제를 한눈에 확인할 수 있는 표 제공 00 •선택한 약정에 따라, 부가요금까지 한눈에 확인할 수 있는 표 제공 상품 탐색, 비교, 선택
  • 49. Design > 가입 가입 구현 전략 고객의 가입결정이 흔들리지 않도록 끝까지 상품에 대한 혜택을 인지 시킴 -사용자의 가입 결정이 번복되지 않도록 사이트 전체 내에서 가입으로 이동할 수 있는 Access Point를 제공한다. -가입 페이지는 접속한 사용자의 이탈을 방지하는 요소들로 구성한다. -기존의 가입에서는 화면 당 한 가지 정보를 사용자에게 노출시켰다면, 새로운 가입화면에서는 가입에 필요한 여러 정보를 제공하여 정보를 한 눈에 확인하고, 바로 가입으로 이루어질 수 있는 동선을 구축한다. 새로운 가입화면에서의 가입신청 고객 제휴사 할인!!!! 요금할인!! 가입 이벤트!!! 가입 혜택! 사은품!! 기존 가입화면에서의 가입신청 고객 !
  • 50. 50 Design > 가입 신규 고객의 상품 가입 신규고객의 상품 가입 사용자 시나리오 To-Be 이용 시나리오 관련된 분석 시사점 이용단계 상품 경로 확인 약정이 다 끝나갈 무렵 타 통신사의 새로운 상품을 권유하는 문자의 URL로 이동 상품 탐색 상품 탐색 시나리오 상품 선택 이벤트 및 혜택 확인 가입 이전에 상품 혜택과 프로모션을 한번 더 확인함으로써, 가입 의지 상승 •사용자의 관심을 끌 수 있는 마케팅 (할인 혜택, 상품 특징, 가입혜택 등 강조) •외부 채널인 공식 Blog, SNS, 유투브와 A사 홈페이지와의 연계 필요 •상품 선택 결정에 긍정적인 영향을 줄 수 있는 이벤트, 혜택 정보를 함께 노출. •사용자에게 맞는 상품을 보다 쉽게 찾을 수 있는 ‘맞춤상품 추천서비스’ 업그레이드 •사용자가 가입에 대한 생각을 번복하지 않도록 붙잡는 효과 -가입하려고 하는 상품정보와 상품 관련 이벤트 및 혜택정보는 함께 제공되어야 상품에 대한 혜택을 사용자가 쉽게 파악할 수 있다. -가입 신청 시 고객의 결정을 흔들리게 하는 요소들을 배제하고 긍정적인 영향을 미치는 정보를 함께 노출해야 한다. -언제 어디서나 가입이 용이하도록 웹과 모바일웹에서 동시에 가입신청을 지원해야 한다. -전화상담을 할 때 사용자가 신청한 가입상품 정보에 대해 반복하여 설명하는 일이 없도록 정보가 상담원에게 잘 전달되어야 한다. A사 공식 홈페이지나 SNS, 대리점 사이트, 블로그 등을 통한 상품 확인 전화 마케팅을 통해 이동 대리점이나 매장 가판에서 상품 확인 원하는 상품의 상세 정보,혜택의 자세한 내용과 할인 항목을 상세하게 확인 상품을 선택하지 못했을 경우, 좀 더 쉽게 맞춤 상품을 통해 원하는 상품 선택 상품 관련 이벤트가 있는지 같은 페이지 내에서 확인하고 선택 가입 시 받을 수 있는 사은품 확인 및 카드할인 확인
  • 51. 51 Design > 가입 신규고객의 상품 가입 사용자 시나리오 To-Be 이용 시나리오 관련된 분석 시사점 이용단계 상품 가입 경로 A사 홈페이지 메인 또는 상품 상세 페이지에 있는 ‘가입문의’ 전화번호로 연결 상품 가입 •‘전화상담신청’을 ‘가입상담신청’으로 명칭을 바꿔 사용자에게 가입만을 위한 번호라는 것을 명확하게 알림 •A사 홈페이지와 모바일웹에서 가입까지 가능하다는 메시지를 지속 노출 •‘가입상담 신청하기’ 메뉴 선택 시 바로 전화상담 신청서를 입력할 수 있도록 하여 사용자의 가입 단계를 단축 •사용자가 선택한 상품 정보가 자연스럽게 가입 상담 사에게 전달 •IPTV의 이용방법을 자세히 알 수 있도록 매뉴얼 제공 •A사 홈페이지와 모바일웹에서 멤버십 프로그램 안내 & 부가 서비스를 확인하고 가입 또는 구매가 가능하도록 함 •지속적 방문을 유도할 수 있는 요금과 관련된 흥미 있는 정보 제공 -가입하려고 하는 상품정보와 상품 관련 이벤트 및 혜택정보는 함께 제공되어야 상품에 대한 혜택을 사용자가 쉽게 파악할 수 있다. -가입 신청 시 고객의 결정을 흔들리게 하는 요소들을 배제하고 긍정적인 영향을 미치는 정보를 함께 노출해야 한다. -언제 어디서나 가입이 용이하도록 웹과 모바일웹에서 동시에 가입신청을 지원해야 한다. -전화상담을 할 때 사용자가 신청한 가입상품 정보에 대해 반복하여 설명하는 일이 없도록 정보가 상담원에게 잘 전달되어야 한다. A사 웹/ 모바일 홈페이지 메인에서 ‘가입’으로 이동하거나 상품 상세 페이지의 ‘가입상담 신청하기’로 이동 바로 상담원과의 전화통화를 통해 상품에 대한 상담 실시 및 가입 절차 진행 선택한 상품을 쉽고 빠르게 가입하기 위한 전화상담 신청서 기입 후 ‘전화상담 신청하기’ 선택 가입 완료 후 A사 홈페이지에서 요금 확인 및 관련 부가서비스 확인 멤버십과 관련된 포인트 및 혜택 프로그램 확인 IPTV의 경우, 자세한 이용방법을 확인하고, 자주 보는 채널의 즐겨 찾기 부가 서비스 가입 및 구매 신규 고객의 상품 가입
  • 52. 52 Design > 가입 신규 고객의 상품 가입 ‘가입’으로 이동하면 바로 전화상담 신청 Form을 제공하여 사용자의 가입 단계를 단축 가입 신청서 작성 시 같은 페이지 내에서 혜택 및 사은품을 확인할 수 있도록 하여 사용자의 가입행동이 막히지 않도록 함 가입상담 전화번호와 일반상담 전화번호의 혼선이 없도록 명확한 번호 제공 가입관련 이벤트 및 사은품을 바로 노출하여 이동 단계를 단축 신규고객의 상품 가입 상세 구현 방안 사용자의 가입 결정이 번복되지 않도록 가입 페이지로의 신속한 이동 및 명확한 혜택 정보 제공
  • 53. 53 Design > 가입 신규 고객의 상품 가입 상품 관련 이벤트를 Scroll하여 내리면 상단에 가입전화를 할 수 있는 탭이 계속해서 노출이 되어 사용자가 쉽게 가입전화를 연결할 수 있도록 함 시간과 장소에 상관없이 사용자가 원할 때 가입신청이 쉽고 빠르게 이루어 질 수 있도록 단순한 가입 프로세스 제공 가입 신청 페이지에서 바로 관련 이벤트를 확인해 볼 수 있도록 이벤트 및 혜택 정보 배치 신규고객의 상품 가입 상세 구현 방안 언제 어디서나 쉽고 빠르게 가입할 수 있는 가입신청 페이지 마련
  • 54. Design 고객센터 본 챕터는 공개용 버전에서 생략
  • 55. Design 차별화 서비스 본 챕터는 공개용 버전에서 생략
  • 56. Design Graphic Design 본 챕터는 공개용 버전에서 생략
  • 57. 이제 우리는 단순한 보험회사가 아니다. 우리는 앞으로 재정적 안전이나 자동차 구매, 가옥 개조, 심지어 멋진 휴가에 이르기까지 다양한 꿈을 이루는 데 도움이 되는 상품과 서비스를 제공할 것이다. - 파머스그룹의 마틴 파인스타인 우리는 단순한 디자인 회사가 아닙니다. 우리의 고객을 위해서 시장이 원하는 변화를 찾아줍니다 301, Dosan-daero, Gangnam-gu Seoul, Korea 135-890 T. 02 2052 8900 F. 02 2052 8904 U. rightbrain.co.kr