본문 시작

Works 상세

탐색에서 가입까지, 새롭게 거듭난 고객 중심 통합 채널의 사용자 경험

Launch
Jan, 2018
Client
SK브로드밴드
UX
In-Depth Interview, UX Concept Building, UI Concept Building, User Flow, Lo-Fi Prototyping, Wireframing, UI Design, Sketch
Tech
HTML5, CSS, CSS Preprocessor, Web/App Accessibility, SEO, RESTful API

텍스트 기반의 공급자 중심으로 구성되어 접근성이 낮은 콘텐츠 구조를 탈피하고 사용자향 정보 제공과 보다 쉬운 서비스 이용을 위한 행동반응형 UX/UI 구조로 상품의 시뮬레이션에서 신청까지 사용자가 목적한 바를 쉽고 빠르게 찾을 수 있도록 디바이스 성격에 맞게 각각 새롭게 풀어내고자 한다. 우리는 맥락적 선별을 통해 콘텐츠 강약을 주고 Mobile 환경을 고려한 직관적 UI를 구현하였다. 사이트 탐색부터 후 이용단계까지 연결되는 Quick-pick이라는 전체 UX 콘셉트에 고객 전환율 증대 및 편리성 향상을 추구한다.

기존 컬러 시스템을 재정의하여 정제되고 절제된 컬러를 기반으로 한 SK브로드밴드의 레드와 오렌지 컬러는 개인과 기업 채널을 구분하고 그러데이션 컬러로 고객에게 서비스를 제시하는 요소로 활용한다.

직선과 곡선의 조화가 담긴 SK broadband Logo 셰이프를 반영하여 제작한 Pictogram으로 정보이해와 도움을 주고 동시에 브랜드 아이덴티티를 강화한다.

복잡한 이미지와 텍스트를 정제된 비주얼과 워딩 제공을 통해 시선을 집중시키고 정보 이해를 향상시킨다. SK브로드밴드의 채널별 환경 및 운영 이슈를 고려하여 비주얼 전략을 정의하였다. 개인 채널은 단일 오브제와 아이콘으로 정보에 집중 시키고 기업 채널의 경우 이미지를 사용해 감성적으로 노출함으로써 콘텐츠 분류와 이성적 커뮤니케이션을 구현한다.

모바일에서는 Path-optimizing을 통해 ‘어떻게 단계를 줄일 것인가’에 집중하였다. 로그인 전 메인 빅 배너는 다양한 프로모션을 제공하고 로그인 후 빅 배너 영역에서는 마이 페이지의 정보가 시각화하여 노출하고 Multi Main으로 구성하였다.

기존 메인화면에서 노출되던 퀵 메뉴를 개선하여 로그인 전과 후에 따라 사용자에게 필요한 퀵 메뉴를 제공하여 사용성을 강화한다.

Quick Filtering / Quick Find / Sticky Menu를 통해 원하는 상품 검색 및 결합 선택을 빠르게 배치하였다. 페이지 별로 메뉴를 다르게 노출해 사용성을 개선하고 상담 UI 고정으로 가입 상담 신청을 유도한다.

웹에서는 Path-Finding을 통해 ‘어떻게 쉽게 찾을 것인가’에 집중하였다. GNB에 상품을 1depth 메뉴에 노출하여 정보 구조를 한눈에 파악 가능하도록 구현하였으며 마케팅 영역을 추가하여 고객에게 서비스를 제시한다.

퀵 메뉴를 통해 고객의 이용 빈도 수가 많고 중요고다 높은 콘텐츠 영역을 1:1 분리 배치하여 고객이 원하고자 하는 상품으로의 이동이 쉽고 빠르게 하도록 구현하였다.

빠르고 정확하게 고객이 원하는 상품을 비교 검색할 수 있는 서비스를 제공하고 콘텐츠 접근성을 강화한다. 가입 상품에 대한 거부감을 줄이고 쉽게 매출까지 이어질 수 있도록 “내게 맞는 상품 찾기” 및 “간편 요금 계산” 시뮬레이션 가능하도록 상품정보와 연계하여 구성하였다.

고객의 편의성을 높이는 Sticky UI 구조를 통해 정보 탐색 중 언제든지 가입 상담이 가능하도록 상담 UI를 상시 노출하여 상담에서 가입까지 단절 없이 연결될 수 있도록 지속적으로 가입을 유도한다.

Credits

  • Project Manager

    Lee Yongju

    Creative Director

    Kim Youngsun

    UX Designer

    Son MoonsukKim DeokrimAhn ByunghoonKim HyerimMun HyeyeongKim MigyeongPark Jihye

  • UI Designer

    Park JoohyunChoi WonyoungSeo JiheeJu SunyoungKang AreumLee SieunLee Subin

    Interaction Designer

    Kim GisangYoo Jungsun

    Front-end Developer

    Kim DuilKim SeungilKim GilchaeJung Eunseon