우리가 고객의 문제를 해결하는 방법

Ellie choi
Turing
Published in
15 min readMay 11, 2023

구매의 시작, 스토어 탭 개선 이야기

안녕하세요! Turing UXUI 팀 디자이너 Ellie입니다.

이번 글에서는 UXUI 팀이 어떻게 문제를 정의하고, 고객의 문제를 해결하고 있는지 소개해 드리려고 합니다!

현재 Turing에서는 신규 가입자의 결제 전환율을 높이기 위해 AARRR 퍼널을 기준으로 서비스를 개선하고 있는데요. 이번 글에서는 5가지 퍼널 중 Revenue 단계에 속하는 스토어 탭 개선 과정에 대해 이야기해 보려고 합니다.

스토어 탭, 왜 개선하게 되었을까?

우선 스토어 탭은 수학대왕이 판매하고 있는 이용권을 구매할 수 있는 페이지입니다. 주로 고객들이 이용권을 탐색할 때, 구매할 때 등의 상황에서 접근한다고 볼 수 있는데요.

이용권을 탐색하는 고객에게는 상품의 이해도를 높여 매력적으로 느끼게 해 구매를 유도할 수 있어야 하고, 구매를 결심한 고객에게는 쉽고 빠르게 구매할 수 있도록 도와주는 역할을 해야 합니다. 결제 관련 데이터를 확인하며 스토어 탭의 역할을 잘 수행하고 있는지 확인해 보았는데요.

1. 결제 시작 과정에서 높은 이탈률

상품 바텀 시트에서 주문하기 PV까지 이탈률

결제 과정 중 어느 단계에서 어려움을 겪고 있는지 확인해 보았을 때, 상품의 옵션을 선택하는 바텀 시트에서 구매하기 버튼을 누르지 않고 가장 많이 이탈하고 있다는 점을 확인할 수 있었어요. 부모님께 결제 요청 버튼을 선택했을 때 주문하기가 아닌 다른 페이지로 이동하는 비율을 제외하더라도, 유저들이 결제 시작 과정에서부터 문제를 겪고 있고 구매까지 원활하게 이어지지 못하고 있다는 점을 파악할 수 있었습니다.

2. 각 탭의 낮은 진입률

2월부터 3월까지 데이터를 확인해 보면 스토어 탭 진입률이 점점 낮아지고 있다는 점을 확인할 수 있는데요. 또한, 스토어 탭 내에 있는 상품 정보 탭(킹패스란)과 후기 탭도 잘 눌러보지 않는다는 점도 확인할 수 있었어요. 상품에 대한 설명과 후기를 확인할 수 있는 탭의 진입률이 낮음을 통해 고객들의 상품의 이해도가 부족한 상황임을 알 수 있었습니다.

위와 같은 문제에는 여러 가지 원인이 있을 수 있지만, UXUI 관점에서 보았을 때 결제 시작 단계 개선과 정보를 보여주는 구조 및 방식의 개선이 필요하다는 점을 파악할 수 있었어요.

왜 구매하지 않을까?

어떻게(HOW) 개선할지 고민하기에 앞서, 고객들이 왜(WHY) 구매하지 않는지부터 브레인스토밍을 진행했는데요. ‘왜 구매하지 않을까?’로 시작해서 계속 WHY를 던지며 크게 3가지의 원인을 도출할 수 있었습니다.

1. 상품을 이해하기 어렵다.

수학대왕에서는 2가지 이용권인 기본형(비환급형), 환급형을 판매하고 있는데요. 상품에 대한 이해도가 낮은 유저 입장에서는 상품 탭만 봤을 때 각 이용권이 무엇인지 설명이 부족해 명확하게 인지하기 어렵다는 문제가 있었어요. 구매를 유도해야 하는 메인 화면에서 상품을 직관적으로 이해하기 어렵다는 점이 가장 큰 문제라고 생각했습니다.

유저들의 이해를 돕기 위해 상품 정보와 후기를 탭을 따로 구성해 제공했지만, 각 상품과 매칭이 되는 구조가 아니다 보니 해당 상품에 대한 정보와 후기에 대한 접근성이 낮다는 문제점도 있었어요. 각 탭을 의도적으로 선택하지 않는 이상 상품에 대한 정보와 후기를 확인할 수 없다는 부분도 개선이 필요하다고 느꼈어요.

기존 스토어 탭의 경우 상품을 선택하면 기간과 장학금 혜택을 확인할 수 있는 상품 바텀 시트가 노출되는데요. 이탈의 원인에는 가격 이슈도 있을 수 있지만, 구매 시작 단계에서부터 6개월/12개월 단위의 기간을 옵션으로 선택하게 한 것과 옵션에 따라 변경되는 장학금 혜택 정보가 문제점이라고 생각했어요.

겉에서는 하나의 상품을 판매하는 것처럼 보여 구매를 결심해도 상품 바텀 시트에서 기간과 기간에 따라 변화하는 결제 금액으로 또 고민해야 하는 것에서 장벽이 있을 수 있다고 생각했어요.

장학금 혜택 정보는 오늘 날짜로부터 남은 기간 X 1,500원의 정보인데, 유저가 한 번 더 고민해서 계산해야만 이해할 수 있기 때문에 이 부분도 개선이 필요해 보였어요. 어떤 글에서 ‘유저들은 고민하는 것을 싫어한다’라는 내용을 본 적이 있는데, 기존의 상품 바텀 시트는 고민해야 할 문제들을 자꾸 주는 느낌이었어요.

2. 상품이 매력적으로 보이지 않는다.

옷을 살 때 새 옷을 입은 나의 모습을 상상하며 기대하는 마음으로 구매한 경험이 있지 않나요? 저도 사고 싶은 옷에 대한 설명(핏, 소재 등), 다른 사람들의 실제 리뷰 등을 확인하고 직접 입은 모습을 상상하며 ‘사고 싶다! 갖고 싶다!’라는 마음에 구매한 경험이 있는데요. 상품에 대한 자세한 정보와 후기 등을 통해 매력적이라고 느꼈기 때문에 구매를 했다고 볼 수 있을 것 같아요.

위 경험을 기반으로 현재 스토어 탭을 보았을 때 상품과 정보가 연결되지 않는 구조, 고민해야 할 지점이 많은 상품 바텀 시트뿐만 아니라 유저들이 수학대왕을 통해 어떤 서비스를 제공받을 수 있는지 확인할 수 없다는 점도 개선이 필요하다고 생각했어요.

또한, 현재 이용권을 구매하기 전까지 맛보기 또는 무료로 제공되는 문제로만 이용해 볼 수 있어 수학대왕이 제공할 수 있는 것 등 매력을 더 적극적으로 어필해야 했습니다.

수학대왕의 매력을 어필하는 방법으로 수학에 대한 고민을 해결해 줄 수 있다는 점을 보여줘야 한다고 생각했어요. 수학대왕에서는 유저들의 고민에 기반한 서비스를 제공하기 위해 수학에 대한 고민을 수집했는데, 보통 학생들은 위 3가지 고민을 가장 많이 하고 있다는 점을 확인할 수 있었습니다.

이러한 고민들을 해결하기 위해 유저의 실력에 따라 AI로 맞춤 문제를 추천해 주고, 문제 난이도와 풀이에 따른 자세한 힌트와 피드백 그리고 동기부여를 위한 다양한 퀘스트와 장학금을 제공하고 있는데요. 이처럼 고민을 해결해 줄 수 있는 다양한 기능과 서비스를 제공하고 있지만 기존 스토어 탭은 수학대왕을 통해 어떤 것을 얻을 수 있는지, 나의 고민을 해결해 줄 수 있는지 기대감을 가지기 어렵다는 점이 문제였어요.

3. 진짜 효과가 있을지, 꾸준히 할 수 있을지 의구심이 든다.

많은 사람들이 무언가를 구매할 때 후기를 확인하는 모습을 볼 수 있는데요. 후기를 통해 그 상품에 대한 믿음과 기대감을 가질 수 있고, 정말 구매해도 괜찮을지 판단할 수 있는 기준을 제공하기 때문이라고 생각해요. 그만큼 후기는 유저들에게 구매 여부를 판단하는 요소로서 중요한 부분인데요.

수학대왕도 마찬가지로 그로스 팀에서 진행한 결제자 인터뷰 내용을 참고했을 때, 결제한 유저의 절반 이상이 후기를 보고 구매를 결심하게 되었다는 내용이 있었어요. 또한, 후기를 보지 않은 유저보다 본 유저의 결제 전환율이 50% 상승했다는 점을 통해 후기를 봤을 때 훨씬 더 구매까지 잘 연결되고 있다는 점을 확인할 수 있었습니다.

수학대왕으로 꾸준히 학습해서 성적 상승 경험이 있는 실제 유저들의 인터뷰 내용도 있어서 스토어 탭에서 실제 후기와 효과에 대한 부분을 더 적극적으로 꺼내서 보여주는 것이 중요하다고 생각했어요.

또한, 유저들이 구매를 고민하는 요소 중 한 가지가 장기권으로 판매하고 있다 보니 꾸준히 학습할 수 있을지 확신을 가지기 어렵다는 점인데요. 최근 데이터를 확인해 봤을 때 이용권을 구매해서 사용하고 있는 유저들의 64%가 주 5회 이상 공부하고 있을 만큼 많은 유저들이 꾸준히 학습하고 있다는 점을 확인할 수 있었어요. 이러한 실제 데이터를 활용해 수학대왕과 함께하면 꾸준하게 공부도 할 수 있다는 점을 더 어필해야 함을 알 수 있었습니다.

위 3가지 문제들을 한 줄로 요약하자면 기능에 대한 제약, 상품에 대한 정보 부족, 정보가 연결되지 않는 구조 등으로 인해 상품을 이해하기 어렵다로 정리할 수 있을 것 같아요.

그래서 상품을 쉽게 이해할 수 있는 구조와 유저들의 고민을 기반으로 우리가 제공해 줄 수 있는 것, 그리고 실제 효과까지 보여주는 방식으로 이번 개선 방향성을 설정하게 되었어요.

어떻게 해결할 수 있을까?

1. 결제 시작 퍼널 줄이기

기존에는 상품 탭 > 상품 바텀 시트 > 배송 정보 입력으로 퍼널이 구성되어 있었어요. 그래서 상품 탭에서 상품 선택 후 바텀 시트에서 옵션 선택하고 구매하기 버튼 선택까지 유저가 총 3–4번 정도 액션을 해야 했어요.

개선안에서는 CTA 버튼(바로 구매)을 플로팅으로 노출해 스크롤 과정에도 쉽게 접근 가능하고 직관적으로 선택할 수 있도록 개선했어요. 그리고 상품 탭에 진입했을 때 디폴트로 메인 상품이 선택되어 있어 CTA 버튼을 선택하면 바로 주문하기 페이지로 이동될 수 있도록 퍼널과 액션의 수를 3번에서 1번까지 줄였습니다.

기존에는 상품 바텀 시트에서 기간을 옵션으로 선택하는 구조로 되어 있었어요. 6개월/12개월 단위 자체가 옷의 컬러를 고르듯 가볍게 선택할 수 있는 요소가 아니기도 하고, 기간에 따라 결제 금액이 달라지기 때문에 기간 옵션을 각각의 상품으로 구성해 개선했어요.

각 이용권에 따라 2가지의 기간 옵션이 있기 때문에 총 4가지 상품으로 구성되는데, 모든 상품을 한 화면에 모두 노출해 위계 없이 보여주기보다 강조해야 하는 이용권인 기본형을 우선으로 제공하는 방식을 생각했어요. 그래서 탭 구조를 활용해 메인 화면에서 기본형을 가장 먼저 만나볼 수 있도록 구성했습니다.

2. 상품 정보 자세하게 전달하기

CS로 자주 들어왔던 문의 사항으로 각 이용권에 대한 차이가 무엇인지, 환급형은 무엇인지에 대한 내용이었는데요. 기본형과 환급형은 장학금 혜택이 다르게 제공되고 있다는 차이가 있어요.

기존에도 표 형태로 기본형(비환급형)과 환급형에 대한 차이를 확인할 수 있도록 설명이 있었지만 상품 정보 탭(킹패스란)을 선택해야만 볼 수 있고 해당 영역까지 스크롤을 해야만 확인할 수 있다는 문제점이 있었어요.

그래서 상품과 연결된 구조로 제공하며 직관적으로 눌러볼 수 있도록 상품 선택 영역 하단에 기본형과 환급형이란? 버튼을 추가했어요. 버튼 선택 시 노출되는 상품 설명 바텀 시트에서는 기본형과 환급형의 장학금 금액의 차이에 대한 부분을 시각적으로 표현해 두 상품의 차이점을 확인할 수 있도록 했어요. 더불어 탭에서도 환급형에는 아이콘을 추가해 두 상품이 다르다는 점을 표현했습니다.

3. 서비스 매력 어필하기

기존에는 상품과 상품 정보, 후기가 각각의 탭으로 이루어진 구조로 인해 성품에 대해 쉽게 이해하기 어렵다는 문제가 있었어요. 그래서 커머스의 상품 상세페이지처럼 상품을 만나는 페이지에서 바로 스크롤 하며 상품에 대한 설명이나 효과, 후기 등을 볼 수 있게 구성해 접근성을 높이는 구조로 개선하게 되었어요.

커머스 상품 상세페이지 구조를 활용하되 스토리의 형식으로 상품의 장점을 전달하는 방식을 고민했는데요. 단순히 제공자의 입장에서 장점을 표현하기보다 수학 공부를 하면서 생기는 고민과 성적 상승에 집중해서 이야기를 구성하고자 했어요. 그래서 큰 흐름으로는 ‘우리랑 같이 성적 상승할 수 있고(효과), 맞춤 학습으로 도와줄게!(기능) 실제로 성적 오른 친구들 이야기도 만나봐!(후기)’의 흐름으로 구성하게 되었어요.

그리고 이야기를 보며 유저들이 ‘내 고민을 해결해 줄 수 있지 않을까?’ ‘내 실력에 맞게 공부할 수 있구나!’라고 생각할 수 있도록 수학 고민 데이터를 적극 활용했는데요.

내 실력과 맞는 문제를 풀고 싶다는 니즈는 AI가 분석한 실력을 바탕으로 맞춤으로 추천되는 오늘의 문제와 힌트 • 피드백 기능으로, 동기부여가 되지 않아 꾸준히 하기 힘들다는 니즈는 문제를 맞힐 때마다 제공되는 장학금 기능을 연결했어요.

문제의 양이 부족하다는 니즈는 수학 전문가 팀이 제작한 약 3만 개의 다양한 유형의 문제로, 원하는 시간과 장소에서 공부하고 싶다는 니즈는 모바일, 태블릿의 장점을 기반으로 등교하는 버스에서도 야자 시간에도 원할 때 공부할 수 있다는 장점을 텍스트로 요약해서 전달했어요.

각각의 기능들을 소개할 때 메인 카피만 확인해도 정확하게 해당 기능에 대해 이해할 수 있도록 짧고 직관적인 카피로 구성했고, 애니메이션을 통해 시각적 직관성을 높여 기능에 대한 이해도를 높였습니다.

4. 실제 효과 보여주기

신뢰도 있는 정보를 전달하기 위해 최근에 도출한 유저 데이터를 활용해 성적 상승효과와 리텐션 관련 데이터를 보여주고자 했어요.

그래서 내부적으로 도출한 데이터 중 수학대왕을 쓰고 성적이 평균적으로 2등급 정도 올랐다는 내용과 10명 중 약 6명의 학생들이 주 5회 꾸준히 공부한다와 같이 구매를 결정하는 데 도움을 줄 수 있는 정보를 추가했어요. 학생들이 구매를 할 때 고민하는 여러 가지 요소 중 ‘정말 성적이 오를까?, 꾸준히 할 수 있을까?’에 대한 고민이 많기 때문에 그 2가지를 기준으로 공감이 될 수 있는 정보로 제공하고자 했어요.

실제 효과뿐만 아니라 수학대왕을 이용하고 1등급을 받았던 학생들의 인터뷰 영상이나 대학교 합격 리뷰, 2023학년도 수능 1등급 리뷰 등을 적극적으로 보여주려고 했어요. 실제 효과에 대한 데이터도 중요하지만, 나와 비슷한 친구들의 이야기를 듣는 것이 가장 설득력 있고 효과적이라고 생각하기 때문에 인터뷰 영상과 리뷰를 함께 제공했습니다.

5. 더 쉽게 접근할 수 있게 하기

상품 설명을 보기 위해 스크롤 하게 되면, CTA 영역은 계속 노출되지만 상품 영역이 보이지 않게 되는데요. 스크롤을 하면서 상품 설명을 보다가도 빠르게 다시 상품에 접근할 수 있도록 상품이 노출되지 않는 영역부터 상단 플로팅 버튼이 노출되도록 했어요. 스토어 탭에서 가장 중요한 상품에 쉽고 빠르게 접근할 수 있는 방법을 제공하고자 했어요.

또한, 상품 설명과 후기를 모두 읽고 난 후 우리 서비스의 장점을 명확하게 인지시킬 수 있는 방법이 없을지에 대해 고민했는데요. 수학대왕 장점을 짧고 명확하게 표현해 요약 부분만 읽어도 어떤 내용을 말하고자 하는지 전달할 수 있도록 문구를 구성했어요.

학생들의 상황에 맞게 수학대왕을 언제 어디서든 사용할 수 있다는 장점을 어필하면서, 수학대왕이 유저들에게 줄 수 있는 혜택을 명확하게 요약해서 전달하고자 했어요.

개선이 되었을까?

상품 바텀 시트에 있던 구매하기 버튼을 메인 화면에 플로팅 버튼으로 노출하면서 4월 4일에 출시한 이후 개선 전(2, 3월)에 비해 버튼을 선택하는 비율이 늘어난 것을 확인할 수 있었어요. 퍼널을 한 단계 줄였다는 점과 스크롤 할 때마다 CTA 버튼이 항상 노출해 있어 직관적으로 선택하게 될 수 있다는 점에서 개선 효과가 있었던 것 같아요.

출시 이후 구매 시작 후 배송 정보 입력까지 완료한 유저의 비율도 개선되었다는 점을 확인할 수 있었는데요. 구매하기 버튼의 퍼널이 줄어 구매 시작 비율이 높아지면서 배송 정보 입력을 완료하는 것도 함께 상승되었어요. 다만, 구매 시작을 누른 것에 비해 배송정보까지 입력하는 유저의 비율은 아직 더 개선될 필요가 있다는 점도 확인할 수 있었어요.

어려웠지만, 좋은 경험 👍🏻

결제 관련 파트를 개선하는 것은 다양한 이해관계자가 함께하고, 비즈니스와 직결되다 보니 난이도가 높은 기획이었어요. 신규 가입 유저들이, 서비스에 효용감을 느끼며 사용하고 있을 때 스토어 탭에서 결제까지 원활하게 이끌어주는 역할을 해야 했기 때문에 고민이 많았던 것 같아요.

그리고 유저들이 왜 구매하지 않을까에 대해 고민해 봤을 때 특별한 이유가 있어서 구매를 안 한다기보다 당연하게 제공해야 할 정보와 편의성을 제공하지 못했기 때문이라고 생각했어요. 그래서 상품에 대한 정보를 잘 보여주고, 기존보다 짧은 과정으로 쉽고 편리하게 결제할 수 있도록 개선을 하게 되었던 것 같습니다!

좋았던 점

이번 개선을 진행하며 유저들에게 더 친절할 수 없을지, 조금 더 고민을 덜어줄 수 없을지에 대해서 많이 고민해 볼 수 있었던 것 같아요! 학생들이 가지고 있는 수학 고민은 무엇일지, 어떤 내용을 보여줘야 매력적이라고 느낄지 등 학생 입장으로 생각해 보려고 노력했던 과정이 좋았습니다.

상품 위주로만 노출하던 기존과는 다르게, 메인 탭이지만 상품에 대한 자세한 설명이 있는 커머스 상세 페이지처럼 제작했던 것도 새롭게 생각하고 구성해 볼 수 있는 기회였던 것 같아요.

그리고 데이터도 꾸준히 확인하며 분석해야겠지만, 개선했을 때의 효과를 직접 눈으로 확인하니 좋았어요. 그리고 수치를 더 올릴 수 있는 방법을 고민하다 보니 개선 후에도 자연스럽게 또 새로운 아이디어를 고민하게 되는 스스로의 모습을 보니 뿌듯하기도 했어요. 역시 개선의 끝은 없는 것 같네요!🤔

아쉬웠던 점

문제 정의할 때, CS와 유저 인터뷰 내용을 활용했지만 사용성 테스트를 진행할 시간이 부족했던 것이 아쉬웠어요. 유저들이 스토어 탭에서 상품을 어떻게 탐색하고 결제까지 하는지, 탐색 과정에서의 니즈는 무엇인지, 결제 과정에서 막히는 부분은 무엇인지 등 더 자세하게 보고 싶었는데 그런 부분을 확인하지 못한 것이 아쉬웠던 것 같아요. 다음 개선 때는 꼭 유저 인터뷰와 UT를 함께 진행하고 개선해 보고 싶습니다!

출처 : GIPHY

이번 글에서는 스토어 탭 개선 과정을 통해 UXUI 팀이 어떻게 문제를 정의하고, 고객의 문제를 해결하고 있는지 공유드렸는데요! 과정을 글로 적으며 어떤 부분이 좋았고, 아쉬웠는지 회고를 할 수 있어서 좋았던 것 같아요. 다음에도 저희 UXUI 팀의 다양한 이야기를 준비해 보겠습니다!

긴 글 읽어주셔서 감사합니다! 🙂

--

--