장국영님의 아티클

아임웹 온보딩 프로덕트 배포기

버튼 실험으로부터

1. 메인 프로젝트와 별개로 아임웹 홈페이지 메인의 CTA(Call-To-Action)인 [제작 영상 보기]를 [무료 시작하기]버튼으로 변경하여, 기간별 클릭수와 사이트 개설 및 구독에 기여하는지 파악해보기로 했다.

   1. [제작 영상 보기]는 제작영상으로 임베드 되고, 변경된 [무료 시작하기]버튼은 https://imweb.me/theme 로 전환된다.

   2. 약 2주 간의 변경 전과 후를 비교했을때, 클릭수는 [제작 영상 보기]보다 [무료 시작하기]가 약 20.55%증가하였으나, 사이트 개설완료율은 전보다 12.70%감소했고, 구독 및 부가서비스 또한 이전 대비 2.25%p감소했다.

2. 결과적으로 [제작 영상보기]보다 [무료 시작하기]라는 문구가 물리적인 유입량을 확대하는데 기여했지만, 기존 랜딩페이지는 아무런 변화가 없이 그대로였기 때문에, 사이트 개설이나 구독 수 증가엔 기여하지 못했다.

[그림1] 인스턴트 히트맵 관찰

△ [그림1] 단순히 버튼 레이블만 변경해도 클릭수가 무려 25% 증가했다. ‘무료’가 미치는 영향력이란!

레슨런

랜딩페이지의 유입량 자체가 증가했지만 사이트 생성 수와 전환에 기여하지 못했다는 점에서 ‘원복’을 고려해볼 순 있지만, 직접적으로 부정적인 영향을 주었다고 보긴 어려웠고 클릭수, 이를 테면 후킹(hooking)자체에서 효과를 보았으니,
한 번 이들의 마음을 사로잡아 보는 것을 시도해보기로 했다.

액션 플랜

그렇다면, 증가된 유입량을 기반으로 전환율 확대하는 방안(액션아이템)을 고민해보자.

액션아이템 설정하기

• (1) 실험 회고하기:

  • 유입된 고객에게 실제로 원하는 것을 제공해줬는가? → 확인할 수 없다.

  • 그럼, 고객이 원하는 것은 무엇인가? → 정확히 모른다.

  • 현재 우린 고객이 원하는 것을 알 수 있는가? → 대체로 인터뷰나 VOC를 통해 추정할 뿐임.(통계적 유의성 낮음)
    → 아! 그렇다면, 우선 ‘고객이 무엇을 원하는 지'를 알아내야 우리가 '무엇을 제공해줄 수 있는지’를 알 수 있겠구나!

• (2) 액션아이템 설정하기:

  • (배경) 홈페이지에서 고객에게 제품의 유용성을 인식시킬 수 있는 액션아이템은 크게 ‘유료 플랜’, ‘템플릿’, ‘가이드/FAQ 콘텐츠’정도다.

  • (가설) [무료 시작하기]를 통해 유입된 고객은 대체로 신규 고객일 것이고, 신규를 대상으로 온보딩을 통해 고객을 빠르게 식별하여 우리가 가진 해결책(아이템)을 제공해준다면, 아임웹 서비스의 MOT를 쉽게 맞닥 뜨릴 수 있을 것이고, 이를 통해 유료 전환되는 고객이 늘어날 것이다!

  • (방향성)

    • [무료 시작하기]를 통해 유입된 무작위 고객에게 아이템을 제공하기 위한 최소한의 단서를 얻어보자.

    • [무료 시작하기]는 신규 유저를 대상으로 존재하는 CTA이니, 고객 온보딩 과정을 통해 빠르게 고객을 식별하자.

액션아이템을 온보딩에 제공 가능하도록 가공하기

응답 가능한 사항은 우리가 제공 가능한 범위이어야 한다.
그래서 먼저 제공 가능한 범위를 파악하기 위해 컨디션을 파악하는 것이 선행됐다.

요금제 컨디션 점검

[그림2] 아임웹 요금제 페이지

△ [그림2] 첫 진입 화면(Average fold)에서 요금제가 단순 나열되어 있고, 2년 결제 시 '최대 30%할인'되는 점은 알기 어렵다.

요금제 페이지에 [표]로 나열된 기능은 모두 58개에 달하고, 상단 고정된 요금제 구분에 따라서 표 하나 마다 열거된 기능 하나씩 비교하는 일은 몹시 괴로운 일이다. 웹사이트를 쉽게 만들려고 왔는데, 왠 걸. 알아야될 게 한 트럭인 샘이다. 이 수많은 기능 중에 고객에게 반드시 필요한 존재할 것이고 기능 하나하나 모두 소중하지만, 처음 접하는 고객은 자신의 브랜드(사업)에 무슨 기능이 필요한지 한 번에 알 턱이 없다.

[그림3] 아임웹 요금제 페이지 스크롤 히트맵 관찰

△ [그림3] 요금제 페이지의 스크롤 히트맵을 보면 기능표 마지막까지 본 고객은 절반(50%)을 넘지 못한다.

| 고객님: 아이고~ 난 그런거 잘 모르겠고, 그래서 얼마?

| 아임웹: 네 고객님, 저도 뭘 원하시는 지 잘 모르겠습니다.

| 고객님: ….뭐시 중헌디?

제공중인 기능을 쉽고 빠르게 이해할 수 있도록 그룹핑하기

모든 프로덕트의 정해진 운명이 그러하듯, 무조건 직관적이고 심플해야 한다. 필수 불가결한 학습 요소를 제외하곤 UX의 가장 중요한 목표는 ‘사용 가능성’인 것이다. 아임웹의 원칙도 ‘Simple is best’고 아임웹에 조인하면 받는 책도 켄 시걸(Ken Segall)의 <미친듯이 심플>이다.(좀 무섭다) 온보딩의 과정도 예외 없이 간결해야하고, 이 대원칙을 전제로 58개의 기능을 하나 하나 친절하게 설명하는 것은 작은 프로덕트 안에서 물리적인 어려움이 있고, 심플과는 거리가 멀다.
어떻게 해야할까?

우선 중복되거나, 서비스 제공 범위(제품적 유용성)에서 벗어나는 것들을 중심으로 묶거나 제외하는 기준을 세운다.

하지만, 제 아무리 논리적인 기준을 세워도 어디까지나 기획한 사람의 머리에서 나온 가설(뇌피셜)이기에 모호할 수 밖에 없다. 기획 과정을 중간 공유했을 때도 쉽게 공감대를 형성하지 못했던 기억이 있다. 결과적으로 근거가 되는 기준을 세우기 모호한 영역에 닿아 있다면, 때로는 상식선에서 접근하는 것도 필요하다. 무엇보다 중요한 건 제품을 빠르게 론칭하고 고객의 반응을 살피며 디벨롭하는 것이기 때문이다.

1차 가공 결과

60여개의 기능을 총 26개로 줄였고 기능의 성격에 따라 6개로 카테고라이징하여, 한 눈에 들어올 수 있도록 '인지 부하'를 줄였다. 이정도 수준에서는 질의 과정의 선택 항목으로 제공해줘도 기존 요금제 페이지보다 보아야 할 가짓수를 2배 이상 줄였고, 때문에 프로덕션 제공 수준으로 가공되었다는 판단을 내렸다.

또 기능 단위로 필요한 요금제는 이미

아임웹 요금안내 에서 확인할 수 있으니 각 기능별로 필요한 ‘최소 권장 요금’을 하나씩 맵핑해두고, 최종적으로 고객이 받아 볼 수 있는 요금제는 선택한 기능 중 Top Tier에 맞춰두고, 웹사이트 제작 시 추가 결제를 하는 일이 없도록 유도한다.

템플릿 컨디션 점검

홈페이지 내 템플릿 페이지에서 제공중인 ‘테마’는 총 33개로 그 중 1개는 ‘Blank’로 제공 중인 빈 템플릿이다.
실제 온보딩을 통해 제안 가능한 테마 타입은 총 32개인 샘, 이 템플릿을 각각 큰 목적 중심으로 나눈다.

[그림 4] 아임웹 템플릿 모음(출처: 아임웹 템플릿)

[그림 5] PD희연님과 함께 검토했던, 템플릿 분류 작업

현재 제공중인 템플릿은 커머스, 비커머스, 기타(해당 없음)을 기준으로 분류를 진행했다. 이 기준은 앞서 정의한 기능 그룹별로 전자상거래 기능(쇼핑몰 여부)의 필요 여부에 따라 크게 나누기 위함인데, 이렇게 나눠진 분류는 카테고리에 따라 다시 결제/주문, 상품/배송, 광고/분석, 기본/사이트 관리, 고객 관리, 기타 여섯가지 기능 그룹을 맵핑한다.

템플릿 분류 결과

앞서 정의한 기능 매핑 기준을 세워 따라 선호도와 완성도에 따라 추천 콘텐츠로 제공할 템플릿을 선정한다.

[그림6] 템플릿 태블로 대시보드(출처: 아임웹)

아래처럼 고객에게 제공해줄 템플릿을 분류&선별하였다.

트랜드와 완성도(디자이너 피드백)에 따라 구분했지만, 템플릿 개수가 적어 효율성 측면을 고려해 트랜드 데이터 기준으로 구축하지는 못했던 점이 아쉽다. 하지만 앞으로 다양한 템플릿이 추가될 예정인데, 카테고리를 기준으로 실시간 선호 템플릿을 고객에게 제시할 수 있다면 좀 더 쉽게 웹사이트를 제작할 수 있는 실마리를 제공할 수 있을 것 같다.

또한, 매핑 기준으로 아이템의 활용 방향성이 크게 정의되었고, 이를 토대로 가이드/FAQ 콘텐츠가 랜딩 페이지(최종 종착 페이지)에서 서비스 이용에 도움이 되도록 700여개의 가이드 중 신규 사용자에게 필요한 정보들을 선별했다.

이 선별된 가이드 콘텐츠를 웹사이트 제작의 단계별, 사업 유무(커머스, 비커머스, 기타)에 따라 적재적소하게 활용될 수 있도록 랜딩페이지에서 추가적인 노출 기준을 세운다.

대략 이런 로직으로 정리하였다.

자, 이제 각각의 아이템들의 준비가 완료되었다.

다음은 잘 가공한 아이템들을 하나씩 조립하는 과정이다.
우선, 선정된 아이템 별 활용 방향을 정의한다.

활용 방향을 제시할 수 있도록 고객의 정보를 수집할 수 있도록 최소한의 질문을 설계한다.

이어서 질문의 난이도를 낮추고 빠르게 답변 할 수 있는 직관적인 객관식 답변을 정의하고, 아이템을 맵핑한다.

사이트 목적별 티어 구분

티어별 구분은 전자상거래 여부에 따라 분류하였다.

마지막으로 설계된 질문을 맵핑 기준에 따라 적절히 노출하기 위해 논리적인 순서를 정한다.

[그림7] 플로우 차트

그래서 나온 화면흐름도. 이 결과물을 얻을 때까지 무수한 논쟁(..)과 시행착오가 있었다.

완료 페이지

최종 완료페이지에 도달한 사용자는 팡팡 터지는 축하(?)를 받을 수 있다. (멋진 모션을 만들어주신 태규님께 감사)

일련의 과정을 통해 온보딩을 완료한 고객에게 최종적으로 선택 기능별 요금과 가이드 콘텐츠를 노출할 수 있게 되었다.

마치며

작성일인 11월 말일을 기준으로 아임웹 홈페이지에 방문한 고객 중 월별 약 10%에 해당하는 2만 여명이 온보딩을 경험했고,
이 중 55%의 고객이 신규 사이트를 생성하고, 이 들중 약 9%의 고객이 유료 전환까지 이어졌다.
모수 자체는 작지만 아직 프로덕트의 고도화가 진행되지 않은 상황에서 전환이 발생하고 있다는 점은 고무적이라고 생각한다. 특히, 사이트 생성 수는 실험 대비 대조군보다 +22.95%p증가하였고, 유료 전환율은 +3.32%p 증가한 수치를 기록했다. 중간에 자잘한 이슈가 있었지만 아직까지 큰 이슈 없이 잘 적응 중인 것으로 보인다.