‘more 솔루션’ 제작기

이탈 방문자에 대한 답을 제시하는, ‘more 솔루션’ 제작기


‘more 솔루션’ 제작기

떠나는 사용자에게 말을 걸기 위한 연구

지난 4월, NHN AD는 more 솔루션을 정식으로 출시했다. more는 총 18개월의 연구 개발 과정을 거쳤다. PC·Mobile의 파일럿 테스트를 거쳐 공식 웹사이트 오픈에 이르기까지의 긴 여정이었다. more는 사용자의 이탈로 인한 비용 부담을 낮추고, 전환을 높이기 위해 기획됐다. 떠나려는 사용자에게 말을 걸어 좀 더 웹사이트에 머무르게 만들고 구매까지 연결시키는 것이 more 프로젝트의 목표였다.

웹사이트를 떠나기로 결심한 사용자의 생각을 바꾸는 것은 결코 쉽지 않은 일이다. 더불어 이탈 시점에 새로운 콘텐츠를 제안하는 것이 사용자의 쇼핑에 오히려 방해가 되지 않을까 하는 내부적인 고민도 존재했다. UX를 해치지 않아야 한다는 것을 전제로 떠나는 사용자에게 새로운 제안을 하기 위해 우리는 아래 두 가지 물음에 대한 연구를 시작했다.

떠나는 순간을 무엇으로 정의할 수 있을까?
떠나는 방문자를 머무르게 만들기 위해서 어떤 콘텐츠를 제공해야 할까?

모바일과 PC에서 쇼핑하도록 Task를 부여했다

Step ① 쇼핑하는 사용자를 관찰했다.

먼저, 쇼핑 중에 사용자의 이탈 의도가 행동에 어떻게 드러나는지 관찰해보기로 했다. 쇼핑에 대한 관심이 중상 이상인 25~35세 여성 총 10명을 모집하여 현재 구매 고민 중인 상품을 PC와 모바일에서 쇼핑하도록 Task를 부여했다. 테스트 결과, 관심과 이탈 의도 따라 특징있게 드러나는 행동들을 발견할 수 있었으며, 그 중 PC 쇼핑에서 나타난 행동들은 다음과 같다.

· 구매 고민 중일 때 페이지에 머무는 시간이 길어지며, 옵션, 리뷰, 재고 확인 등 콘텐츠 클릭이 많이 발생했다.
· 관심도가 높을 때, 장바구니에 저장하거나 지인에게 공유하는 행동이 나타났다.
· 편한 환경(시간, 장소, 디바이스 등)에서 결제하기 위해 일단 장바구니에 담은 후 이탈했다.
· 이탈 방법은 탭의 닫기 버튼을 주로 이용했으며, 쇼핑을 종료할 경우 브라우저 닫기 버튼을 사용했다.
· 탭을 통해 토너먼트 방식의 쇼핑이 관찰됐다. 탭은 비교 탐색 과정에서 유용하게 사용되고 있었다. 탭을 유지한 채 다른 탭을 열어 쇼핑하고, 그 과정에서 해당 상품이 탈락할 경우 탭을 닫았다.

관찰을 통해 쇼핑 행동 속에 숨겨져 있던 의도들이 보다 선명해졌다. 특정 상품에 대한 관심은 페이지에 머문 시간과 사용자가 확인하는 콘텐츠 등과 연관성이 높았으며, 이탈의 키가 ‘탭’에 있음을 알 수 있었다. 더불어 이탈이 가진 새로운 의미도 확인할 수 있었는데, PC로 탐색을 하고 모바일에서 결제하기 위해 장바구니에 담아 놓은 후 이탈하는 경우는 긍정의 의미를 가진 이탈이었다. 우리는 테스트에서 확인한 행동들을 기반으로 여러 가지 이탈에 대응할 수 있는 콘텐츠를 구체화 시키기로 했다.

Step ② 직접 만나 ‘왜 떠나는가’에 대한 생생한 이야기를 들었다

콘텐츠에 사용자의 니즈를 더 밀접하게 반영하고자 FGI(Focus Group Interview)를 진행했다. 다양한 의견 속에서 우리는 후기에 대한 사용자들의 신뢰가 매우 크다는 것에 주목했다. 참여자들은 후기가 없는 상품을 구매하는 것을 불안해하며, 후기가 많은 상품일수록 더 쉽게 결정을 내리는 모습을 보였다. 후기와 더불어 별점 또한 구매를 결정하는 데 중요한 데이터로 활용됐다. 이는 불확실한 상황에서 집단의 의견을 신뢰하는 동조 효과가 강하게 반영되고 있음을 알 수 있었다. 타인의 의견이 쇼핑 과정에 많은 영향을 미친다는 사실을 바탕으로 구매자 후기와 별점이 추후 패널 요소로 적용됐다.

콘텐츠에 사용자의 니즈를 더 밀접하게 반영하고자 FGI(Focus Group Interview)를 진행했다

Step ③ 사용자의 행동과 언어를 콘텐츠와 연결했다

어피니티 다이어그램(Affinity Diagram)을 통해 이탈 상황을 분류했다. ‘관심 행동이 나타난 후 이탈’하거나, ‘첫 페이지 또는 결제 페이지에서 이탈’하는 경우, 그리고 ‘검색 키워드 유입 이탈’하는 경우 등으로 나뉘었다. 콘텐츠 아이데이션 과정에서 중요하게 고려한 것은 ‘사용자에게 필요한 것인가’였다. 콘텐츠가 노출되는 시점의 특성상, 콘텐츠가 자신과 관련이 없다고 느낄 경우, 스팸 메시지로 여겨져 부정적인 경험으로 연결될 가능성이 높다. 이를 방지하기 위해 이전 행동 이력을 바탕으로 사용자와 콘텐츠의 연관성을 높이고자 했다. 예를 들어, A 상품의 상세 페이지에서 관심 행동이 나타난 사용자에게는 A 상품과 유사한 특징을 가진 상품을 추천하거나, A 상품의 카테고리에서 인기 있는, 또는 평점이 높은 상품을 노출하도록 했다. 원하는 상품을 찾을 수 있도록 도움을 줘 사용자가 콘텐츠를 유용하게 느낄 수 있도록 했다.

어피니티 다이어그램(Affinity Diagram)을 통해 이탈 상황을 분류했다

두 가지 물음에 대한 답을 정리하면

① 떠나는 순간을 무엇으로 정의할 수 있을까?

주요 이탈 동작은 ‘탭 닫기’와 ‘브라우저 닫기’로 나타났다(뒤로가기나 URL을 직접 변경하는 경우도 이탈의 상황으로 놓고 여러 테스트를 진행했으나 PC의 경우 포털사이트의 아웃링크는 새 탭으로 뜨는 경우가 많았고, 주소창을 건드려 이탈하는 것은 너무나 명확한 상황이어서 이때 패널을 보여주는 것은 스팸처럼 느껴질 것이란 판단에 최종 탈락했다). 이후에도 이탈 동작을 감지하기 위한 기술 연구가 꾸준히 진행됐으며, 사용자가 이탈하려는 행동을 보일 때를 예측해 패널을 보여주는 예측 반응에 대한 이탈 타이밍이 새롭게 구현되기도 했다.

② 떠나는 방문자를 머무르게 하기 위해 어떤 콘텐츠를 제공해야 할까?

사용자가 본인과 연관성이 높다고 느낄만한 콘텐츠를 제시해야 한다. 연관성 높은 콘텐츠를 찾아내기 위해 이탈 위치와 관심 상품 유무, 유입 경로 이 세 가지 조건에 따라 이탈하는 사용자에게 제시할 콘텐츠가 결정되는 알고리즘을 적용하기로 했다. 더불어 개인화 추천 기술을 적용해 구매 가능성이 높은 상품들을 선별해 구성할 수 있게 됐다.

새로우면서 익숙하게 보여지는 패널

디자인 모바일 레이아웃 검증

모바일에서 화면을 덮는 패널 UI가 흔하게 볼 수 있는 방식이 아니었기 때문에 프로토타이핑 테스트(Prototyping Test)를 통해 사용성 검증을 진행하기로 했다. 테스트를 통해 확인하고자 했던 항목은 레이아웃 타입과 패널의 노출 방향, 패널 내 상세 페이지의 효용성, 전환 버튼의 유용성 등이었다. 프로토타이핑 테스트 후 패널 UI에서 고민이 됐던 지점들이 명확해졌다. 한 손 컨트롤이 용이하며, 한 번의 스크롤로 더 많은 상품을 볼 수 있다는 이유 등으로 세로형 리스트의 레이아웃을 선호했으며, 웹사이트로 돌아가기 버튼을 배치했을 때 패널을 이용하는 흐름이 매끄럽게 이어졌다. 테스트를 통해 혼란을 야기시키거나 불필요한 기능은 제거하였고, 자연스러운 흐름으로 UI를 개선할 수 있었다.

장식을 최소화한 패널 디자인

웹사이트의 브랜드 아이덴티티를 거스르지 않고, 자연스럽게 어울릴 수 있는 룩이 필요했다. 여러 시안을 거쳐 패널 방식으로 UI가 결정되었다. 디자인 장식은 최소화하고, 커스텀 가능한 영역을 충분히 마련하여 모든 사이트에 본래 있었던 기능처럼 이질감 없이 노출되도록 했다. 더불어 패널이 노출되는 시점에 대한 고민도 디자인에 반영되었다. 패널 노출과 동시에 기존 사이트 영역를 딤드 처리하여 패널 집중도를 극대화시켰다.

‘more 솔루션’의 패널

더 많은 ____을 담은 BI

수 차례의 아이디어 회의를 거쳐 솔루션의 이름은 more로 결정되었다. 웹사이트의 more> 버튼에서 모티브를 얻어 클릭하는 순간 더 많은 경험을 전달한다는 메시지를 담았다. more의 로고는 ‘more’를 소리 내어 발음했을 때 느껴지는 ‘오어[o:]’ 발음의 부드러운 이미지를 라운드 형태의 텍스트로 표현하고, 더보기 버튼의 꺽쇠와 떠나려던 방문자가 다시 돌아온다는 것에 초점을 맞추어 부메랑을 연상시키는 심볼을 만들었다.

more의 BI

프로젝트를 마치며

more 프로젝트는 넓은 범위의 쇼핑에 대해 연구가 필요했다. 특정 플랫폼이나 서비스에 한정되지 않았기 때문에 다양한 환경에서 나타나는 쇼핑 흐름을 파악해야 했고, 그 안에서 의미 있는 패턴을 찾아내기 위해 많은 시간과 노력을 쏟아야 했다. 지금까지 사용자가 웹사이트를 이탈하는 이유가 미지의 영역에 있었다면, 이번 연구는 사용자를 집요하게 관찰하여 그 영역에 한 걸음 가깝게 다가간 시도였다고 생각한다.

기획된 패널 중 이번 정식 버전에 포함되지 않은 패널들도 여럿 남아있다. 패널은 앞으로도 계속 업데이트 할 예정이며, 맥락에 더 가깝게 다가가기 위한 고도화 작업을 계획하고 있다. more가 이탈 방문자에 대한 고민의 좋은 답이 되길 바라며, 제작기를 마무리한다.

Credit
Editor
큐레이터김 다윤
저자NHN AD UI·UX팀 ()
PhotographNHN AD UI·UX팀
Reference
    © DIGITAL iNSIGHT 디지털 인사이트. 무단전재 및 재배포 금지

    뉴스콘텐츠는 저작권법 제7조 규정된 단서조항을 제외한 저작물로서 저작권법의 보호대상입니다. 본 기사를 개인블로그 및 홈페이지, 카페 등에 게재(링크)를 원하시는 분은 반드시 기사의 출처(로고)를 붙여주시기 바랍니다. 영리를 목적으로 하지 않더라도 출처 없이 본 기사를 재편집해 올린 해당 미디어에 대해서는 합법적인 절차(지적재산권법)에 따라 그 책임을 묻게 되며, 이에 따른 불이익은 책임지지 않습니다.

    Related Posts