W5D3 | 쇼핑몰 사장님들 집중! 아임웹의 랜딩 페이지 [코드스테이츠 PMB 12기]

쉽지만 완벽하게, 쇼핑몰은 아임웹!

 

1. 앱 서비스(혹은 웹 서비스) 1가지를 선택하여 랜딩 페이지를 분석해 주세요.
EX) 
- 해당 서비스는 총 몇 단계로 나눠져 있는지
- 어떤 구조로 되어있는지 (ex) CTA-설명1-설명2-유도-설명3-보충-CTA 등)
- 어떤 카피 문구를 포함하고 있는지 (CTA를 유도하는 대표 카피 1개, 마이크로 카피 3개 이상)
- 제품 및 프라이싱이 나와있는지 (나와 있다면 상세히 작성)
- CTA는 어디에 배치되어 있고 어떻게 전환을 유도하고 있는지
현재 랜딩 페이지에서 개선해야 할 부분과 그 이유에 대하여 이야기해 주세요. (최소 2가지 이상)

---

쉽지만 완벽하게, 쇼핑몰은 아임웹

오늘의 과제로 선택한 웹 서비스는 아임웹이다. 내가 아임웹을 사용하게 된것은 웹 페이지를 빠르게 만들어 공개하고 싶어서였다. 아임웹은 개발자 한 명도 없이 온라인 쇼핑몰을 운영할 수 있도록 쇼핑몰 솔루션을 제공하는 스타트업이며, 워드프레스 문서 작성하듯이 이미지와 텍스트를 넣고 마우스로 크기를 조절하거나 단을 나누는 것만으로 쇼핑몰 웹사이트를 만들 수 있다는 것. ‘쉽게’ 그리고 ‘자유롭게’ 쇼핑몰을 만들 수 있다는 것이 아임웹이 내세우는 자사 솔루션의 강점이다.

---

아임웹의 랜딩 페이지

메인 화면

검색엔진에서 아임웹을 누르고 들어오면 나오게 되는 아임웹의 화면이다. 먼저 다양한 카피들이 눈에 뛴다.

아임웹은 하얀색의 배경색으로 눈에 띄게 고정 CTA 카피인 '로그인'과 '무료 시작하기'을 어필하고 있으며,

메인카피 : 쉽지만 완벽하게, 쇼핑몰은 아임웹
메인카피 : 원하는 디자인을 가져다 놓기만 하세요
마이크로 카피 : 브랜드 성장의 모든 것
마이크로 카피 : 쉬우면서도 딱 맞는 기능과 감각적인 디자인

 

---

첫번째 설명 (기능 영상)

메인화면 중 가장 넓은 면적을 차지하는 아임웹을 소개하는 영상.

플레이 버튼을 누르게 되면 3분가량의 '마우스로만 웹사이트 만들기'라는 카피를 가진 직접 아임웹을 만드는 영상을

통해 기능들을 보여줌으서 장점을 설명한다.

---

두번쨰 설명 (쉽게 원하는 디자인)

메인화면에서 스크롤을 내리면 '원하는 디자인을 가져다 놓기만 하세요'라는 메인 카피를 통해 누구나

아임웹을 통해 쉽게 웹사이트를 만들 수 있음을 어필한다.

마이크로 카피 1 : 포토샵을 몰라도
마이크로 카피 2 : 코드를 몰라도
마이크로 카피 3 : 최대한 알아서

---

세번째 설명 (반응형 웹)

아임웹을 통해 반응형웹을 만들 수 있기때문에, 모바일과 태블릿으로 확장성을 어필한다.

메인 카피: PC만 신경쓰세요! 모바일, 태블릿은 알아서
마이크로 카피 : #반응형웹 #아임웹

---

네번째 설명 (간편 결제,SNS와 SEO)

아임웹의 간편 결제, SNS 연동, SEO 최적화등 다양한 기능을 어필하고 있다.

메인 카피 : 쉬울뿐만 아니라 강력함을 더합니다.

CTA1 (기능 더보기)

'기능 더보기' CTA를 통해 아임웹만의 기능들을 자세히 설명하는 페이지로 넘어가게 된다.

기능 설명 하는 페이지에서는 '무료로 시작'이라는 유도를 하고 있다.

메인 카피 : 코딩을 몰라도, 포토샵을 몰라도
마이크로 카피: 포토샵을 몰라도

---

다섯번째 설명 (쇼핑몰 앱)

쇼핑몰에 적합된 서비스인만큼 쇼핑몰 앱과 앱 알림을 보여주고있다.

메인 카피 : 쇼핑몰 앱
마이크로 카피: 내 사이트 전용 앱을 통하여 정기적으로 이벤트 정보를 보내세요!

---

여섯번째 설명 (광고)

대략 30초짜리 간편한 홈페이지 제작을 어필하는 아임웹의 광고가 나오는데, CEO,Cafe와 Fashion부분의 각 다른 광고가 있다.

---

일곱번째 설명 (고객 인터뷰)

실제로 아임웹을 사용하는 긍정적인 고객인터뷰를 보여준다.

CTA2 (더 많은 인터뷰 확인하기)

다양한 분야의 회사에 근무하는 대표, 마케터, 디자이너와 PM등 많은 고객 인터뷰가 존재한다.

메인 카피 : 고객인터뷰
마이크로 카피 : 아임웹 고객분들의 스토리를 확인해보세요

---

여덟번째 설명 (아임웹 사용 브랜드)

아임웹을 통해 웹을 제작하고, 서비스를 진행하고 있는 3만개 이상의 브랜드가 있음을 보여준다.

메인 카피: 30,000개 이상의 브랜드가 아임웹을 통해 고객과 소통하고 있습니다.

---

아홉번째 설명 (제작 사례)

아임웹을 통해 제작한 웹사이트들을 소개하고 있다.

CTA3(더 많은 제작 사례 보기)

'더 많은 추천 사례 보기'를 누르면, 쇼핑몰 뿐 아니라 자신이 알고 싶은 분야를 선택하여 필터링 할수있다.

메인 카피 : 쉽고 아름답게, 아임웹으로 만들었습니다.
마이크로 카피: 아임웹으로 자신만의 독창적인 아이디어를 담아낸 브랜드들을 소개합니다.

---

유도1 (로그인)

아임웹을 직접 체험하기를 바라며, 로그인을 유도가 있다.

메인 카피 : 무료로 시작
마이크로 카피: 시간과 비용을 절약할 수 있는 최고의 방법, 아임웹을 직접 체험해 보세요.

---

CTA4 (온라인 교육)

시작이 어렵게 느껴지는 사용자를 위한 아이웹 교육팀에서 제공하는 무료 온라인 교육을 있다.

메인 카피 : 시작이 어려우신가요?

마이크로 카피 : 교육 받아보시면 쉽습니다.

유도2 (수강 신청시 로그인)

수강신청을 클릭하게 되면 로그인을 유도하고 있다.

---

열번째 설명(이용수 & 공식제휴사)

아임웹 메인화면의 가장 마지막 하단에는 아임웹을 사용하는 이용자들 수와 아임웹 공식제휴사를 보여주고있다.

메인 카피 1 : 한번 이용하면 팬이 됩니다.
메인 카피 2 : 아임웹 공식제휴사
마이크로 카피 1 : 아임웹에서 당신의 생각을 표현해보세요.
마이크로 카피 2 : 아임웹은 페이팔, KG이니스스, 네이버, KCP, 나이스페이, 이지페이, 액심베이 공식파트너입니다.

---

개선 할 점

1. 메인화면에 나오는 첫번째 영상을 기능을 알려주는 3분짜리(첫번째 설명)가 아닌, 30초가량의 광고(여섯번째 설명)로 대체하는게 아임웹이 소비자를 맞이하는데 적합하지않을까? 

2. 랜딩페이지의 초반에 아임웹이 소비자의 기대를 만족해켜줄수있다는 제품이라는 것을 어필한다. '쉽지만 완벽하게, 쇼핑몰에 최적화된 아임웹'을 보여주기위해서는 실제로 제작된 상품을 보여주는것이다. 

---

W5D4

As is - To be를 통해 테스트하고 싶은 내용에 대해 이야기해 주세요.
테스트 과정을 세부적으로 스케줄링 해주세요.

As is 

아이웹을 찾는 고객은 어떤 사람일까?

1. 쇼핑몰을 운영하기위해 웹사이트가 필요하다.

2. 개발능력이 없다.

3. 웹 주문제작은 경제적 부담이 된다. 

그렇다면, 랜딩페이지에서 아임웹이 고객의 기대에 부응하는 서비스이라는것을 어필해야 하지 않을까? 

 

To be

먼저, 맨 상단 동영상이 차지하는 공간을 줄이고, 아임웹을 사용한 제작된 웹의 직관적인 '제작 사례'를 보여주는것이 고객에게 서비스에 대한 신뢰를 주는 좋은 방법이라 생각해 메인화면 상단에 위치시키고, 이용자를 늘리기 위해 '무료 시작하기' CTA를 추가적으로 배치했다.

---

A/B 테스트 스케줄링

1. 가설 설립 : 맨 상단의 영상의 크기를 줄여, 랜딩페이지 상단에 '제작 사례'와 함께 '무료 시작하기' CTA 버튼으로 유도를 통한 신규 이용자가 많아 질 것이다.
2. 목표 : 3일이내 가입자 수 30% 증가
3. 기간 : 2022년 6월 13일 ~ 2022년 6월 20일 (1주)
4. 대상 : 아임웹을 처음으로 방문하는 이용자 1000명
5. 측정 지표 : 제작사례의 '무료시작하기' CTA 클릭율과 전환율 

---

W5D4 회고

운이 좋게도, 오늘 그룹 발표에서 나의 주제인 '아임웹'이 주제로 뽑혀서, 팀원들의 다양한 의견을 들어볼 수 있었다.

함께 논의해 본 아임웹 랜딩페이지의 추가 문제점 및 개선점들은 다음과 같다.(좋은 인사이트를 주신 팀원님들 감사합니다)

1) 맨상단 (영상 내) 메인카피 설득력&임팩트 떨어짐 (현재: “쉽지만 완벽하게, 쇼핑몰은 아임웹”)

• 아임웹의 특징이자 강점 어필

웹사이트를 만드는데 전문성이 없는 사람들이 쉽고 간편하게 웹사이트를 제작할 수 있다

• 해당 내용이 담긴 카피를 맨상단에 추가하여 유입 전 유저들에게 안도감과 신뢰를 줄 수 있도록 디벨롭 (예: “야 너두 할 수 있어”와 같은 톤의 강력한 카피..!)

2) 맨상단 동영상이 차지하는 공간이 너무 크다

• 맨 상단 동영상 사이즈를 절반으로 줄이고,
• 나머지 절반에 메인 카피(1번 개선안) 를 작성하여 배치 (1+2번 동시 개선)

💫💫3) 랜딩 페이지 내 [무료 시작하기] CTA 버튼 찾기 어려움 (+작은화면으로 볼 때는 CTA 안보임)

• 하단 or 우측에 바(bar)에 [무료 시작하기] CTA가 계속 노출될 수 있도록 > A/B 테스트
• or 랜딩페이지 중간 쯤에 [무료 시작하기] CTA 추가 배치하여 리마인드
• 작은 화면으로 볼 때도 CTA가 보이도록 개선

4) 페이지 맨상단 동영상 클릭 유도 요소 부족

• 현재 3분짜리를 > 30초로 줄이기
• 짧은 영상으로 모든걸 파악할 수 있다는 카피 삽입하여 부담감 줄여주기
• 클릭하지 않아도 자동재생되도록 변경
• 정 안되면 맨 하단으로 내리기..

여기서 개인적으로 가장 놀라웠던 의견은 오른쪽 상단에 상시 표시되어 있는 '무료 시작하기' CTA버튼을 찾기 힘들었다는 내용이였다.
나는 최근 이틀동안 수십번을 본 페이지여서 뇌이징이된건지 상시로 떠 있는 '무료 시작하기' CTA버튼을 개인적으로 참 잘 만들었다고 느끼고있었기 때문이다... 심지어, 화면이 작은 기기에는 CTA가 안보인다고 한다.

사람마다, 서비스를 이용하는 환경에 따라 UX는 많이 달라질수있다는 것을 느끼는 소중한 하루였다.

그나저나 내일이 위클리 과제 제출이라니.. 나의 심정을 잘 나타내는 짤 같다.