신세계라이브쇼핑 T커머스 메인화면 개선

신세계라이브쇼핑은 TV 리모컨으로 상품을 사는 T커머스 채널이다. 2019년에 메인화면을 개선했고 2022년 지금의 이름이 됐다. 그 화면을 다시 그리는 것이 이 프로젝트였다. 고객사는 세 가지를 요청했다. 방송 상품에 집중하도록 데이터 영역과의 연계성을 강화할 것, 신세계 브랜드의 헤리티지를 담을 것, 직관적인 UI 시스템으로 고객경험을 일관되게 만들 것. 요청 셋이 지금 화면의 어디에서 무너지는지부터 확인했다.

문제 — 서로를 가리던 정보들

현행 메인화면을 정보의 위계, 시각 아이덴티티, 고객 유도성 세 측면으로 나눠 진단했다. 방송 상품 영역과 우측 배너 상품 영역에서 QR코드가 동시에 노출돼 사용성이 충돌했다. 각각의 정보를 강조하려고 만든 배너 디자인 때문에 정작 방송 상품의 정보가 쉽게 읽히지 않았다. 주문에 쓰이는 것들은 묶여 있지 않았다. 바로주문 버튼, 자동·상담 전화번호, QR코드가 하단 한 줄에 나열만 돼 있어 시선을 모아 주는 결제 영역이 없었다. 하단 메뉴로 들어가는 어포던스가 소비하는 공간도 컸다.

시각 아이덴티티도 같은 상태였다. 브랜드 컬러 그라디언트가 여러 곳에 겹쳐 쓰여 시선이 분산됐고, 어떤 정보에 그 색을 쓸지 정한 기준이 없었다. 바로주문과 QR코드, 자동·상담 번호, 프로모션 배너가 차지한 부피에 비해 그 영역의 효율은 떨어졌다. 브랜드 톤과 다른 스타일의 아이콘이 섞여 있었다. 방송 상품마다 영상 스타일이 달라서 그 위에 놓이는 화면이 어느 영상에도 어울리기 어려웠다. 고객을 이끄는 장치도 직관적이지 않았다. 우측 배너로 들어가는 어포던스가 잘못된 자리에 있었고, 서브 페이지의 포커스 표시는 화면마다 모양이 달랐다.

동종업계의 80%가 같은 형상의 메인화면을 쓰고 있었다. 타 매장 진입을 유도하는 배너 중심의 구성이었고, 신세계라이브쇼핑도 그 안에 있었다. 나머지는 다크 스킨과 함께 매장을 옮겨 다니는 메뉴인 LNB를 썼다. 어느 쪽이든 메인 영상에 대한 몰입은 떨어졌다.

리서치 — 메인화면을 벗어나지 않는 98%

신세계라이브쇼핑이 제공한 자료를 놓고 TV 시청부터 결제까지 가는 경로를 세 가지로 구분했다. 방송 상품을 계속 보다가 주문하는 01 Case, 방송 상품에 관심을 잃고 매장을 탐색하는 02 Case, 방송과 무관한 배너 상품으로 옮겨가는 03 Case다. 01 Case는 메인 화면 유지, 02·03 Case는 메인 화면 이탈로 묶었다. 같은 자료에서 시청자의 98%는 메인화면에만 집중했다. 그래서 01 Case를 기준으로 삼았다. 리모컨을 쓰는 고객은 적었다. 메인 화면에 들어온 고객 300만 명 가운데 리모컨을 조작한 고객은 1~2만 명이었다.

01 Case를 단계별로 펼친 다음, 제공 자료에 나온 고객의 말을 해당 단계 아래에 붙였다. 그 말은 두 단계에 모여 있었다. 상품 정보를 확인하는 단계와 구매를 결정하는 단계다.

• 배너에 방송상품과 연관 없는 상품이 노출돼서 방송상품을 혼동했다.
• 최초 진입 시, 포커스가 어디에 있는지 모르겠다.
• 리모컨으로 주문이 복잡해 주문하지 않을 것 같다.
• 키 입력 안내가 없어 조작 실수로 화면을 이탈한다.신세계라이브쇼핑 제공 자료 분석(2022), 수행사 : 에어코드

제공받은 커머스 사용자 설문에서 상품 정보를 확인할 때 가장 선호하는 방식은 이미지 정보였다. 이미지 정보를 고른 응답이 75.5%였다. 홈쇼핑 채널에 들어가면 영상이 가장 먼저 눈에 띄고 그다음이 L바와 배너였다. 구매 욕구를 자극하는 요소로는 할인율이 가장 크게 작용했고, 구매를 확정시키는 데는 좋은 상품평이 도움이 됐다.

동종업계 영상의 90%가 화면 왼쪽에 상품 정보를 세우는 L바를 쓴다. 현행 신세계라이브쇼핑의 L바는 정보의 위계가 고려되지 않은 타이포그래피 때문에 방송 상품의 핵심 정보를 알아보기 어려웠다. 구매에 필요한 기본 정보가 상시 노출되지 않았고, 상품 정보와 부가정보 사이에 시각적 구분도 없었다. 같은 자리를 잘 쓰는 채널들은 상품명과 가격을 항상 고정해 두고, 폰트 크기와 컬러로 소구 포인트를 또렷하게 드러냈다.

98%와 커머스 사용자 설문은 신세계라이브쇼핑이 제공한 자료에서 가져왔다. 경로를 세 가지로 구분한 것, 현행 메인화면 진단, 동종 T커머스 메인화면과 L바 사례 조사는 우리가 직접 했다.

인사이트 — 화면 한 장 안에서

98%가 메인화면에만 머물고 리모컨도 거의 쓰지 않는다면, 화면을 옮겨 다니게 만드는 개선은 이 고객들에게 닿지 않는다. 한 화면 안에서 단계마다 필요한 정보를 미리 보여주는 쪽으로 개선 방향을 잡았다. 02·03 Case는 메인 화면을 벗어나는 유형이라 기준에서 뺐다. 메인 화면에 남는 01 Case를 98% 페르소나의 여정으로 삼았다.

그래서 01 Case의 네 단계마다 무엇을 먼저 보여줄지 순위를 매겼다. 이 순위대로 놓는 장치들을 '선제적 시각장치'라고 불렀다. 소구점에서는 신세계다움과 메인 영상의 매력도를, 상품을 확인하는 단계에서는 가격 정보와 상품 정보를, 주문 정보를 확인하는 단계에서는 결제 정보를, 결제가 끝나는 단계에서는 자동·상담 번호를 앞에 뒀다. 가격 정보에는 할인율과 월·년 기준 가격을 함께 넣었다. 설문에서 구매 욕구를 가장 크게 자극한 요소로 할인율이 꼽혔다. 리서치가 짚은 네 마디도 이 순위에 반영했다. 배너에 방송 상품과 무관한 상품이 떠서 혼동된다는 말에는 상품 확인 단계의 '필요한 정보를 명확히 노출'로 답했다. 리모컨 주문이 복잡하다는 말에는 결제 단계에서 '자동·상담 → QR코드 → 모바일주문' 순서를 정했다.

전략 — 고객경험과 브랜드경험의 일치

미션을 「Synchronization focused on UX-Branding」, 우리말로는 「고객경험과 브랜드경험에 집중한 일치화」로 잡았다. 진단에서 나온 세 문제가 그대로 세 개의 실행 축이 됐다. 정보 위계를 고려한 UX 구조 개선, 신세계다움의 일관된 BX 구축, 고객 환경을 고려한 직관적인 UI 개선이다. 축마다 재료는 따로 모았다. 98% 페르소나에서 단계별 위계를, 신세계그룹 시각자산 분석에서 계승할 엘리먼트를, 신세계라이브쇼핑만의 차별점 검토에서 고려 사항을 도출했다.

탐색 — 시각자산 열둘 중 남긴 여섯

신세계다움을 화면에 담으려면 먼저 그 '다움'이 무엇인지 정해야 했다. 신세계백화점 오프라인과 온라인, 신세계몰, S.I.Village 넷 가운데 백화점 두 갈래를 분석 대상으로 좁혔다. 그룹을 대표하는 접점이라고 봤다. 백화점의 공간에서 여덟 가지, 온라인 서비스에서 네 가지를 뽑아 열두 가지 시각자산을 Modern Heritage로 정리했다.

열두 가지를 전부 화면에 쓸 수는 없었다. 화면의 요소로 옮길 수 있는지, 먼 시청 거리의 TV 화면에서 살아남는지를 보고 골랐다. 빛을 사용한 공간의 깊이감, 현대적인 럭셔리, 간결한 선과 면의 조형, 스퀘어 타입, 브랜드 컬러, 콘텐츠 집중 여섯 가지가 남았다. 깊이감을 더하는 파사드 디자인과 Classic Interior, 신세계 패턴, 헤리티지 공간, 라인 포커스 시스템, 레이어드는 쓰지 않기로 했다. 남긴 성질은 그라디언트, 드롭 섀도우, 스퀘어, 컬러 시스템, 다이나믹 컬러라는 Design Element로 옮겼다. 디자인 랭귀지 「빛과 그림자가 만드는 경험, 깊이 있는 신세계라이프」를 세우고 Ambient·Intuitive·Flexible 세 원칙으로 풀었다.

같은 언어 위에 메인 화면을 세 안으로 그렸다. A안 영상 강조형은 방송 영상에 쉐도우를 적용하고 배경 그라디언트로 입체감을 만들어 시선을 영상에 모은다. B안 정보 강화형은 박스형 레이아웃으로 구조를 잡고 방송 상품과 관련된 정보를 앞에 놓는다. C안 영상 확장형은 메인 영상과 정보 영역을 하나로 묶어 영상이 확장돼 보이게 한다. 세 안 모두 배너는 8초 간격으로 자동 롤링한다.

세 안을 놓고 팀 안에서 이견이 길었다. 동종업계의 80%가 같은 형상을 쓰는 데에는 이유가 있다는 반론이 나왔다. 리모컨으로만 움직이는 화면에서 익숙한 배치를 깨면 시청자가 조작에서 헤맬 수 있다고 했다. 우리는 리모컨 사용률을 근거로 들었다. 300만 명 중 1~2만 명만 리모컨을 누르는 화면에서 익숙한 조작을 지키는 일은 대다수 시청자에게 의미가 없다고 봤다. 논의는 C안 쪽으로 모였고, 고객사도 그 안을 기준으로 디벨롭을 결정했다.

해결 1 · 세 안이 공유하는 영역 이름

세 안의 구조도는 화면을 Brand Identity Area, VOD, Information Area, Interaction Area, Affordance Area로 나눠 같은 이름을 붙였다. Affordance Area는 안마다 개수와 자리를 달리했다. A안은 하단 하나, B안은 하단과 우측 둘, C안은 우상단과 하단 둘로 표기했다.

해결 2 · 방송 상품을 거드는 배너

배너에 방송과 무관한 상품이 떠서 헷갈린다는 말이 리서치에 있었다. A안은 배경과 우측 배너의 경계를 지워 그 자리를 방송 상품의 확장 영역으로 쓴다. B안은 좌측 배너로 방송 상품의 정보를 더 내준다. C안은 방송 영상과 우측 배너를 하나로 묶는다.

해결 3 · L바에서 먼저 보이는 것

좌측 L바는 상품명과 가격을 맨 위에 고정했다. 그 아래에는 소구 문구를 컬러로 드러내고, 원산지와 결제 조건 같은 부가정보는 회색 박스에 담아 상품 정보와 분리했다. 방송 상품이 바뀌어도 구매에 필요한 기본 정보는 같은 자리에서 계속 보인다.

해결 4 · 상품 카테고리를 따라 바뀌는 배경

화면 하나가 방송 상품마다 다른 영상 스타일을 모두 감당해야 했다. 세 원칙 가운데 Flexible을 여기에 적용했다. 배경을 상품 카테고리에 묶으면 영상이 바뀌어도 화면이 함께 움직인다. 방송에서 주요하게 다루는 카테고리는 뷰티(25%), 건강식품(15~20%), 명품(15%)이었다. 여기에 Default를 더해 배경 그라디언트를 네 벌 만들었다. Default는 다양한 상품에 자연스럽게 어울리도록 모노톤으로 뒀다. 명품은 신세계백화점 오프라인의 따뜻하고 은은한 이미지를 옮겨 다크브라운 계열로 잡았다. 뷰티는 분홍·보라·골드·스킨톤 패키지가 많아서 채도가 높지 않은 옐로우를 썼다. 건강식품은 초록과 파랑을 쓰는 방송 무대가 많고 신뢰성이 중요해 채도가 낮은 블루로 갔다.

해결 5 · 구매를 정한 다음에 나오는 주문 수단

리서치에는 리모컨으로 주문하기가 복잡하다는 말도 있었다. 주문 수단을 항상 펼쳐 두면 화면은 복잡해지고 정작 필요한 순간에는 눈에 띄지 않는다. [바로주문]을 선택하면 그때 [모바일 주문]과 [리모컨 주문]이 나타난다. 위 방향키, 곧 상키를 누를 때마다 포커스가 [바로주문]에서 [모바일 주문], [리모컨 주문]으로 한 칸씩 옮겨간다. [이전]을 누르거나 좌키로 [확대] 버튼에 포커스를 넘기면 주문 수단은 다시 사라진다.

결과 — 영상과 정보를 하나로 묶은 C안

세 안 가운데 C안이 채택돼 디벨롭을 거쳐 구축됐다. 런칭 이후 지표는 우리가 확인하지 못했다.

이후 다른 T커머스 채널들의 메인화면도 영상과 정보를 하나로 묶는 구조로 옮겨갔다. 그 변화가 이 프로젝트에서 비롯됐다고 볼 근거는 없다.

지금이라면 세 가지를 지표로 잡아 넘기겠다. 바로주문까지 닿는 데 걸리는 리모컨 입력 수, 주문 수단이 뜬 뒤의 이탈, 최초 포커스를 찾지 못해 되돌아 나오는 비율이다.